Update Grid Panel on Tab Switch in ExtJS - javascript

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.

Related

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

Extjs grid selection after store.load has incorrect data

In ExtJS 4.2
I have a grid with records with a remote load. I select a row in the grid and update that in the database.I am updating a record in the database and reloading the store with store.load(). After this occurs I can pause in debugger and check the store and it does indeed have the correct values. The same record is still selected however the following code:
var selectedRecords = grid.getSelectionModel().getSelection();
Is not getting the updated records. If I deselect and reselect it the record is refreshed but without doing so it still has the old values. Is there a way to refresh it.
I see a lot of posts about getting the rows to stay selected upon load, but that is not a problem for me it seems to be doing that on its own.
It seems to be a bug with the underlying the Selection Model. The 'selected' mixed collection does not get updated as Ext.selection.Model extends Ext.util.Observable and will be updated only when some event happens related to grid selection. If you do not want to deselect and then then select manually, or even register a callback on the store load, then try the following as workaround,
var selectionArr = grid.selModel.selected;
selectionArr.replace(selectionArr.keys[0],grid.getStore().getById(selectionArr.keys[0]));
Now try,
var selectedRecords = grid.selModel.getSelection();
Should work fine.
Try to refresh the grid store after updating the value.
Ext.getCmp('myGridID').getView().refresh()

Retrieving values of dynamically added forms in ExtJS

I am new to ExtJS and working on application where I have a form(lets call it outerForm). I have buttons to add/remove forms dynamically to/from the outerForm.
Now i am using outerForm.getValues() to retrieve all the field values(of all the dynamic forms; lets call these forms innerForm[ ] ).
The problem am facing is : even after removing/destroying the form(say
innerForm[k]), I get its values in the object returned by outerForm.getValues(),although outerForm.items does not have
innerForm[k].
I Know i can loop over outerForm.items for retrieving values rather than using outerForm.getValues(), I just want to know the reason of this inconsistency.
Try below code to remove the element from inner form.
Ext.getCmp('outerFormId').innerItems[olditem.initialConfig.tabIndex].removeAll();
Here i consider outeFormId is a kind of tab panel and it contains different tabs so on tab changes,it removes the current inneritem elements,before moving to new one.

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

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.

Categories

Resources