How to bind TreeView to remote data with full tree items?

[Constantine]

For example, I have json file:

[

    { "text": "Furniture", "items": [

        { "text": "Tables & Chairs" },

        { "text": "Sofas" },

        { "text": "Occasional Furniture" }

    ] },

    { "text": "Decor", "items": [

        { "text": "Bed Linen" },

        { "text": "Curtains & Blinds" },

        { "text": "Carpets" }

    ] }

]

I try to bind it to TreeView:

var data = new kendo.data.HierarchicalDataSource({

    transport: {

        read: {

            url: "/test.json"

        }

    }

});

 

 

$("#treeview").kendoTreeView({

    dataSource: data

});

But I get only top level nodes(see attach). Other levels loaded only by click on parents (but they can't, because it's simple json file). How can I chage this?

[David]

I was trying to do the same thing. I was building my entire hierarchy and trying to bind it all at once. Turns out, the TreeView/HierarchicalDataSource combo doesn't work that way. It binds one level of the tree at a time.
Go to the TreeView Demo and watch its behavior with Fiddler. When the page loads, it calls the service that's configured in the HierarchicalDataSource, which returns only the first level. When you expand a node, the data source calls the service again, and retrieves only the next level of tree nodes.
So, I wrote a method on my controller class that returns one level of the tree hierarchy, based on the parent node, and it works great.

[Constantine]

Yeah, I understand that.

But think this is not obvious behaviour.

DataSource gets several levels, so TreeView has to render all of them. And then, if node has attribute 'hasChildren', but no actual data, tries to load them.

[David]

I agree, it's not obvious behavior. That's why I resorted to Fiddler to solve the problem. However, I understand the intent to save bandwidth.
Imagine a deeply nested tree. No point in making the page load the entire thing if the user is only going to navigate 2 levels deep.
Perhaps a setting on either the TreeView, or the HierarchicalDataSource that lets us choose how it loads, Telerik?
That would be fantastic, because in my case (a 4 level deep tree), I'd rather load it all at once.

[Kyle]

I added an entry to Kendo's uservoice for this:

http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/3072947-treeview-allow-hierarchicaldatasource-to-be-fully- 

I have times when I need to refresh the treeview based on remote data and I was hoping that the hierarchialdatasource was going to allow me to do that, but I need the full results in order for that to be feasible.

[Regis Bittencourt]

i've used my own mecanism for my tree of our product here in my company called "Unit"
 model: {
                    id: "Id",
                    hasChildren: "HasChildUnits",
                    children: {
                        transport: {
                            read: function (readOptions) {
                                var item = [your datasource variable].get(readOptions.data.Id);
                                if (item.ChildUnits) {
                                    readOptions.success(item.ChildUnits); console.log('cache');
                                } else {
                                    $.ajax({
                                        url: '[get the units url]',
                                        data: readOptions.data,
                                        success: function (result) {
                                            readOptions.success(result); console.log('ajax');
                                        }
                                    });
                                }
                                
                            }
                        },
                        schema: {
                            model: {
                                id: "Id",
                                hasChildren: "HasChildUnits"
                            }
                        }
                    },
                    expanded: true
                }

then if my model has a child unit it will load from cache

[Eduardo]

I face the same problem, I  solve it but not with kendo,  I just make a json call with jquery  and create the treeview when the request is done 

var api = "http://yourAPImethodOrJSONfile";

$.getJSON(api, function (jsondata) {
    var treviewDatasource = new kendo.data.HierarchicalDataSource({
        schema: {
            model: {
                children: {
                    schema: {
                        data: "SecondLevelArray",
                        model: {
                            children: "ThirdLevelArray"
                        }
                    }
                }
            }
        }
        ,data: jsondata
        ,expanded: true
    });

    $("#sidebar-treeview").kendoTreeView({
        loadOnDemand: false,
        dataSource: treviewDatasource,
        dataTextField: ["FirstLevelText", "SecondLevelText", "ThirdLevelText"],
    });
});

 

You can see how is look like with this snippen https://dojo.telerik.com/@EddZeppelin/OLoxUhet

In my case the  json source is not standard each level has its own text name so the example could be even more simple

 

My json source looks like this, hope to help someone

 

[
       {
           "ID": 1,
           "FirstLevelText": "Grandparent1",
           "SecondLevelArray": [
               {
                   "ID": 2,
                   "SecondLevelText": "Son 1 grandparent1",
                   "ThirdLevelArray": [
                       {
                           "ID": 3,
                           "ThirdLevelText": "grandson1 for grandparent1",
                           "LastUneededLevelArray": []
                       },
                       {
                           "ID": 4,
                           "ThirdLevelText": "grandson2 for grandparent1",
                           "LastUneededLevelArray": []
                       },
                       {
                           "ID": 5,
                           "ThirdLevelText": "grandson2 for grandparent1",
                           "LastUneededLevelArray": []
                       }
                   ]
               },
               {
                   "ID": 6,
                   "SecondLevelText": "Son 2 grandparent 1",
                   "ThirdLevelArray": [{
                       "ID": 7,
                       "ThirdLevelText": "grandson3 for grandparent1",
                       "LastUneededLevelArray": []
                   }]
               },
               {
                   "ID": 8,
                   "SecondLevelText": "Son 3 grandparent 1",
                   "ThirdLevelArray": [{
                       "ID": 9,
                       "ThirdLevelText": "grandson4 for grandparent1",
                       "LastUneededLevelArray": []
                   }]
               }
           ]
       },
       {
           "ID": 10,
           "FirstLevelText": "Grandparent2",
           "SecondLevelArray": [
               {
                   "ID": 11,
                   "SecondLevelText": "Son1",
                   "ThirdLevelArray": [{
                       "ID": 12,
                       "ThirdLevelText": "grandson1 for grandparent2",
                       "Equipments": []
                                       }]
               }
           ]
       }
   ];

 

 

[Neil]

Who's following in 2020?.. :-)
I resolve the issue by "children:"items" adding the schema in the dataSource:

I have a recursive function that fetched the json, so it's not easy to determine

how many level the tree has.

 

schema: {
     model: {
      id: "id",
      hasChildren: "hasChildren",
      children:"items"
     }
 }

[Aleksandar]

Hello,

Defining the schema.model.children is used to specify the object or configuration for fetching the child nodes. A detailed explanation of how children are fetched is available in the HierarchicalDataSource overview help topic.

Regards,
Aleksandar
Progress Telerik