Drag and Drop Rows between Grids
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | Windows 10 64bit |
Preferred Language | JavaScript |
Description
How can I drag and drop rows between two Kendo UI Grids for jQuery?
Solution
In order to achieve the requirement, you can utilize the Kendo Draggable and the Kendo DropTarget components. Here you will find a small summary of the example below:
- Create
Kendo Draggable
components from the samediv
elements which are used to create the two Grids. Make sure to configure the group option. - Select the wrapper elements of the Grids in order to create a
Kendo DropTarget
. Configuring the group here as well will let theDropTarget
component know that there's aDraggable
component with the same group. That will allow theDropTarget
to accept items which are being dragged from theDraggable
instance. - In the drop event, you can use the DataSource API to remove the dropped item from one dataSource and add it in the other.
The following example demonstrates how to drag and drop rows between two Kendo UI Grids.
<div id="grid1"></div>
<br /><br /><br />
<div id="grid2"></div>
<script>
$(document).ready(function () {
var dataSource1 = new kendo.data.DataSource({
data: [
{ "ID": 1, "Name": "James" },
{ "ID": 2, "Name": "John" },
{ "ID": 3, "Name": "Jane" },
],
pageSize: 5
});
var dataSource2 = new kendo.data.DataSource({
data: [
{ "ID": 4, "Name": "Alex" },
{ "ID": 5, "Name": "Allen" },
{ "ID": 6, "Name": "Anton" },
],
pageSize: 5
});
var grid1 = $("#grid1").kendoGrid({
dataSource: dataSource1,
columns: [
{ field: "ID" },
{ field: "Name" }
]
}).data("kendoGrid");
var grid2 = $("#grid2").kendoGrid({
dataSource: dataSource2,
columns: [
{ field: "ID" },
{ field: "Name" }
]
}).data("kendoGrid");
$(grid1.element).kendoDraggable({
filter: "tbody>tr",
hint: function (e) {
var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;
},
group: "gridGroup1",
});
$(grid2.element).kendoDraggable({
filter: "tbody>tr",
hint: function (e) {
var item = $('<div class="k-grid k-widget" style="background-color: MediumVioletRed; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;
},
group: "gridGroup2",
});
grid1.wrapper.kendoDropTarget({
drop: function (e) {
var dataItem = dataSource2.getByUid(e.draggable.currentTarget.data("uid"));
dataSource2.remove(dataItem);
dataSource1.add(dataItem);
},
group: "gridGroup2",
});
grid2.wrapper.kendoDropTarget({
drop: function (e) {
var dataItem = dataSource1.getByUid(e.draggable.currentTarget.data("uid"));
dataSource1.remove(dataItem);
dataSource2.add(dataItem);
},
group: "gridGroup1",
});
});
</script>