kendo-grid and material cdk drag/drop

[Thomas]

Is it possible to use material cdk to drag and drop rows within a kendo-grid?  How would cdkDrag directive be applied to the rows?

[Dimiter Topalov]

Hi Thomas,

As the CDK Drag and Drop API seems to rely on directives, applied to the DOM elements that will be draggable and for the dropzones, this approach is inapplicable to the Grid, as it has its own complex rendering logic, and the developer does not have access to the DOM elements that are dynamically generated, based on the Grid configuration and data.

In theory, a Grid cell template could be used to provide an element with the  cdkDrag directive, e.g.: <div cdkDrag cdkDragRootElement="tr"...

However, I could not find a suitable place for the cdkDropList directive so that the reordering can work, and the event, required for modifying the Grid data to reflect the current items order, is not fired, e.g.:

https://stackblitz.com/edit/angular-cqbe6b-tqhs7y?file=app/app.component.ts

This is why the CDK Drag and Drop API cannot be used to reorder Grid rows.

If we find a reliable way to integrate the Drag and Drop API in our Grid component, we will share all relevant information, but currently this integration is not supported.

Thank you for the understanding.

You can also take a look at the following online demo showing a sample approach for reordering the Grid rows:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/row-reordering/

Regards,
Dimiter Topalov
Progress Telerik

[Pooja]

Hello Team,

We have similar requirement where we want to use the cdk drag to drag the elements and drop it over kendo-scheduler(Angular).

Is there any development on this?