Grid - drag and drop rows with drag handle

[Cédric]

Hello,

I'm currently working on displaying a list of items as a table. The user should be able to reorder the list using a drag handle in one of the cells. It should also be able to filter items, though reordering will only be enabled if no filter is applied.

I was trying to implement this using a Kendo Data Grid and the cdk drag and drop module. This didn't work very well together.

I also looked into the new Kendo Drag and Drop Utility, but this doesn't seem to be intended for reordering elements within a collection in the same way cdk is with cdkDropList.

Is there a way to do this using a grid?

I've found other posts about this topic:

• Drag & Drop Cell in Grid
• kendo-grid and material cdk drag/drop

They are already 2+ years old though so I was wondering if there are any developments regarding this functionality.

Thanks!

[Slavena]

Hello Cédric,

Indeed, we have planned extending our Drag and Drop API in order to allow performing drag and drop operations with data-bound components. We will do our best to provide the integration of the enhancement with the Grid component in particular with the R1 release planned for 18.01.2023.

https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap 

In the mean time, as an alternative I would suggest referring to the following Knowledge Base article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/row-reordering/

The approach demonstrated in the article is based on the HTML Drag And Drop API and includes additional custom logic. Feel free to use the article as a staring point and further customize it depending on the specific project requirements.

I hope this helps.

Regards,
Slavena
Progress Telerik