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

[leboart]

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?

[Petur Subev]

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

[leboart]

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?.

[Petur Subev]

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

[John]

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




    }
});

[Veselin Tsvetanov]

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

[John]

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

 

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.metro.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.metro.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
  </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>

[Veselin Tsvetanov]

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