Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

[Solved] Trouble updating children through model

3 Answers 136 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Iron
Iron
John asked on 19 Jan 2017, 10:38 PM

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"
}

 

 

 

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 23 Jan 2017, 01:44 PM

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.
0
John
Top achievements
Rank 1
Iron
Iron
answered on 23 Jan 2017, 02:59 PM

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"
}

 

0
Accepted
Boyan Dimitrov
Telerik team
answered on 25 Jan 2017, 03:07 PM

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.
Tags
MVVM
Asked by
John
Top achievements
Rank 1
Iron
Iron
Answers by
Boyan Dimitrov
Telerik team
John
Top achievements
Rank 1
Iron
Iron
Share this question
or