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.

Deluna

[https://mcmap.net/q/1043124/-kendo-grid-canceling-edit-deletes-new-row] this SO Answer may be helpful – Ogdon

Had the same problem. Had it solved here: https://mcmap.net/q/1043124/-kendo-grid-canceling-edit-deletes-new-row – Mateusz

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: {...
                       ...}
            }
        }   

       ...
})

Mammiemammiferous

For those who google'd there way here, this is likely the solution to your problem. – Froissart

I had similar problem in Kendo UI MVC even though "id" was configured but a target was subproperty and issue still happened, I had: .Model(model => {model.Id(p => p.Prop1.Id);}) and after change to: .Model(model => {model.Id(p => p.PropId);}) now it is working ok. Of course I needed to change the model. – Eminent

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.

Mammiemammiferous

It does not delete the entry, but it doesn't revert the changes as well. So not much of use. – Totality

i tried adding model: { id: "Id", fields: { something like this but did not worked. but the above solution is working.. not sure what will be the reason, any body? – Jeopardy

Answer 3

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

that cancels the edit row and reads any changes.

Tildy

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

Mead

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.

Cuman