Kendo Grid Angular - Columns Custom order of based on orderIdex

Question

I have a model where it contains field, title, and order index. I would like to load the columns based on the order index in the kendo grid (not in the sequence of the array). Data and fields are added dynamically.

fields: [{field:"ProductName", Title: "Product Name", orderIndex: 0}, {field:"Amount", Title: "Amount", orderIndex: 1}]

Data: [{ "ProductName":"Laptop-1", "Amount": 1000 }, { "ProductName":"Laptop-2", "Amount": 1500 }]

Using <kendo-grid-column *ngFor="let column of columns" [field]="column.field" [title]="column.title"> and (columnReorder)="columnReorder($event)"

I have tried the columnReorder event but not working as expected. Is there any way to show columns based on orderIdex?

Answer 1

Since you are generating them via ngFor, the elements will be created in the same order as the items are in the array.
In order for you to display the columns based on the orderIndex you need to sort the array itself. (Example StackBlitz)

Basically you have to do something like this:

this.columns = fields.sort((a, b) => a.orderIndex - b.orderIndex);