Question

在两个网格之间拖放

保存问题

<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拖动一行并将其放入子网格中时，它可以正常工作，但是我放入子网格的记录没有添加到子网格数据源。

如何将此删除的行添加到子网格数据源。

注意最后我应该可以使用添加的记录保存整个网格。

Answer 1

在

的每个实例之后

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

添加下一行

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

从原始列表中删除附加名称。储蓄是什么意思？您想通过表单按顺序发送数据吗？

Answer 2

您应该将已删除的项目数据添加到子网格数据源中。

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

在两个kendo网格之间拖放

2 个答案: