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.
7 Answers, 1 is accepted
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fady
Top achievements
Rank 1
answered on 03 Feb 2015, 08:56 AM
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.
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.
0
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:
Regards,
Alexander Valchev
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fady
Top achievements
Rank 1
answered on 17 Feb 2015, 11:13 AM
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:
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
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
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Erik
Top achievements
Rank 1
answered on 15 May 2015, 09:39 AM
Hi Fady,
Any progress on this issue?
I'm also struggling multi select grid and drag and drop.
BR
Erik
0
Azzlack
Top achievements
Rank 2
answered on 25 Sep 2015, 11:05 AM
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.