Update function in Kendo UI Grid (using with AngularJs) never fires, using with Local Data

[Ajay]

We are evaluating Kendo UI for one of our projects, but having some issues with Kendo UI Grid as described below :

I have a Kendo UI grid, which is bound to an KendoObservableArray. I am using inline edit mode. And my options are declared as below :

valueMapCtrl.lookupMappingDetails = new kendo.data.ObservableArray([]);

        valueMapCtrl.gridOptions = {
            dataSource: new kendo.data.DataSource({
                type: "json",
                transport: {
                    read: function (options) {
                        options.success(valueMapCtrl.lookupMappingDetails);
                    },
                    update: function (options) {
                        console.log("Update", options);
                        options.success(options.data);
                    },
                    create: function (options) {
                        console.log("Create", options);
                        options.data.mappingId = mappingId;
                        mappingId = mappingId + 1;
                        options.success(options.data);
                    },
                    destroy: function (options) {
                        console.log("Delete", options);
                        options.success(options.data);
                    }
                },
                change: function (e) {
                    console.log("change: " + e.action);
                    // do something with e
                },
                error: function (e) {
                    // handle error
                    alert("Status: " + e.status + "; Error message: " + e.errorThrown);
                },
                //data: valueMapCtrl.dynamicData,
                schema: {
                    model: {
                        id: "mappingId",
                        fields: {
                            mappingId: {editable: false, nullable: false, defaultValue: 0},
                            Col1: {
                                type: "string",
                                validation: {
                                    required: true
                                }
                            },
                            Col2: {
                                type: "string",
                                validation: {
                                    required: true
                                }
                            }
                        }
                    }
                },
                pageSize: 10,
                batch: false

            }),
            columns: [{
                field: "col1",
                title: "Column 1"
            }, {
                field: "col2",
                title: "Column 2"
            }, {
                command: /*"destroy"*/ ["edit", "destroy"],
                title: " ",
                width: "200px"
            }],
            selectable: "multiple cell",
            allowCopy: "true",
            //save: function (e) {
            //    console.log("Save", e);
            //},
            toolbar: ["create"],
            height: 300,
            navigatable: true,
            filterable: true,
            sortable: true,
            pageable: true,
            editable: "inline"
        };

Add record : create fires correctly
Delete record: destroy fires correctly
Update record : nothing happens, no error, all I see in change event sync() action.
But If I declare save as well in my options, that fires correctly.

save: function (e) {
            console.log("Save", e); //This fires on each update
        }
 I am not sure what is wrong in above declaration; browsed through a lot of forums/questions for similar issue but could not get it working. Any help ?

[Venelin]

Hello Ajay,

This online document explains in details how to manage the case where you want to bind the grid to local data arrays in Angular context: http://docs.telerik.com/kendo-ui/AngularJS/data-source. Note that, grid's data source is actually a different object from $scope.gridData. When the widget initializes it creates a DataSource object as a copy of the original object. Changing the original object has no effect on the grid.

Regards,
Venelin
Telerik

 

 

[Ajay]

Hi Venelin,

 

I have gone through the documentation, please read through my question. I am already using observable array. My issue is related to Tranport.Update not being fired at all.

 

Regards,

Ajay

[Venelin]

Hello Ajay,

Actually after trying to replicate the problem based on the code provided I noticed that the logic in 'create' might be the problem:

create: function (options) {
   console.log("Create", options);
   options.data.mappingId = mappingId; //'mappingId' is not defined in this scope
   mappingId = mappingId + 1;
   options.success(options.data);
},...

For the purpose of the example I have changed it to this:

create: function (options) {
 console.log("Create", options);
 options.data.mappingId = 1;
 options.success(options.data);
},

Now the update fires properly: http://dojo.telerik.com/@vpetrov/EzEvo/3

Regards,
Venelin
Telerik

 

 

[Ajay]

Hi Venelin,

Mapping Id variable is defined outside of the datasource and on create I could see its getting incremented correctly. In the example you gave, I just added some data in observable array for bootstrap. And now grid behaves differently, sometime update will fire and sometimes not. Check out the dojo, I have made the necessary changes. 

Second issue which I faced was, if I use observable array as data source in my GRID, Cancelling any edit was removing all rows from the GRID. When I switched to normal array with kendo data source, that issue was resolved.

[Ajay]

Link for updated example : 

http://dojo.telerik.com/irOYi

[Venelin]

Hello Ajay,

The only occasion under which update didn't fire, as I tested your code, was when a record is newly created and click on Update (create fired instead). In all other occasions clicking Update buttons fired update. What steps do you take in order to produce this behavior?

As for the second question, you can still use normal array unless you want to update the grid UI by updating the array from outside the grid. By the way I wasn't able to replicate the behavior with the deleted rows.

Regards,
Venelin
Telerik

 

 

[Ajay]

Hi Venelin,

Thanks for looking in to the issue. Please refer this link to see the second issue.

http://dojo.telerik.com/irOYi/4

 1. Click on Edit, and then Cancel the edit.

Regards,

Ajay Kaushik

 

 ​

[Ajay]

And for the first issue, here are the steps  :

 

1. Click on edit and then click on Cancel for the same row.

2. Cancel will not do anything, and after that even Update will not fire for that row.

If i do not click on cancel, and just change data and update, Update fires correctly, even for newly created rows.

Link for this example :

http://dojo.telerik.com/irOYi/5

Regards,

Ajay Kaushik

 

 

 

[Venelin]

Hi Ajay,

I have created another example based on your requirement, could you please check it out and see if it fits your needs: http://dojo.telerik.com/@vpetrov/oxEmE.

Regards,
Venelin
Telerik

 

 

[Ajay]

Thanks for the answer Venelin. I see you have also used normal array with data source ; and I was able to resolve the issue using the same approach (as mentioned in earlier posts). I think you should probably add some tips in the documentation, that when observableArray should be/NOT be used. Because clearly in this case, behavior with observable array was unpredictable.

Regards,

Ajay Kaushik

[Ajay]

Hey, one quick question though :

 How come your destroy command is not giving any Javascript alert box. Because, in my implementation I had to create a custom command column to remove that alert box and to display  a Kendo Modal Window confirmation instead.

Regards,

Ajay Kaushik

[Petyo]

Hello Ajay,

 

please check this forum thread.

Regards,
Petyo
Telerik