This is a migrated thread and some comments may be shown as answers.

Grid: save/restore columns settings

4 Answers 656 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Holger
Top achievements
Rank 1
Holger asked on 09 Nov 2018, 07:22 AM

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

4 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 12 Nov 2018, 08:46 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Holger
Top achievements
Rank 1
answered on 19 Nov 2018, 08:01 AM

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.

0
Accepted
Dimiter Topalov
Telerik team
answered on 21 Nov 2018, 07:20 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Holger
Top achievements
Rank 1
answered on 22 Nov 2018, 07:28 AM

Hi Dimiter,

Thanks for the sample, it helps a lot.

Best regards,
Holger

Tags
General Discussions
Asked by
Holger
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Holger
Top achievements
Rank 1
Share this question
or