Drag and Drop Items From the KendoReact Grid to the KendoReact Scheduler

Environment

Description

Looking for a drag and drop between KendoReact Grid and KendoReact Scheduler. I want to transfer items from the Grid to the Scheduler.

Solution

This will required the following setup:

1. Use the rowRender prop of the Grid to make the row draggable and to get the currently dragged item.
2. Then we need add a onDropEvent to the Scheduler container using the component ref.
3. When the user drops an item we add it to the Scheduler data updating the state.

Enabling the drag and drop on mobile devices

This can be achieved by using the KendoReact Drag&Drop utility with a custom DragHandleCell with touchAction set to none:

The native Drag & Drop API does not support touch events by default. It is possible to enable the drag and drop functionality on mobile devices by using a polyfill as well: