Trouble updating children through model

4 posts, 1 answers
  1. John
    John avatar
    22 posts
    Member since:
    Aug 2014

    Posted 19 Jan Link to this post

    Attached are the two simple files that demonstrate the problem. I'm trying to load a simple JSON file and then update the data through the model. The trouble is, while the field value is changing in the model, the screen never gets updated unless I change the root of the tree. Any assistance is appreciated.

    <!DOCTYPE html>
    <head>
    <title>MVVM Demo 2</title>
        <link href="/styles/kendo.common.min.css" rel="stylesheet">
        <link href="/styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="/styles/kendo.default.min.css" rel="stylesheet">
        <link href="/styles/kendo.default.mobile.min.css" rel="stylesheet">
        <script src="/js/jquery.min.js"></script>
        <script src="/js/jszip.min.js"></script>
        <script src="/js/kendo.all.min.js"></script>
    <style type="text/css">
    th {
    width: 135px;
            }
    </style>
    </head>
    <body>
    <script>
     
    var elementMapping = new Map();
     
    </script>
         
     
        <div id="example"
            data-role="treeview"
            data-bind="source: root"
            data-text-field="_name">
                
     
     
        </div>
    <button type="button" data-bind="click: updateSomething" >Update</button>
     
     
             
    <script>
    var inputJSON="";
     
    const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
     
    $.ajax({
        url: "this.json",
        dataType: "json",
        cache: false,
        success: function(data) {
            inputJSON = data;
     
         
                     
            var topSchema = {
                model: {   
                    id:"_secnum",
                    children: "section",
                    hasChildren: (e)=> e.section
                     
                     
                }
            };
         
            var oh = kendo.observableHierarchy(
            {
                data:   [inputJSON],
                schema: topSchema
             
            });
            var viewModel = kendo.observable({
                root: oh,
                updateSomething: function(){
                    var r = this.get("root");
                    var g = elementMapping[4];
                     
                    g.set("_name", "test this thing");
                     
                }
            });
             
            var rec = function(r){
                elementMapping[r.id]=r;
                r.items.forEach(h=>rec(h));
            }
            viewModel.root._dataSource.data().forEach(e=>rec(e));
             
             
             
            kendo.bind($("body"), viewModel);          
          
         
             
             
        }
    });
         
    </script>
     
     
     
    </body>
    </html>

     

    {
        "_template": "Electronic Procedures Template",
        "_revision": "1.4.0",
        "section": [
            {
                "_name": "Cover Page",
                "_secnum": "",
                "rititle1": [ ],
                "rinumber1": [ ],
                "rititle2": [ ],
                "rinumber2": [ ]
            },
            {
                "_name": "Purpose",
                "_secnum": "1",
                "_sectype": "text"
            },
            {
                "_name": "Scope",
                "_secnum": "2",
                "_sectype": "text",
                "section": [
                    {
                        "_name": "Responsibilities",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Background",
                        "_secnum": "2",
                        "_sectype": "text"
                    }
                ]
            },
            {
                "_name": "Precautions & Limitations",
                "_secnum": "3",
                "_sectype": "text"
            },
            {
                "_name": "Prerequisite Actions",
                "_secnum": "4",
                "section": [
                    {
                        "_name": "Radiological Concerns",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Employee Safety",
                        "_secnum": "2",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Special Tools and Equipment, Parts, and Supplies",
                        "_secnum": "3",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Approvals & Notifications",
                        "_secnum": "4",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "9",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    },
                    {
                        "_name": "Preliminary Actions",
                        "_secnum": "5",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "10",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    },
                    {
                        "_name": "Field Preparations",
                        "_secnum": "6",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "11",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    }
                ]
            },
            {
                "_name": "Performance",
                "_secnum": "5",
                "_sectype": "multiple"
            },
            {
                "_name": "References",
                "_secnum": "6",
                "section": [
                    {
                        "_name": "Performance References",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Source Requirements",
                        "_secnum": "2",
                        "_sectype": "text"
                    }
                ]
            },
            {
                "_name": "Records",
                "_secnum": "7",
                "_sectype": "text"
            },
            {
                "_name": "Attachments",
                "_secnum": "8",
                "_sectype": "text"
            },
            {
                "_name": "Monitor Response 1",
                "_secnum": "11",
                "_sectype": "monitortable"
            }
        ],
        "hashcode": "e388152e636cf0a2779c2da2dca7a534"
    }

     

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1864 posts

    Posted 23 Jan Link to this post

    Hello John,

    As far as I understand you are creating a new Map and copy the data from the TreeView data source to that Map. In order to apply the change to the UI of the TreeView the data item from the TreeView's DataSource should be modified using the set method. Currently the item in the Map is modified, but the TreeView does not listen to any changes in the Map, it listen to any changes in its DataSource. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    22 posts
    Member since:
    Aug 2014

    Posted 23 Jan in reply to Boyan Dimitrov Link to this post

    The Map contains a reference, not a copy. I can update the first level using this, but not the second, third, etc.

     

    I modified the example to show this. One button updates the root and the other an item under it.

     

    <!DOCTYPE html>
    <head>
    <title>MVVM Demo 2</title>
        <link href="/styles/kendo.common.min.css" rel="stylesheet">
        <link href="/styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="/styles/kendo.default.min.css" rel="stylesheet">
        <link href="/styles/kendo.default.mobile.min.css" rel="stylesheet">
        <script src="/js/jquery.min.js"></script>
        <script src="/js/jszip.min.js"></script>
        <script src="/js/kendo.all.min.js"></script>
    <style type="text/css">
    th {
    width: 135px;
            }
    </style>
    </head>
    <body>
        
        <div id="example"
            data-role="treeview"
            data-bind="source: root"
            data-text-field="_name">
               
        </div>
        <button type="button" data-bind="click: updateSomething" >Update</button>
        <button type="button" data-bind="click: updateSomethingToo" >Update it too</button>
            
    <script>
    var inputJSON="";
    var elementMapping = new Map();
    $.ajax({
        url: "this.json",
        dataType: "json",
        cache: false,
        success: function(data) {
            inputJSON = data;
        
                    
            var topSchema = {
                model: {   
                    id:"_secnum",
                    children: "section",
                    hasChildren: (e)=> e.section
                    
                    
                }
            };
        
            var oh = kendo.observableHierarchy(
            {
                data:   [inputJSON],
                schema: topSchema
            
            });
            var viewModel = kendo.observable({
                root: oh,
                updateSomething: function(){
                    var r = this.get("root");
                    var g = elementMapping[1];
                    
                    g.set("_name", "test this thing");
                },
                updateSomethingToo: function(){
                    var r = this.get("root");
                    var g = elementMapping[-1];
                    
                    g.set("_name", "test this thing too");
                }
            });
            var rec = function(r){
                elementMapping[r.id]=r;
                r.items.forEach(h=>rec(h));
            }
        
            viewModel.root._dataSource.data().forEach(e=>rec(e));
            
            
            
            kendo.bind($("body"), viewModel);          
         
        
            
            
        }
    });
        
    </script>
    </body>
    </html>

     

     

     

    {
        "_template": "Electronic Procedures Template",
        "_revision": "1.4.0",
        "_secnum": "-1",
        "section": [
            {
                "_name": "Cover Page",
                "_secnum": "",
                "rititle1": [ ],
                "rinumber1": [ ],
                "rititle2": [ ],
                "rinumber2": [ ]
            },
            {
                "_name": "Purpose",
                "_secnum": "1",
                "_sectype": "text"
            },
            {
                "_name": "Scope",
                "_secnum": "2",
                "_sectype": "text",
                "section": [
                    {
                        "_name": "Responsibilities",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Background",
                        "_secnum": "2",
                        "_sectype": "text"
                    }
                ]
            },
            {
                "_name": "Precautions & Limitations",
                "_secnum": "3",
                "_sectype": "text"
            },
            {
                "_name": "Prerequisite Actions",
                "_secnum": "4",
                "section": [
                    {
                        "_name": "Radiological Concerns",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Employee Safety",
                        "_secnum": "2",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Special Tools and Equipment, Parts, and Supplies",
                        "_secnum": "3",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Approvals & Notifications",
                        "_secnum": "4",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "9",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    },
                    {
                        "_name": "Preliminary Actions",
                        "_secnum": "5",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "10",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    },
                    {
                        "_name": "Field Preparations",
                        "_secnum": "6",
                        "_sectype": "single",
                        "procedure": {
                            "_seq": "11",
                            "_sid": "0",
                            "_refid": "",
                            "_pagetype": "Master",
                            "_procedurelevel": "1"
                        }
                    }
                ]
            },
            {
                "_name": "Performance",
                "_secnum": "5",
                "_sectype": "multiple"
            },
            {
                "_name": "References",
                "_secnum": "6",
                "section": [
                    {
                        "_name": "Performance References",
                        "_secnum": "1",
                        "_sectype": "text"
                    },
                    {
                        "_name": "Source Requirements",
                        "_secnum": "2",
                        "_sectype": "text"
                    }
                ]
            },
            {
                "_name": "Records",
                "_secnum": "7",
                "_sectype": "text"
            },
            {
                "_name": "Attachments",
                "_secnum": "8",
                "_sectype": "text"
            },
            {
                "_name": "Monitor Response 1",
                "_secnum": "11",
                "_sectype": "monitortable"
            }
        ],
        "hashcode": "e388152e636cf0a2779c2da2dca7a534"
    }

     

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1864 posts

    Posted 25 Jan Link to this post

    Hello John,

    Indeed the Map uses a reference so it is not the problem with the case. The issue here is that the kendo.observableHierarchy does work well with defining schema. It is designed to work with the default schema and it might cause unexpected behavior when a custom schema is defined. 

    I modified the example in order to remove the custom schema and change the code to achieve the same thing using the default schema. Please refer to the http://dojo.telerik.com/@gyoshev/ELuJo example. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top