set() not working on DataSource item in version 2016.1 112

[Lily]

I have a grid with remote datasorce. An I had jquery function called on specific event, which changed the grid data :

 function approve(e) {
            var grid = $("#grid").data("kendoGrid");
            var tr = $(this).parents("tr");
            var dataItem = grid.dataItem(tr);
            if (dataItem != null) {
                    dataItem.set("Approved", true);
                    dataItem.set("ApprovalDate", new Date());
                }
        }

This function worked and updated the datasource and the data in the grid. After we upgraded to the version 2016.1 12, the code stopped working. I found the alternative which is working:

 

function approve(e) {
            var grid = $("#grid").data("kendoGrid");
            var tr = $(this).parents("tr");
            var dataItem = grid.dataItem(tr);
            if (dataItem != null) {
                    dataItem.Approved = true;
                    dataItem.ApprovalDate = new Date();
                 
                }
            }
            grid.refresh();
        }

Why the old approach is not working anymore? It is a huge problem for us, because a lot of old code is broken. What is the correct way to update data in the grid programmatically?

[Rosen]

Hello Lily,

 

The use of set method of ObvervableObject is one of the core fundamentals of library's editing functionality, thus the approach shown in the snippet should work as expected and it is the suggested way for changing model's state. Could you please provide a basic dojo which to demonstrate the issue you are facing. This will allow us to further investigate the issue and provide you with more detailed answer.

 

Regards,
Rosen
Telerik

 

 

[Lily]

This is the code: <div id="grid"></div>
    <script type="text/javascript">
        

        
       
        $(document).ready(function () {
            var model = kendo.data.Model.define({
                id: "DocId",
                fields: {
                    DocId: { type: "number" },
                    Approved: { type: "boolean", editable: false },
                    ApprovalDate: { type: "datetime", editable: false }

                }

            });
            var datasource = new kendo.data.DataSource({

               
                batch: true,

                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: model
                }
            });
            var array = [
                { "DocId": 1, "Approved": false, "ApprovalDate": null },
                { "DocId": 2, "Approved": false, "ApprovalDate": null },
                { "DocId": 3, "Approved": false, "ApprovalDate": null }
            ];
            datasource.data(array);

            $("#grid").kendoGrid({
                scrollable: true,
                sortable: false,
                filterable: false,
                pageable: false,
                //editable: false,
                batch: true,
                dataSource: datasource,
                dataBound: onDataBound,
                columns: [
                    {
                        field: "Approved", title: "Approved",
                        template: "<input class='chck_app' type='checkbox' #= Approved ? checked='checked' : '' #/>"
                    },
                    {
                        field: "ApprovalDate", title: "Approval Date", 
                        template: "#= ApprovalDate ? kendo.toString(kendo.parseDate(ApprovalDate), 'MM/dd/yyyy') : '' #"
                
                    }
                ]
            });
        });
        function approve(e) {
            var grid = $("#grid").data("kendoGrid");
            var tr = $(this).parents("tr");
            var dataItem = grid.dataItem(tr);
            if (dataItem != null) {
                if (this.checked) {
                    //dataItem.Approved = true;
                    //dataItem.ApprovalDate = new Date();
                    //grid.refresh();
                    
                   
                    dataItem.set("Approved", true);
                    dataItem.set("ApprovalDate", new Date());
                    
                }
                else {
                    //dataItem.Approved = false;
                    //dataItem.ApprovalDate = null;
                    //grid.refresh();
                    
                    
                    dataItem.set("Approved", false);
                    dataItem.set("ApprovalDate", null);
                }

                
            }
            
        }

        
       
        function onDataBound(e) {
            
            $(".chck_app").click(approve);
           
        }


    </script>

[Rosen]

Hello Lily,

Indeed, setting values to non-editable (editable=false) properties should not work, as this is the actual purpose for this option. This behavior is true from the early versions of Kendo UI. I'm not sure how it had worked for you with previous version of the library. Also could you specify from which version you are upgrading.

Regards,
Rosen
Telerik

 

 

[Lily]

The older version was two versions ago.
Essentially this is our issue.

We need a column on the grid to be disabled to user input however, the values should be able to be updated using JavaScript (the field is a date time of when a user clicked something, we don’t want the user to be able to change that date for security reasons.)

This has worked in the earlier version however, after upgrading; we can no longer update the values with the script that had worked before.

Anyway there is the way around ( in my code it is commented out, it is working, but it is not documented in Telerik documentation and we are not sure that it is correct and would not stop working in next release.

Calculated fields in a grid is very common use case.

[Rosen]

Hello Lily,

In order to have field not editable in the Grid and editable via code, you could not set the field option to the column configuration. This will make a non-editable template column. Then the set method can be used to set the value. Here is a modified version of the sample you have provided. Note that I have made the fields editable.

Regards,
Rosen
Telerik

 

 

[Lily]

Thank you. I understand the solution. Is it documented anywhere? In most forums with similar question they suggest to set non-editable field in model. Here for example : http://www.telerik.com/forums/how-to-make-a-non-editable-column-field

But there are many forum threads like that, the question how to make field not-editable is asked pretty often. My code is old and it definitely worked with previous release.

[Rosen]

Hello Lily,

 

There are multiple ways to achieve the behavior you have described. The forum post you have referenced also contains applicable implementations.

 

Regards,
Rosen
Telerik