In the html mark up of my component is there a way to specify order, or index of my grid columns like below?
<kendo-grid-column field="ProductID" title="ID" width="40" index=0></kendo-grid-column><kendo-grid-column field="ProductName" title="Name" width="250" index=2></kendo-grid-column><kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}" index=1></kendo-grid-column>1 Answer, 1 is accepted
0
Accepted
Hi Michael,
Thanks for the snippet.
Indeed, there is no such a built-in option that can be used in <kendo-grid-column> component. But to reorder columns in specific way there are 3 approaches that can be used:
1) The columns are rendered in the order that are defined in the HTML. In our case if we want UnitPrice to be second column and ProductName last:
2) The second approach is to use *ngFor Angular's directive to create dynamically columns from array. We can reorder the array elements and this will reflect in the columns order. Check the example below for details:
https://stackblitz.com/edit/angular-hc88rr?file=app/app.component.ts
3) We can use reorderColumn grid method to change the position of the specified column. The first argument that this method accepts is the column whose position will be changed, second the new position of the column. Check the following example which demonstrates this in action:
https://stackblitz.com/edit/angular-js1g6e?file=app/app.component.ts
In case further assistance is required for this case, could you provide some more relevant details about the use case scenario, so that I can suggest some other approach of achieving the desired behavior. Thank you in advance.
Regards,
Martin
Progress Telerik
Thanks for the snippet.
Indeed, there is no such a built-in option that can be used in <kendo-grid-column> component. But to reorder columns in specific way there are 3 approaches that can be used:
1) The columns are rendered in the order that are defined in the HTML. In our case if we want UnitPrice to be second column and ProductName last:
<kendo-grid-column field="ProductID" title="ID" width="40" ></kendo-grid-column><kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
2) The second approach is to use *ngFor Angular's directive to create dynamically columns from array. We can reorder the array elements and this will reflect in the columns order. Check the example below for details:
https://stackblitz.com/edit/angular-hc88rr?file=app/app.component.ts
3) We can use reorderColumn grid method to change the position of the specified column. The first argument that this method accepts is the column whose position will be changed, second the new position of the column. Check the following example which demonstrates this in action:
https://stackblitz.com/edit/angular-js1g6e?file=app/app.component.ts
In case further assistance is required for this case, could you provide some more relevant details about the use case scenario, so that I can suggest some other approach of achieving the desired behavior. Thank you in advance.
Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.