This is a migrated thread and some comments may be shown as answers.

Drag and Drop Grid Row

1 Answer 253 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Simarjeet
Top achievements
Rank 1
Simarjeet asked on 09 Aug 2017, 08:22 PM

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

Sort by
0
Georgi
Telerik team
answered on 11 Aug 2017, 12:22 PM
Hi Simarjeet,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Simarjeet
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or