How to drag and drop multiple items from kendo ui grid to treeview?

[Fady]

I am using kendo ui grid and treeview in a cshtml page and want to drag and drop multiple rows from the grid to the treeview.

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 gets 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.

[Petyo]

Hello Fady,

the grid mutlirow selection overlaps with the draggable triggers - basically, both are triggered on drag, with the selection taking precedence. Given that, the two feature sets are not compatible - if the draggable worked, the selection would not work. 

Regards,
Petyo
Telerik

 

 

[Fady]

Hi Petyo,

Thanks for your reply.

The issue is, for multiple grid row selection, the draggable event is in fact getting triggered. It's only the kendoDropTarget (code provided in original post) event which is not getting triggered, hence we are not able to drop the selected rows on the TreeView.

Does the kendoDropTarget also clash with multirow selection?

Thanks.

[Alexander Valchev]

Hello Fady,

The Draggable and the DropTarget components listen on the same kind of events so both should be effected by the multiple selection.
You may try the following workaround - hook up to the dragstart event of the Draggable and cancel the Grid selectable event handlers:

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

Regards,
Alexander Valchev
Telerik

 

 

[Fady]

Hi,

I tried adding the dragstart code in my draggable event but on using this we can no longer drag the selected rows from the grid.

This is my draggable listener:

// event on dragging a row
$("#grid").data("kendoGrid").table.kendoDraggable({
    filter: "tbody tr .dragClass",
    hint: function () {
        var g = $("#grid").data("kendoGrid")
        return g.select().clone();
    },
    dragstart: function(e) {
         $("#grid").data("kendoGrid").selectable.userEvents.cancel();
    }
});

Where dragClass is class attibute of an icon in a column by which I am dragging a row in the grid.

Is there anything I am missing?

Thanks

[Alexander Valchev]

Hi Fady,

Is it possible for you to create a simple Kendo Dojo test page that demonstrates your exact scenario so I can examine it and assist you further?

Regards,
Alexander Valchev
Telerik

 

 

[Erik]

Hi Fady,

Any progress on this issue?

I'm also struggling multi select grid and drag and drop.

BR

Erik

[Azzlack]

I cannot get this to work either.

The select is still happening instead of dragging the rows.
Disable Selectable makes it work fine, but then only for one row.