Drag and drop between two kendo grids

Question

Drag and drop between two grids

Problem with saving

<div id="gridexample1" style="width:800px">
<div id="grid1"></div>
<div id="gridexample2" style="width:800px">
<div id="grid2"></div>

 $(document).ready(function () {
    var dataSource1 = new kendo.data.DataSource({
        data: [
            { "ID": 1, "Name": "Roosetty" },
            { "ID": 2, "Name": "timcook" },
            { "ID": 3, "Name": "Sam" },
        ],
        pageSize: 5
    });

    var dataSource2 = new kendo.data.DataSource({
        data: [
            { "ID": 4, "Name": "steve" },
            { "ID": 5, "Name": "mark" },
            { "ID": 6, "Name": "satya" },
        ],
        pageSize: 5
    });


    var grid1 = $("#grid1").kendoGrid({
        dataSource: dataSource1,
        columns: [
            { field: "ID" },
            { field: "Name" }
        ],
        detailInit: detailInit,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },

    }).data("kendoGrid");


    function detailInit(e) {
     var childGrid = $("<div id='child'/>").appendTo(e.detailCell).kendoGrid({
            dataSource: dataSource2,
            columns: [
                { field: "ID", width: "110px" },
                { field: "Name", title: "Name", width: "110px" },

            ]
     }).data("kendoGrid");

    }

    var grid2 = $("#grid2").kendoGrid({
        dataSource: dataSource2,
        columns: [
            { field: "ID" },
            { field: "Name" }
        ]
    }).data("kendoGrid");


    $("tr", "#child").kendoDraggable({
        hint: function (e) {
            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",

    });


    $("tr", grid2.tbody).kendoDraggable({
        hint: function (e) {
            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",

    });

    $("#child").getKendoGrid().table.kendoDropTarget({
        drop: function (e) {

            e.dropTarget.append($(e.draggable.currentTarget).clone());

        },
        group: "gridGroup2",

    });



    grid2.table.kendoDropTarget({//2
        drop: function (e) {
            e.dropTarget.append($(e.draggable.currentTarget).clone());

        },
        group: "gridGroup1",

    });

});

Requirement
When I drag a row from grid1 and drop it inside a child grid it works perfectly, but the record which I dropped into the child grid is not added to the child grid data source.

How to add this dropped row to child grid data source.

Note finally I should be able to save the entire grid with the added records.

Answer 1

After each instance of

e.dropTarget.append($(e.draggable.currentTarget).clone())

add this next line

$(e.draggable.currentTarget).remove();

to remove the appended name from the original list. What do you mean by saving? Do you want to send the data, in order, via a form?

Answer 2

You should add your dropped items data into the child's grid datasource.

$("#child").kendoDropTarget({
    drop: function (e) {
        if (e.draggable.element[0].tagName == "TABLE") {
            var dsource = $("#child").data("kendoGrid").dataSource;
            dsource.add({
                ID: $(e.draggable.hint).find("tr").text().trim(),
                Name : $(e.draggable.hint).find("tr").text().trim()
            });
        }
        $(e.draggable).remove();
    }
});