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
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).
Hi,
Persisting the columns display order is only available if the columns are generated via code.
got it, worked for me. also how to persist column display order. I am not generating columns from metadata, in my case they are defined in HTML.
In order to avoid renaming the grid, please explicitly set its id:
<igx-grid id="grid1" ..>
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.