IgniteUI 2012.2 - igGrid
I'd like to be save the user's settings like sorting, pageSize, pageIndex, column order, which columns are hidden, and filtering for the grid in localStorage. The, when the page is loaded again, the grid would start out with the saved state.
I have managed to save some state, but I'm not sure how to set it again on load (and then if my saved state is in the correct format). I call the below SaveGridState method from these feature events:
features: [ { name: "Sorting", type: "local", columnSorted: function (evt, ui) { SaveGridState(ui.owner.grid); } }, { name: "Paging", type: "local", pageSize: 10, pageSizeChanged: function (evt, ui) { SaveGridState(ui.owner.grid); } }, { name: "Filtering", type: "local", dataFiltered: function (evt, ui) { SaveGridState(ui.owner.grid); } }, { name: "Hiding", columnShown: function (evt, ui) { SaveGridState(ui.owner.grid); }, columnHidden: function (evt, ui) { SaveGridState(ui.owner.grid); } } ]
function SaveGridState(grid) { if (Modernizr.localstorage) { // window.localStorage is available! var gridInfo = new Object(); gridInfo.id = grid.id; gridInfo.pageSize = grid.dataSource.settings.paging.pageSize; gridInfo.pageIndex = grid.dataSource.settings.paging.pageIndex; gridInfo.columnFilters = grid.dataSource.settings.filtering.expressions; // maybe? //gridInfo.columnFilters = grid.element.igGridFiltering("option", "columnSettings"); gridInfo.columnSort = grid.dataSource.settings.sorting.expressions; // maybe? //gridInfo.columnSort = grid.element.igGridSorting("option", "columnSettings"); gridInfo.columnVisibility = grid.element.igGridHiding("option", "columnSettings"); localStorage.setItem("MyBudgetsGridSettings", JSON.stringify(gridInfo)); } else { // no native support for HTML5 storage :( } }
I've tried using a few events of the grid (created, databinding, etc) to reload this saved state but I haven't had much luck. I've also tried using a datasource like this post. Do you have any ideas? BTW, I'm using local data in the form of a JS object but will probably move that server side in the future (oData or JSON webAPI).
Hi
I am using 16.2 version of Ignite UI.
My user will often hide certain columns, so that's available in the column configuration, and can be updated using via retrieval using column's key from [grid.igGrid("option", "columns")] and then setting its hidden property.
However, if the user changes the ordering of certain columns, via [Move] control or drag-drop re-arrange, how to update that layout for future purpose? The following code just fails (obviously) [grid.igGrid("option", "columns") = state.columnsLoaded; ]
Thanks
-Nitin
The easiest way to restore the state would be to set the initial values for page size, sorted columns, and filters to the values loaded from your GridInfo object (if any).
So for paging you can set currentPageIndex in the paging options, when the grid is created, and leave it as 0 by default. For sorted columns, you can do that using the columnSettings array, the same for filters:
http://help.infragistics.com/jQuery/2012.2/ui.iggridpaging => options
http://help.infragistics.com/jQuery/2012.2/ui.iggridsorting => options => columnSettings
http://help.infragistics.com/jQuery/2012.2/ui.iggridfiltering => options => columnSettings
Let me know if you have any other questions. Hope it helps. Thanks,
Angel