It is listed as a limitation that the columns state doesn't allow functions and so to handle those in the initColumns but I have several templates for the column content so that doesn't seem very practical. Additionally if you store the entire column state then as far as I can tell if I add new columns in future any users with state stored won't pick up those new columns. So rather than restore the entire state of columns I just want to apply the things the user can actual change - visibility, pinning and order. Is there a way to get the existing columns definition to merge with the state first or to apply those parts programatically? I can see you can set pinning through api functions so I could read the state and call functions myself but I can't see how to hide or move columns through api. Is there anyway to achieve this?
Hi Katy,
I am working on a solution that would subscribe to the onColumnInit event for the grid inside the directive you use, or in a directive that extends the igxStateDirective. I will update you within an hour with my recommendations.
Hristo
The trouble with this approach is I have multiple grids. They use various templates already for the columns, cell edit templates, styles, etc. I have created a standard directive for adding in the state saving which I want to then include into all the grids across the application. The approach taken means I would need to go back through all the grids and add the logic to reinstate the templates, cell templates, styles etc in the onColumnInit. It would also be very easy in future for someone to add things into the html that are then dropped if state is reinstated without realizing they needed handling in the onColumnInit also.
So I would rather avoid dropping those when restoring state. Also if new columns are added later then the user won't be getting them if we just restore the columns they had saved previously.
Considering most of the examples show having templates in the html for configuring the grid columns and so I would assume that is a normal approach a lot of people would take, it seems a really big limitation to me to then drop all of those and expect to reinstate in the onColumnInit.
I will try some other ways to see if I can avoid dropping them as part of reinstating the state.
I understand. Restoring the columns will restore all state, except for the properties mentioned in the limitation. In this situation, you should implement logic in the onColumnInit event, where to restore other things such as the column templates. The two approaches are not in a conflict, but the logic in the onColumnInit event should complement everything done by the directive itself.
Let's say that the igxStateDirective will restore the column `personId` with its filtering, sorting state, hidden state. etc, but it will not restore its template. In this case, the onColumnInit event should have the following code to supplement the state directive:
public onColumnInit(column: IgxColumnComponent) { if (column.field === 'personId') { column.bodyTemplate = this.personIdTemplate; } }
The problem is the limitation already mentioned:
getState method uses JSON.stringify() method to convert the original objects to a JSON string. However, this does not support Functions, thats why the [IgxGridState] directive will ignore the columns formatter, filters, summaries, sortStrategy, cellClasses and cellStyles properties. It is up to the developer to keep track and restore those on application level. It is recommended to set these in the onColumnInit event:
getState
IgxGridState
formatter
filters
summaries
sortStrategy
cellClasses
cellStyles
onColumnInit
I already have all the logic for columns in the html. So I don't want to have to rewrite all that into a onColumnInit event instead. So that is why I was trying to reinstate the things the user can change only so that I don't lose all that other information when restoring the state
e.g for one of my columns I have
There is a better way to recreate the columns order, but again, it will work like the state directive itself - will restore much more column properties, than just what you need. See the implementation in the state.directive.ts file.
Is it rallly an issue for you if some other properties get restored too? Please provide some more details on your scenario (like what properties you don`t want to be restored) so I can suggest a better solution.