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

8 posts, 1 answers
  1. leboart
    leboart avatar
    6 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    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?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Mar 2013 Link to this post

    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!
  3. leboart
    leboart avatar
    6 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    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?.
  4. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Mar 2013 Link to this post

    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!
  5. John
    John avatar
    25 posts
    Member since:
    Aug 2014

    Posted 19 Jan 2017 Link to this post

    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);          
          
         
             
             
        }
    });

     

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 20 Jan 2017 Link to this post

    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.
  7. John
    John avatar
    25 posts
    Member since:
    Aug 2014

    Posted 20 Jan 2017 in reply to Veselin Tsvetanov Link to this post

    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>
  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 24 Jan 2017 Link to this post

    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.
Back to Top