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

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

8 Answers 906 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Constantine
Top achievements
Rank 1
Constantine asked on 24 Jul 2012, 01:19 AM
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?

8 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 28 Jul 2012, 07:11 PM
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.
0
Constantine
Top achievements
Rank 1
answered on 31 Jul 2012, 02:56 AM
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.
0
David
Top achievements
Rank 1
answered on 31 Jul 2012, 03:09 AM
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.
0
Kyle
Top achievements
Rank 1
answered on 13 Aug 2012, 02:12 PM
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.
0
Regis Bittencourt
Top achievements
Rank 1
answered on 04 Jan 2013, 05:17 PM
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
0
Eduardo
Top achievements
Rank 1
answered on 12 Feb 2019, 05:48 PM

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 

 
$.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": []
                                       }]
               }
           ]
       }
   ];

 

 

0
Neil
Top achievements
Rank 1
answered on 22 Jan 2020, 06:17 AM

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"
     }
 }
0
Aleksandar
Telerik team
answered on 24 Jan 2020, 12:50 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeView
Asked by
Constantine
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Constantine
Top achievements
Rank 1
Kyle
Top achievements
Rank 1
Regis Bittencourt
Top achievements
Rank 1
Eduardo
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or