Grid: save/restore columns settings

[Holger]

The How To: Persist the State sample demonstrates how to persist columns settings when the grid's columns are configured in code using *ngFor. But how to restore columns settings when columns configuration is done in markup?

We need to define grid columns in markup, because we are using several column templates, e.g. pipes, filter menu, ...

Thanks

[Dimiter Topalov]

Hi Holger,

There are a couple of possible approaches that come to mind in such scenarios. You can store the column indexes each time the columns are reordered (like in the docs examples), and use the reorderColumn() method as many times as necessary after the Grid is initialized (e.g. in the ngAfterViewInit handler) to reorder the columns programmatically until the stored order is achieved.

Alternatively, you can use the *ngFor column generation (like in the examples), and provide custom logic (*ngIf or *ngSwitch) in the templates markup to determine which cell template should be used, based on some other column property (like for example the column title), i.e. list all possible templates and determine which one will be used via *ngIf/*ngSwitch based on the column title (that will be available for each item in the *ngFor loop).

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Holger]

Hi Dimiter,

sorry for my late reply. Accordingly to the reorderColumn method, is there also a method to programmatically set the column width?

>>Alternatively, you can use the *ngFor column generation (like in the examples), and provide custom logic (*ngIf or *ngSwitch) in the templates markup to determine which cell template should be used, based on some other column property (like for example the column title), i.e. list all possible templates and determine which one will be used via *ngIf/*ngSwitch based on the column title (that will be available for each item in the *ngFor loop).<<
Because we have lots of grids in our application, this approach is not acceptable. It will result in a huge amount of work and also blow up the templates.

If there is no applicable solution we will either implement the needed functionality by our own or we have to wait until this feature request (https://feedback.telerik.com/kendo-angular-ui/1360727-add-persistent-state-for-grid-and-other-components) is implemented.

[Dimiter Topalov]

Hi Holger,

There is no dedicated method for setting column width, but it can be changed programmatically via binding the [width] input of each column component to a class field and changing the value of this field as necessary, e.g.:

https://stackblitz.com/edit/angular-mdcd7r?file=app/app.component.ts

This resizing can be applied when the Grid settings are loaded based on the column widths, coming from the saved configuration.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Holger]

Hi Dimiter,

Thanks for the sample, it helps a lot.

Best regards,
Holger