Drag and Drop Grid Row

2 posts, 0 answers
  1. Simarjeet
    Simarjeet avatar
    2 posts
    Member since:
    Jul 2017

    Posted 09 Aug Link to this post

    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>

  2. Georgi
    Admin
    Georgi avatar
    171 posts

    Posted 11 Aug Link to this post

    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.
Back to Top