在两个剑道网格之间拖放 [英] Drag and drop between two kendo grids

问题描述

在两个网格之间拖放

保存问题

<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",

    });

});

要求
当我从grid1拖动一行并将其拖放到子网格中时，它可以正常工作，但是我放入子网格中的记录不会添加到子网格数据源中.

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.

推荐答案

您应该将放置的项目数据添加到子项的网格数据源中.

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();
    }
});

这篇关于在两个剑道网格之间拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！