This is a migrated thread and some comments may be shown as answers.

How to specify a schema for a data with 3 levels for a TreeView

7 Answers 482 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
leboart
Top achievements
Rank 1
leboart asked on 21 Mar 2013, 02:47 AM
I'm trying to represent a data with 3 level in a TreeView. The documentation about schema shows just one example with one level only. The data goes like this:
  components: kendo.observableHierarchy({
  data: [
            {
                label1: "label A", description: "this is label A", subcomponents: [
                    {labelI: "label AA", value: 1.4 },
                    {labelI: "label AB", value: 1.68 }
                ]
            },
            {
                label1: "label B", description: "this is label B",  subcomponents: [
                    {labelI: "label BA", value: 1.7},
                    {
                        labelI: "label BB", value: 2.8 , parts:[
                            {name:"part1"},
                            {name:"part2"}
                        ]
                    }
                ]
            }
 
        ],
    schema:{
        model
        {
            [?????]
        }
    }
});
I want to know how to specify the schema in this case. In the case of 2 levels is like this : schema:{model:{children:"subcomponents"}}, but the documentation doesn't help me to determinate how is in a general case. I declare the TreeView like this:

<div id="treeview-div"
     data-role="treeview"
     data-bind="source: components" 
     data-checkboxes="{checkChildren: true}"
     data-text-field="['label1','labelI','name']">
</div>
How should I specify schema in this case?

7 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 22 Mar 2013, 04:23 PM
Hello,

Basically the approach you took allow you to initialize only flat level of the TreeView like shown in the MVVM binding demo:

http://demos.kendoui.com/web/mvvm/widgets.html

However I tried something that is not documented and it seems to be working fine . However each level of the hierarchy needs to be homo-genius.

Take a look at the JsBin:

 http://jsbin.com/eretam/3/edit


Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
leboart
Top achievements
Rank 1
answered on 22 Mar 2013, 07:41 PM
Hi Petur,
Thanks for your answer. But that's  the whole point of my question, I have to use heterogeneous data, the items in the third level must be different from the rest. In the binding odata sevice example , It's a example of 3 levels, but my input for my treeview is a json file in the format of the that I showed before.

Is there a way to do this?.
0
Accepted
Petur Subev
Telerik team
answered on 26 Mar 2013, 10:54 AM
Hello again Leboart,

I am afraid the TreeView does not support binding to such structure like the one you shared.

Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Iron
answered on 19 Jan 2017, 06:10 PM

I have a multilevel hierarchy. This, unfortunately, works only at the first level. the data manipulation doesn't get executed on the children. Anything you can recommend?

$.ajax({
    url: "this.json",
    dataType: "json",
    cache: false,
    success: function(data) {
        inputJSON = data;
 
        var topSchema=  {
            data: function(e) {
                e.forEach(el=>{
                    el.expanded = true;
                    var items = new Array();
                     
                    if (el.section)
                        items = items.concat(el.section);
                    if (el.action)
                        items = items.concat(el.action);
                    if (el.paragraph)
                        items = items.concat(el.paragraph);
                    if (el.jumplist)
                        items = items.concat(el.jumplist);
                         
                    if (items) 
                        el.subItems = items;
                });
                return e;
            },
            model: {
                children: "subItems",
                hasChildren: (e)=> e.subItems
            }
        };
     
        var oh = kendo.observableHierarchy(
        {
            data:   [inputJSON],
            schema: topSchema
         
        });
        var viewModel = kendo.observable({
            root: oh
        });
        kendo.bind($("#example"), viewModel);          
      
     
         
         
    }
});

 

0
Veselin Tsvetanov
Telerik team
answered on 20 Jan 2017, 11:04 AM
Hello John,

Here you will find a small Dojo sample, based on the described scenario. As you will notice, it properly populates the two levels of the TreeView. May I ask you to modify that, so it reproduces the problem observed and send it back to us? This way we will be able to troubleshoot the issue locally and to provide you with the most appropriate assistance for this case.

Regards,
Veselin Tsvetanov
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
answered on 20 Jan 2017, 02:35 PM

I have modified the provided sample to what I am attempting. Attaching the resulting file here as well.

 

<!DOCTYPE html>
<html>
  <head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
  </head>
  <body>
<script>
 
var elementMapping = new Map();
 
</script>
     
 
    <div id="example"
        data-role="treeview"
        data-bind="source: root"
        data-template="div-template">
            
<script id="div-template" type="text/x-
        kendo-template">
 
             
                # item.expanded = true; #
        # if (item._template != undefined) { #
            <span data-bind="text: _template"></span>
                # } else if (item._name != undefined) { #
            <span data-bind="text: _name"></span>
                # } else if (item._description != undefined) { #
            <span data-bind="text: _description" ></span>
                # } else { #
            <span data-bind="text: _seq"></span>
                # } #
             
             
        </script>
 
    </div>
    <button type="button" data-bind="click: updateSomething" >Update</button>
 
 
      <script>
        var inputJSON = [
          {
            _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"
                    }
                  },
                ]
              }
            ]
          }
        ];
 
        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>
 
    </div>
 
 
  </body>
</html>
0
Veselin Tsvetanov
Telerik team
answered on 24 Jan 2017, 02:10 PM
Hello John,

Here you will find a modified version of the sample discussed. You will notice, that in order to modify a nested element, I have used the ‚Äč.children.at() call:
updateSomething: function(){
  var r = this.get("root");
  var item = r[0].children.at(4);
  item.set("_name", "test");
}

Regards,
Veselin Tsvetanov
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
TreeView
Asked by
leboart
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
leboart
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Veselin Tsvetanov
Telerik team
Share this question
or