Transfer Grid Rows by Using the Sortable
Environment
| Product | Progress® Kendo UI® Sortable for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I move a row from one Kendo UI Grid to another by dragging it from the first Grid to the second one and vice versa?
Solution
The following example demonstrates how to achieve the desired scenario. Reordering the rows within the same Grid in the same way is also supported.
<div id="grid1" style="width: 400px; float:left"></div>
<div id="grid2" style="width: 400px; float:left"></div>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<script>
$("#grid1").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 5
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }
],
dataBound: insertNoRecordsRow, // Required to handle the transfer row to an empty Grid scenario.
pageable: true
});
$("#grid2").kendoGrid({
dataSource: {
data: [],
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 5
},
dataBound: insertNoRecordsRow, // Required to handle the transfer row to an empty Grid scenario.
pageable: true,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }
]
});
var dataItem = null;
$(".k-grid table").kendoSortable({
connectWith: '.k-grid table',
filter: ">tbody >tr",
disabled: ".no-drag", // Do not allow the transferring of the no-records row.
hint: $.noop,
cursor: "move",
placeholder: function(element) {
return element.clone().addClass("k-hover").css("opacity", 0.65);
},
change: function(e) { // The change event handler implementation may differ according to the scenario.
var grid = this.element.closest(".k-grid").data("kendoGrid");
var skip = grid.dataSource.skip();
var oldIndex = e.oldIndex + skip;
var newIndex = e.newIndex + skip;
if (e.action == "remove") {
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
} else if (e.action == "receive" && dataItem != null) {
grid.dataSource.insert(newIndex, dataItem);
dataItem = null;
} else if (e.action == "sort") {
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
grid.saveChanges();
}
});
function insertNoRecordsRow() {
if (!this.dataSource.data().length) {
this.tbody.append($("<tr class='no-drag' colspan='2'><td>No records</td></tr>"));
}
}
</script>