Develop Reference

AG Grid expand rows on init

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

Why does v-dialog reset another element's visibility toggle?

Been hacking at this for days, hopefully there are some Vuetify wizards around.
Here's the situation: I have rendered a set of v-expansion-panels and if one of them is expanded, it also shows an arrow button (display: none is toggled by clicking on v-expansion-header). Upon that button click, my aim is to show a dialog.
Problem: Once dialog is prompted with the button click, the button display toggle is reversed. It disappears as soon as you click on the button to prompt a dialog, and appears again once the v-expansion-panel is collapsed.
How it should be: The arrow button should always be visible as long as the v-expansion-panel is expanded, regardless of whether it is clicked to see the dialog or not.
Here's a codepen replicating and illustrating the problem.
Any thoughts would be much appreciated!

It has to do with using style directly on the element.
Use v-show instead of toggling the styles by hand:
<v-btn v-on="on" class="ml-1" width="36px" v-show="expanded[i]">
Update your data to hold an array for the pannels
data () {
return {
dialog: false,
expanded: [false, false, false]
}
}
And update your toggleMoveUp method to update expanded instead of using HTML ids.
toggleMoveup(i) {
this.$set(this.expanded, i, !this.expanded[i])
this.show=true;
}
Notes:
You need to use Vue.set when updating an array
You should not rely on HTML ids, if you use your components in more than one place at a time you'll run into multiple ids.
Why didn't your approach work? I'm guessing that vuetify is updating an element's style property, but doesn't take care of retaining already existing values so your display:none gets erased.

Posting a solution a colleague helped with. This also works with any array size (which is more of a real life scenario in dynamic webapps). It implements a created() lifecycle hook that adds an expanded: false property to each element in the array, which we can use to keep track of the expand state and toggle the button visibility. Here's the codepen.
However, in general, it is recommended in this scenario to actually make an independent component <v-expansion-panels /> and in the parent component actually loop the components. That would solve the state problems on its own already, since each component maintains their own state in their scope.

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>

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.

jqGrid - Custom filtering works but not after reopening a grid in a modal window

I have a custom filtering function, it passes in a custom url and reloads grid data via:
function filter_grid(filter) {
grid = $(filter).parents('.ui-jqgrid-view').find('.grid');
/* build the url in here*/
$(grid).setGridParam({loadonce:false, datatype:'json'});
jQuery(grid).setGridParam({url:myurl}).trigger("reloadGrid");
$(grid).setGridParam({loadonce:true});
}
This works fine and filters data as expected. However, I allow the user to open the grid in a modal window and this will also work the first time you open the modal window but if you then close the window and reopen it... filtering fails. I see no errors in console... just the reload never seems to happen. Any suggestions?
Clarification
In a nutshell there is a select menu attached to each grid. You can select an option in that menu and it will reload the grid with the filtered data via the filter_grid function. It reloads by reloading the grid with a new url that passes in some parameters to filter the data.
In the gridComplete event I append a select input element (which I populate later) to each grid on the page. Each one has a class of "filter":
$("#grid1 .ui-jqgrid-titlebar:eq(1)").append("<select id='pdd_user' name='filter_user' class='category_select filter'><option value=''>All</option></select>")
I watch for clicks on the filter class:
$('.filter').live('change', function() {
filter_grid(this);
});
That calls the filter_grid function (the one I included above with the first edit of my question), as you can see, and that is what repopulates the grid with the filtered data:
jQuery(grid).setGridParam({url:myurl}).trigger("reloadGrid");
I set it to loadonce:false because the grid was set to loadonce:true when it was initially created (for local sorting purposes) so I set it back to loadonce:false, reload the grid with the new url and params, and then set it back to loadonce:true in order to enable local sorting again.

I don't full understand your question, but I hope I could you help to find what's wrong in your code. I think that you should remove any manipulation of loadonce option of jqGrid. It's unneeded and dangerous. To reload the grid with the server data you need just set datatype to 'json' and reload the grid with .trigger("reloadGrid", [{page: 1, current: true}]); (see here for details). The parameter current: true helps to hold selected row if it will be found in the grid after reloading. The parameter page: 1 can help in case if you use data paging. If the user choosed the second page for example and then reloadGrid will be started it will request the server to load also the second page of the filtered results. So one can have empty grid and the page number 2 in the pager. Resetting the page number to 1 either with respect of setGridParam or with the described above parameter of reloadGrid helps in the cases.
Th problem with setting of loadonce: false could be if the reload of grid will be processed before you set loadonce: true. In the case no local data will be filled in the grid. So the option loadonce: true should be permanently set.
I recommend you additionally to read this answer if you uses server side paging with local sorting of data.