We want to use the built in re-ordering rows feature in kendo grid. Currently Kendo-grid-rowreorder-column has its default icon. How do I change it to a different icon (i.e using font awesome). Plus, how do I use custom content for a dragging row (as shown in the attached file)
How to use custom icon for reordering row in Grid
0 Answers
49 Views
Hi Thao,
Thank you very much for the details provided.
I will address the questions in numerical order so that it is easier for you to keep track of the response.
1. Custom Row Reordering Icon
When it comes to changing any of the built-in icons of the Kendo components, I would suggest checking out our Changing the Built-in Icons article. Since you have mentioned that you are using font icons, please refer to its Font Icons section:
https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-font-icons
For your convenience, I am sending you a StackBlitz demo that implements the suggested icon configuration for the row reordering icon of the Kendo UI for Angular Grid:
https://stackblitz.com/edit/angular-6hehzi
2. Customize Drag Hint
I am afraid that as of now there is no built-in approach in our API that would allow the developer to customize the default hint of the row reordering feature of the Grid. The good news is that in our Feedback Portal, there is an open feature request for the same functionality:
https://feedback.telerik.com/kendo-angular-ui/1623182-customizable-drag-hint-for-grid-component-s-built-in-row-reordering
It is important to mention that I upvoted it on your behalf as this would increase its popularity and will thus be considered for implementation by our development team.
In the meantime, what I could suggest as an alternative approach would be to implement a custom row reordering functionality by using the Drag & Drop utility component:
https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/
https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/manual-drag/
https://www.telerik.com/kendo-angular-ui-develop/components/utils/draganddrop/hint/#toc-custom-hint
To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it in a configuration that demonstrates how to drag and drop records between two Grid components:
https://stackblitz.com/edit/angular-3h4hog-pwb83h
I hope the provided information sheds some light on the matter. Please, let me know if I am missing out on something.
Regards,Georgi
Progress Telerik