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

8 posts, 0 answers
  1. Lily
    Lily avatar
    6 posts
    Member since:
    Aug 2015

    Posted 15 Feb Link to this post

    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?

  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 16 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Lily
    Lily avatar
    6 posts
    Member since:
    Aug 2015

    Posted 16 Feb in reply to Rosen Link to this post

    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>




  5. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 17 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Lily
    Lily avatar
    6 posts
    Member since:
    Aug 2015

    Posted 17 Feb in reply to Rosen Link to this post

    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.

  7. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 18 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Lily
    Lily avatar
    6 posts
    Member since:
    Aug 2015

    Posted 18 Feb in reply to Rosen Link to this post

    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.

  9. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 22 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready