Kendo Grid: Virtual Scroll + Drag And Drop

[Phillip]

Hello,

I am trying to use virtual scroll in a drag and drop UX flow where a user drags a label element from one grid over to another grid. However, we recently ran into performance issues on the grid that holds all the drag target labels due to a large number of records in the data bound to that grid. We want to use virtual scroll to solve the performance issue on the grid because pagination does not work as well for our use-case.

Unfortunately, adding scrollable='virtual' to the grid appears to add some position attribute to the grid that breaks the drag and drop functionality. The x and y coordinates passed in the DragTargetDragStartEvent do not match the coordinates of the cursor in the window and the drag target is now bound by its container. I haven't been able to determine a workaround that doesn't include manual DOM manipulation, which I'd like to avoid.

I also noticed that this issue is a known limitation in the jquery documentation: https://docs.telerik.com/kendo-ui/controls/grid/scrolling/virtual-scrolling#known-limitations

Are there any templates available for this use-case of virtual scroll and drag and drop utility on a kendo grid, or is this combination not supported?

Thank you in advance for any assistance

[Martin Bechev]

Hi Phillip,

Indeed yes, it is a limitation with the Kendo Angular Grid as well.

Generally speaking, both the built-in row reordering feature as well as its custom counterpart implemented with the use of the DragTargetDirective and DropTargetDirective can be very crucial in some applications but have some limitations when used together with virtual scrolling.

The two approaches for implementing row reordering require all data to be available, while the virtual scrolling dynamically replaces the page records with the next portion.

The alternative way to still use row reordering with large amounts of data is to use paging.

Regards,
Martin Bechev
Progress Telerik