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
Whoops, that was definitely it. It is working properly now. Thanks for that.
-Randall
Hi Randall,
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:
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.
If you have a stackblitz sample demonstrating the hiding issue - please share it and I will be happy to assist you with that.
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.