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: "&nbsp;",
        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: "&nbsp;", 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.

[http://stackoverflow.com/a/26816692/3186681] this SO Answer may be helpful — ManirajSS, Nov 08 '14 at 15:24
Had the same problem. Had it solved here: http://stackoverflow.com/a/33762433/1932499 — alessalessio, Nov 17 '15 at 17:19

score 9 · Answer 1 · edited Sep 06 '13 at 05:12

9

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

       ...
})

edited Sep 06 '13 at 05:12

Thirumalai murugan

5,698
8
32
54

answered Sep 06 '13 at 04:45

Osric Xie

151
3
6

1

For those who google'd there way here, this is likely the solution to your problem. – Jefftopia Mar 17 '15 at 20:33
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. – Ursula Apr 30 '19 at 09:56

score 6 · Answer 2 · answered Sep 06 '13 at 04:02

6

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.

answered Sep 06 '13 at 04:02

Osric Xie

151
3
6

It does not delete the entry, but it doesn't revert the changes as well. So not much of use. – demesne Oct 20 '14 at 16:34
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? – Devanathan.S Sep 01 '17 at 10:40

score 1 · Answer 3 · answered Dec 02 '14 at 13:03

1

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

that cancels the edit row and reads any changes.

answered Dec 02 '14 at 13:03

user2983931

304
5
17

score 0 · Answer 4 · answered Jan 06 '15 at 19:45

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

score 0 · Answer 5 · edited Jun 10 '16 at 16:29

0

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.

edited Jun 10 '16 at 16:29

Gustavo Morales

2,614
9
29
37

answered Jun 10 '16 at 15:13

Amit Jog

111
1
4
9

Cancel the update in inline kendo grid delete the row

5 Answers5

Linked