kendo-ui - 取消内联 Kendo 网格中的更新删除行

Question

我正在使用两个 Kendo 内联网格父级和子级。子网格包含产品列表，当用户从子网格中选择产品(多项选择)并单击保存按钮时，它会插入到父网格中。

子网格:

var selectedIds = {};

var ctlGrid = $("#KendoWebDataGrid3");
ctlGrid.kendoGrid({
    dataSource: {
        data:data1,
        schema: {
            model: {
                id: 'id',
                fields: {
                    select: {
                        type: "string",
                        editable: false
                    },

                    Qty: {
                        editable: true,
                        type: "number",
                        validation: { min: 1, required: true }
                    },
                    Unit: {
                         editable: false,
                         type: "string"
                    },
                    StyleNumber: {
                         editable: false,
                        type: "string"
                    },
                    Description: {
                         editable: false,
                        type: "string"
                    }


                }
            }
        },
        pageSize: 5
    },
    editable: 'inline',
    selectable: "multiple",
    sortable: {
        mode: 'single',
        allowUnsort: false
    },
    pageable: true,
    columns: [{
        field: "select",
        title: " ",
        template: '<input type=\'checkbox\' />',
        sortable: false,
        width: 35},
    {

        title: 'Qty',
        field: "Qty",
        width:90},
    {
        field: 'Unit',
        title: 'Unit',
        width: 80},
    {
        field: 'StyleNumber',
         title: 'Style Number',
        },
    {
        field: 'Description',
        width: 230},

   {command: [<!---{text:"Select" ,class : "k-button",click: selectProduct},--->"edit" ], title: "Command", width: 100 }

   ],
    dataBound: function() {
        var grid = this;            
        //handle checkbox change
        grid.table.find("tr").find("td:first input")        
            .change(function(e) {                  
                var checkbox = $(this);     
                var selected = grid.table.find("tr").find("td:first input:checked").closest("tr");

                grid.clearSelection();      

                //persist selection per page
                var ids = selectedIds[grid.dataSource.page()] = [];

                if (selected.length) {
                    grid.select(selected);
                    selected.each(function(idx, item) {
                        ids.push($(item).data("id"));
                    });                    
                } 

            })
            .end()
            .mousedown(function(e) {
                e.stopPropagation();
            })

        //select persisted rows
        var selected = $();
        var ids = selectedIds[grid.dataSource.page()] || [];

        for (var idx = 0, length = ids.length; idx < length; idx++) {
            selected = selected.add(grid.table.find("tr[data-id=" + ids[idx] + "]")                   );
        }

        selected
            .find("td:first input")
            .attr("checked", true)
            .trigger("change");


    }
});

var grid = ctlGrid.data("kendoGrid");

grid.thead.find("th:first")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function() {
        var checkbox = $(this);            

        grid.table.find("tr")
            .find("td:first input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });

保存按钮点击事件

        function selectProduct()
    {

        //Selecting child Grid
        var gview = $("#KendoWebDataGrid3").data("kendoGrid");
        //Getting selected rows
        var rows = gview.select();

            //Selecting parent Grid
        var parentdatasource=$("#grid11").data("kendoGrid").dataSource;                         
        var parentData=parentdatasource.data();


            //Iterate through all selected rows
            rows.each(function (index, row) 
            {
                var selectedItem = gview.dataItem(row);
                var selItemJson={id: ''+selectedItem.id+'', Qty:''+selectedItem.Qty+'',Unit:''+selectedItem.Unit+'',StyleNumber:''+selectedItem.StyleNumber+'',Description:''+selectedItem.Description+''};


                //parentdatasource.insert(selItemJson);
            var productsGrid = $('#grid11').data('kendoGrid');
            var dataSource = productsGrid.dataSource;
            dataSource.add(selItemJson);
            dataSource.sync();



            });

        closeWindow();

    }

父网格:

 var data1=[];
    $("#grid11").kendoGrid({
            dataSource: {
                data:data1,

            schema: {
                    model: { id: "id" ,
                        fields: {

                                    Qty: { validation: { required: true } },
                                    Unit: { validation: { required: true } },
                                    StyleNumber: { validation: { required: true } },
                                    Description: { validation: { required: true } }
                                }
                          }
                     },
            pageSize: 5
        },
        pageable: true,
        height: 260,
        sortable: true,
        toolbar: [{name:"create",text:"Add"}],
        editable: "inline",
        columns: [

              {field: "Qty"},
              {field: "Unit"},
              {field: "StyleNumber"},
              {field: "Description"},
              { command: ["edit", "destroy"], title: " ", width: "172px" }]

    });
    $('#grid11').data().kendoGrid.bind("change", function(e) {
      $('#grid11').data().kendoGrid.refresh();
    });
    $('#grid11').data().kendoGrid.bind('edit',function(e){

      if(e.model.isNew()){
           e.container.find('.k-grid-update').click(function(){
              $('#grid11').data().kendoGrid.refresh();

           }),
           e.container.find('.k-grid-cancel').click(function(){
               $('#grid11').data().kendoGrid.refresh();

           })

        }

 })

将数据添加到父网格工作得很好，没有问题，但是当我选择父网格添加新行进行编辑然后触发取消按钮行被删除。

我无法找出问题所在。请帮助我。

Answer 1

我发现错误了，希望能帮到你。

如果您没有配置dataSource: schema: model的“id”字段，则在更新之前点击另一行中的编辑或点击取消时，会删除该行。

var dataSource = new kendo.data.DataSource({
        ...
        schema: {
            model: {
                id:"id", // Look here, if you did not config it, issue will happen
                fields: {...
                       ...}
            }
        }   

       ...
})