Kendo UI: How to drag and drop multiple items from kendo ui grid to tree?

Question

I am using kendo ui grid and tree in a cshtml page and want to drag and drop multiple rows from the grid to the tree. I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.

Here are my code segments:

$("#grid").kendoGrid({
    selectable: "row",
    sortable: true,
    pageable: true,
    columns: .......

$("#treeview").kendoTreeView({
    dragAndDrop: true
});

And my kendoDraggable and kendoDropTarget events:

$("#grid").kendoDraggable({
    filter: "tr",
    hint: function () {
        var g = $("#grid").data("kendoGrid")
        return g.select().clone()
    }
});

$("#treeview").kendoDropTarget({
    drop: droptargetOnDrop
});

The above code segment works for dragging a single row from grid to the tree.

But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer get triggered.

$("#grid").kendoGrid({
    selectable: "multiple",
    sortable: true,
    pageable: true,
    columns: .......

Please let me know if I am doing anything wrong and any possible solution to this.

Answer 1

Multiple selection on the grid does not play nicely with drag and drop due to the fact that selectable events and drag events both fire with selectable events taking precedence.

To work around this, you can cancel the selectable event when dragging.

To do this, change your kendoDraggable config to include the following in your dragstart function:

dragstart: function (e) {
    $('#grid').data("kendoGrid").selectable.userEvents.cancel();
}