I have applied the Drag and Drop feature my Grid, It is not working for left 2 columns in Chrome and left 3 columns in Edge means when i drag the row by choosing from left 2 columns or some times left 3 columns and try to drop it on other position of row, it will stop working. Here is my code:
<div id="example">
<div id="grid"></div>
</div>
<script>
$(document).ready(function () {
var data = [{
EID: 1,
MilestoneName: "Chai",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 18.0000,
UnitsInStock: 39,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 1
}, {
EID: 2,
MilestoneName: "Chang",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 19.0000,
UnitsInStock: 17,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 2
}, {
EID: 3,
MilestoneName: "Aniseed Syrup",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 10.0000,
UnitsInStock: 13,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 3
}, {
EID: 4,
MilestoneName: "Chef Anton's Cajun Seasoning",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete: "",
UnitPrice: 22.0000,
UnitsInStock: 53,
Discontinued: false,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 4
}, {
EID: 5,
MilestoneName: "Chef Anton's Gumbo Mix",
MilestoneStart: "",
MilestoneNCD: "",
MilestoneComplete:"",
UnitPrice: 21.3500,
UnitsInStock: 0,
Discontinued: true,
PercComplete: "",
WorkPackagesOpen: "",
PlanTasksCount: "",
Position: 5
}];
var data = data;
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "EID",
fields: {
EID: { type: "number" },
MilestoneName: { type: "string" },
MilestoneStart: { type: "date" },
MilestoneNCD: { type: "date" },
MilestoneRNCD: { type: "date" },
MilestoneComplete: { type: "date" },
MilestoneResp: { type: "string" },
MilestoneDelay: { type: "string" },
PlanTasksCount: { type: "string" },
WorkPackagesOpen: { type: "string" },
PercComplete: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
selectable: "single row",
dataBound: onDataBound,
columns: [
{ field: "EID", title: "EID", width: "50px", },
{ field: "MilestoneName", title: "Milestones", width: "320px" },
{ field: "MilestoneStart", title: "Start Date", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneNCD", title: "NCD", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneRNCD", title: "RNCD", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneComplete", title: "Complete Date", format: "{0:MM/dd/yyyy}", width: "90px" },
{ field: "MilestoneResp", title: "Milestone Resp", width: "150px"},
{ field: "MilestoneDelay", title: "Milestone Delay", width: "150px" },
{ field: "WorkPackagesOpen", title: "Milestone Delay", width: "150px" },
{ field: "PercComplete", title: "Milestone Delay", width: "150px"},
{ field: "Position", title: "Position", width: "30px" },
]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div id="DragRow" class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
},
drag: function (e) {
var grid = $("#grid").data("kendoGrid"),
dataSource = grid.dataSource;
var guid = grid.table.find("tr data-uid");
var target = dataSource.getByUid($(e.currentTarget).data("uid"));
if (target.MilestoneRow <= 5 || target.MilestoneRow >= 100) {
$("#DragRow").html('');
return;
}
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var grid = $(e.sender.element).closest('.k-grid').getKendoGrid(),
dataSource = grid.dataSource;
target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));
if (target == undefined || dest == undefined) {
return false;
}
if (target.MilestoneRow <= 5 || target.MilestoneRow >= 100 || dest.MilestoneRow <= 5 || dest.MilestoneRow >= 100) {
return;
}
//not on same item
if (target.get("uid") !== dest.get("uid")) {
//reorder the items
var tmp = target.get("Position");
target.set("Position", dest.get("Position"));
dest.set("Position", tmp);
dataSource.sort({ field: "Position", dir: "asc" });
}
}
});
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var gridData = grid.dataSource.view();
$("#grid tr.k-alt").removeClass("k-alt");
for (var i = 0; i < gridData.length; i++) {
if (gridData[i].MilestoneRow <= 5 || gridData[i].MilestoneRow >= 100) {
grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("backgroundColor");
}
}
}
function getSelectedMilestone() {
var grid = $("#grid").data("kendoGrid");
return grid.dataItem(grid.select());
}
</script>
1 Answer, 1 is accepted
For sorting the Kendo Grid with drag and drop I suggest you to use Kendo Sortable since it is designed to sort a group of DOM elements using drag and drop.
I have modified the provided code to use Kendo Sortable, please give it a try and let me know if it works for you:
Regards,
Georgi
Progress Telerik