Cancel the update in inline kendo grid delete the row

Question

I am using two kendo inline grid parent and child. child grid contains the list of products,when user select the products(multiple selection) from child grid and clicked to save button,it's inserted into an parent grid.

Child grid:

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

save button clicked Event

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

    }

Parent Grid:

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

           })

        }

 })

Adding data into parent grid work nicely,no issue,but when i select the parent grid add new row to edit then trigger the cancel button row was deleted.

I am not able to figure out the problem.please help me.

Answer 1

I found the error, hope can help you.

If you did not config the dataSource: schema: model's "id" field, when click edit in another row before update or click cancel, it will delete the row.

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

       ...
})

Answer 2

I have the same issue, and I config cancel like :

...
cancel: function(e) {
           this.refresh();
      },
...

I don't think it's the best way, but it's working.

Hope another people can give us a better way.

Answer 3

after saving I call $('#grid').data('kendoGrid').dataSource.read();

that cancels the edit row and reads any changes.

Answer 4

Still doesn't seem to be fixed. I'm addressing it with 'preventDefault()'. This may require explicit closing of window as a consequence.

    cancel: function (e) {
        // Not sure why this is needed but otherwise removes row...
        e.preventDefault();
        e.container.data("kendoWindow").close();
    },

Answer 5

schema: {
    model: { id: "StyleNumber" // "Any ID Field from the Fields list" ,
        fields: {

            Qty: { validation: { required: true } },
            Unit: { validation: { required: true } },
            StyleNumber: { validation: { required: true } },
            Description: { validation: { required: true } }
        }
    }
}

This will solve your problem.