AG Grid expand rows on init - javascript

i am working on an app that that is using aggrid.
data is received from server, stored into state, and fed to the aggrid [rowData]="rowData"
separate task receives the settings of my data, like: column widths, row expanded, row selected...
i can apply column widths on initial data, and later listen for events when column is resized and save that back,
but for the expanded, no such thing.
i have onFirstDataRendered and there i iterate and set the expanded node, but i want to this before, in init like, because this fires the onRowGroupOpened(event: RowGroupOpenedEvent) every time node is expanded, and i cant distinguish programmatically expand from user click.
can anyone suggest solution for expanding the rows in initial data prep? or distinguish expand event programmatically vs user click?
is there any other way to expand node except node.setExpanded ?

You can use groupDefaultExpanded property to set the default group expansion settings at the start:
0: Don't expand
1: Expand all first level groups
2: Expand up to second level groups
-1: Expand all groups by default (what you need)
Live Demo

Are you using ag-Grid on its own or with AdapTable?
If the latter then that has the ability to set which rows should be expanded when app launches - and will also automatically save any expanded rows for next reload.
I think its AdapTable rather than ag-Grid which is doing this but I'm not 100% sure.
See demo at https://demo.adaptabletools.com/layout/aggridgroupedlayoutdemo

Related

SlickGrid multi-level grouping with group level selection

I've implemented a slick grid with a custom selection model as well as a custom checkbox selection plugin.
I've also added group level checkboxes to allow toggling selection at the top level.
One of my requirements is that collapsed groupings are still selectable via any parent level grouping checkboxes.
My stumbling block seems to be that I can't figure out how to select rows that aren't currently visible on the group. The slick grid maintains the set of visually selected items while the grids data view maintains the full set of selected items, visible or not. However, I can't figure out how to pipe into data when clicking the group checkbox of a collapsed row.
I am configuring my grid like so:
let checkboxSelectionModel = new Slick.CheckboxSelectionModel();
this.grid.setSelectionModel(checkboxSelectionModel);
this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());
let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true);
onSelectedRowIdsChanged.subscribe(
function(e: any, args: any)
{
//business logic stuff
}
);
let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel",
onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged
});
let columns = this.grid.getColumns();
columns.unshift(groupedCheckboxSelector.getColumnDefinition());
this.grid.setColumns(columns);
this.grid.registerPlugin(groupedCheckboxSelector);
gist to custom plugins, too long to include here
Specifically, if you look at line 57 of slick.checkboxselectionmodel:
$.each(dataItem.rows, function(index, groupRow) {
var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
if (groupRowIndex) {
selection.push(groupRowIndex);
}
});
groupRowIndex is never resolved for hidden rows, and so never get selected. I attempted to expand the group when clicked, then resolve the rows, which works but when the group is collapsed afterward, the wrong rows are selected in the grid.
any help would be greatly appreciated!
some notes:
if I select a row and collapse its group, the item retains its selection
there is a different branch of the slick grid which has an equally non-functional implementation of group selection
gist to updated plugins
A functional solution that I'm confident could put anyone seeking similar behavior on the right path, however, I'm not sure how well either of these plugins would work independently. one of my requirements was to only allow row selection via the row checkbox.
one gotcha (that I'm sure is easily improved) is that the group level checkbox still needs to be defined in your group format operator
the main solution to my issue was to expand all collapsed groups when making group-level selects/unselects, perform any select/unselect routines, then collapse any previously expanded groups
EDIT:
This fails when the grid has large amounts of data (10k rows).
Re-opening with a bounty.
It looks like the performance hit of having to expand and collapse so many groups cause issues.

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

SAPUI5 StandardListItem sort by selected

I have SelectDialog for one of the popovers. Inside that, I am displaying data using StandardListItem.
The list shows more than 2000 records. However, it takes lots of time to load data, so I set the threshold of 50. When user opens popover, it will show the first 50 records, once he scrolls down, next set of 50 records and so on.
Now, the issue is when user search for a record (e.g. "ABC"), this ABC can be at position 500 in the list. He selects ABC, closes popover, and then reopens it, he cannot see ABC (because ABC is not in first 50 records). He needs to scroll down 6 times to see the data.
What I want to achieve, is once the user selects records, it automatically goes to the top position. UI5 SelectDialog (UI5 Demo Kit) does not provide this functionality since it only supports one-way binding. Any help on this?
My fragement.XML code:
<SelectDialog
id="idSel"
growingThreshold="50"
growing="true"
showClearButton="true"
items="{data>AllItems}"
multiSelect="true"
noDataText="Not Found"
liveChange="handleSearch"
title="Choose"
autoAdjustWidth="true"
growingScrollToLoad="true">
<StandardListItem id="idItem" description="{data>AllDataId})"
title="{data>Title}" type="Active"/>
</SelectDialog>
rememberSelections would keep the options ticked/unticked but "ABC" would still be in position 500. I don't think the standard sap.m.SelectDialog control has a way of doing this.
I see a few options though:
If the selection is queried from somewhere (OData?) you could enrich the options read with whether they are selected or not for this purpose. Then add a sorter to the list that sorts by selected first (https://sapui5.hana.ondemand.com/#/api/sap.ui.model.Sorter). You might also be able to do that in the UI when reading the list data at once, but you've already said you're doing that in batches for performance reasons.
If manipulating the backend won't work, you could build a custom control that is basically a sap.m.Dialog with 2 sap.m.Lists on top of each other to replicate what you are describing. The top displaying selected items then the bottom, the standard list.
If we look at how other UIs manage multi-select, it is actually 2 lists side-by-side. Selecting/deselecting is simply moving the item from one side to the other (buttons in between or drag and drop). That way you always keep the context of the selected while looking for another to select. I've implemented this recently myself for choosing multiple options from a long list.
Alternatively, don't bother with multi-select on the dialog but simply keep the selected state in a sap.m.MultiInput as sap.m.Tokens. This is probably least work of all.
You can try to set rememberSelections = true, to store the current selection and load this state when the dialog is opened again.
<SelectDialog
id="idSel"
rememberSelections="true"
growingThreshold="50"
growing="true"
showClearButton="true"
items="{data>AllItems}"
multiSelect="true"
noDataText="Not Found"
liveChange="handleSearch"
title="Choose"
autoAdjustWidth="true"
growingScrollToLoad="true">
<StandardListItem id="idItem" description="{data>AllDataId})"
title="{data>Title}" type="Active"/>
</SelectDialog>

Kendo TreeList: expanded should stay expanded for user experience

I have a Kendo TreeList and can edit each item. After editing, I do
treeList.dataSource.read();
This causes every item to collapse (because the default .expand is false).
But I want that everything (items expanded by the user, items not expanded) stays the same, just the edited item/row should change in the view.
This solved my issue :
https://www.telerik.com/forums/restoring-treelist-expanded-state-after-refresh
I had to save the expanded state and restore it every time I call treeList.dataSource.read().
Therefore, I used an onDataBinding method to save and an onDataBound method to restore.

Update Grid Panel on Tab Switch in ExtJS

I have two separate tabs (Tab A & Tab B). These two tabs share a single store wherein each are in their respective indices. [0] - A , and [1] - B.
My controller initializes the load upon click on its menu leaf such as:
oMe.control({
'#role-permission-grid-panel': {
edit: oMe.save,
beforerender: oMe.loadData,
},
'#roles-applicationtype button': {
click: oMe.filterByApplication
}
});
applicationtype button is the filter where tab switching of loaded data happens.
When trying to catch the value of the current filter, the controller successfully shows which one was clicked. However, this no longer refreshes the grid panel data.
SampleGridPanel /view:
console.log('Application',oController.sDefaultToggle);
Simply put, I update the data from SampleController, and try to catch it from my SampleGridPanel by calling filterApplication. My SampleGridPanel only loads the store once due to initComponent. I want to pass the updated data (in this case the selected tab) from the controller to the view. How do I notify my view that this change occurred when it only identifies data on initial load?
I'm also a bit confused. On my controller, when calling oMe.loadData beforerender, it knows the last tabbed value, but when I call oMe.loadData from a custom filter function, it no longer reloads the entire store. It only loads the filtered information based on the filter value.
You could listen to the activate and deactivate events of the tabpanel. These are also available in older versions of ExtJS.
If you are using ExtJS 6, you should really consider using ChainedStore.
A Store contains the data.
The grids aren't bound to the store, but to a ChainedStore each.
The ChainedStores have their source set to the store, and use different filter to only get the data that should be shown in their respective grid.
Please note that as of ExtJS 6.0.1 there were bugs in ExtJS that exhibited when combining ChainedStore with GroupingFeature or CellEditing. These should be fixed in ExtJS 6.0.2.

Categories

Resources