So, I'm trying to figure out a way to persist grid customization across user sessions for our application. So I don't need to persist the data being displayed, however, I do need to be able to persist what order the columns are currently in for our table, as the user needs to be able to drag and order the columns around and will want that to persist across sessions. We also need to be able to know which Columns are being shown and hidden such that I would be able show/hide those upon the next time a user logs in.
Any insight would be greatly appreciated.
Thanks,
-Randall Blevins
Hi Randall,
Please see this stackblitz example on how to Save and Load igxGrid State. (please navigate the internal stackblitz window to https://grid-save-state.stackblitz.io/grid-state)
This sample uses an angular directive, that is being applied to the igxGrid and saves the grid state (in terms of sorting, filtering, selection, columns order and state, paging) to the page localStorage. How is that achieved ?
1) Create a directive with the name of igxState or another:
2) Hook to the ngOnInit event of the directive lifecycle, where:
2.1: Subscribe to the NavigationStart event of the page, i.e. this is when the user navigates away from the page. This is the key moment, at which we save the current grid state. When such event occurs, the saveGridState function is called, that contains the logic to write the grid state to the localStorage:
2.2: Call the loadGridState method, that contains the logic to read the data from the localStorage and apply it to the grid.
2.3: Use the ngOnInit lifecycle hook of the grid component to restore the grid columns from the localStorage:
Please refer to the stackblitz example for the complete code, which also contains logic fo the UI buttons on the page, that you will most likely not need. You may want to use the sessionStorage instead of the localStorage. Please let me know if you have any questions.
Hristo
I have similar use case and but for hierarchical grid. I used your sample and change the grid object to hierarchical grid. I can see while navigating settings are getting saved in local storage. but when coming back to page again its not retrieving and the reason I found is its always changing the grid id. on initial navigation grid id was "igx-hierarchical-grid-0", in second load it is "igx-hierarchical-grid-1" and keep on increasing the number and creating new key everytime.
Hi,
Persisting the columns display order is only available if the columns are generated via code.
So quick follow up question, is there a way to do this on command instead of just page load? I tried attaching the SaveGridState ann LoadGridState methods from the state directive to buttons. The SaveGridState seems to work fine and store the Grid state to the localStorage. LoadGridState also seems to be able to retrieve the data fine, the problem comes when I attempt to apply the column data that has been retrieved to the current grid columns. This results in the this.columns being updated, however, the grid will not display the updated columns and instead the entire header will be gone (the column data is there in this.columns, it just won't display. I've tried using the refreshGrid() method, but that doesn't seem to fix it).
So I figured out part of the problem - I had a data fidelity problem and the columns that I initially created to supply the grid with, the data fields did not match exactly in terms of the JSON attributes for the initial column JSON to the JSON that the state getColumns was creating. Making them match in terms of number of attributes (ie making sure to have movable, sortable, etc be in both versions) seems to have fixed the problem.
I am running into an issue with the Show/Hide columns, however, still unfortunately. The hidden attribute looks like it is being stored properly and is being assigned properly to the columns JSON array my grid is reading from, however, the Columns that should be hidden on the page with a hidden attribute of true are still displaying.
If you have a stackblitz sample demonstrating the hiding issue - please share it and I will be happy to assist you with that.
Hristo - Here is a very rough version: https://stackblitz.com/edit/angular-wcburc
For this version I stripped out the dynamic columns service call I was doing to provide the columns to the grid and the service call to get the data. I am seeing similar behavior with the Hidden assignment not applying appropriately.
To reproduce:
1) Hide a column
2) Save the grid state using the button under the apps menu button
3) Unhide the Hidden column
4) Load the Grid from the apps menu button
The column that was hidden should still be visible.
When I was looking into this, it appears when I look at the main grid object that is getting the grid data through the @ViewChild (in the stackblitz it is the productResults variable), if I look at the this.productResults.columns[0].hidden field, it appears to not be picking up the change from the main columns variable that is feeding the grid in the html.
I did find a work around by doing a comparison between the two columns and then doing an assignment for the hidden attribute, however, I had to set this on a timeout as for some reason if you don't it was getting overwritten by something (my thought was maybe the original columns assignment from the load was triggering some kind of update and rolling it back). Setting something to timeout is not really ideal of course.
The work around code is currently commented out in the stackblitz. It's in the loadSavedGrid method which calls the applyHidden method in the product-grid.component.ts.
-Randall
Whoops, that was definitely it. It is working properly now. Thanks for that.
It seems that you have missed to set the hidden attribute for a column, please add it and let me know if issue still exists: