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

How to add a nested node to HierarchialDataSource?

5 Answers 444 Views

TreeView

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

David asked on 12 Nov 2012, 09:12 PM

Hi, I'm looking at the "binding to local source" treeview demo below and was wondering how do you structure this AND the schema to allow 3+ levels of "subCategeries" for something like a parts list. I'm playing with local data but want to eventually populate from remote data and with the list initially expanded.

Once I find this out, I want to use that format to build the JSON response sent from the service. Thanks.

var inline = new kendo.data.HierarchicalDataSource({
data: [
{ categoryName: "Storage", subCategories: [
{ subCategoryName: "Wall Shelving" },
{ subCategoryName: "Floor Shelving" },
{ subCategoryName: "Kids Storage" }
] },
{ categoryName: "Lights", subCategories: [
{ subCategoryName: "Ceiling" },
{ subCategoryName: "Table" },
{ subCategoryName: "Floor" }
] }
],
schema: {
model: {
children: "subCategories"
}
}
});

$("#treeview-right").kendoTreeView({
dataSource: inline,
dataTextField: [ "categoryName", "subCategoryName" ]
});

5 Answers, 1 is accepted

answered on 13 Nov 2012, 12:17 PM

HierarchicalDataSource is like DataSource in the sense that you also have transport and read so you can populate it from a server using it.

Alternatively you can read a JSON from a server using $.getJSON and once read invoke kendoTreeView

$.getJSON("testTree.json", function (data) {

tree = $("#treeview").kendoTreeView({

dataSource :kendo.observableHierarchy(data)

}).data("kendoTreeView");

});

For configuring which nodes to expand, you have an attribute on each level of the tree called expanded and you can set it to true or false:

[

{

"id" :100,

"text" :"root",

"sprite":"k-icon k-i-pencil",

"expanded": true,

"items" :[

{

"id" :1,

"text" :"level1",

"sprite":"k-icon k-i-pencil",

"expanded": false,

"items" :[

{

"id" :2,

"text" :"level1.1",

"sprite":"k-icon k-i-pencil",

"expanded":false,

"items" :[

{

"id" :3,

"text":"level1.1.1."

},

answered on 14 Nov 2012, 05:35 PM

Hi, I expanded my testing to try a WCF service I created. Using the Demos “Binding to remote data” I modified as follows for my service. I tested it through an $.ajax call and it returns the data as:

d: "[{"FolderId":1,"FolderName":"Manufacturing","ParentFolderId":0,"UserId":30,"HasChildren":true}]"

The code...

                var homogeneous = new kendo.data.HierarchicalDataSource({
                        transport: {
                                read: {
                                    url: "/Secure/WCF/Example.svc/GetFolder",
                                    dataType: "json",
                                    data: {
                                           UserId: 30,
                                           FolderId: 1
                                    }
                                }
                        },
                        schema: {
                            model: {
                                id: "FolderId",
                                hasChildren: "HasChildren"
                            },
                             parse: function(data){
                                return preprocessData(data);
                            }
                        }
                    });

    function preprocessData(data) {
        tree = $("#treeviewRemoteData").kendoTreeView({
         dataSource :kendo.data.observableHierarchy(data)
         }).data("kendoTreeView");
}

But I get…

Microsoft JScript runtime error: Object doesn't support property or method 'observableHierarchy'. Do I need .data("kendoTreeView") at the end? I thought calling $("#treeviewRemoteData").kendoTreeView as enough?

I simply don’t know what it wants to bind to the tree. I’ve also tried the following but I get “splice” error.

$("#treeviewRemoteData").data("kendoTreeView").setDataSource(data.d);
OR
$("#treeviewRemoteData").data("kendoTreeView").setDataSource(JSON.parse(data.d));

I may be getting off topic, but another thing I don’t get is why does the Kendo “remote” demo’s JSON response from http://demos.kendoui.com/service/Employees return with a “callback()”? I’m obviously missing something. I want to be able to load my nested folder structure the same way....

callback([{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null}])

answered on 14 Nov 2012, 06:14 PM

Sorry David,

I might have led you to confusion. The reason for not using datasource property is because Hierarchical DataSources load one level at a time (afaik): they don't load next level until you expand a node. So either you implement a way for loading a subtree or you can use "my trick" for loading all tree data and then initialize it.

If your server is able of loading one level at a time (by sending the @id of next sub-tree to retrieve) you can use the typical datasource option.

I think that you get the example from http://demos.kendoui.com/web/treeview/remote-data.html, correct? If you pay close attention they are retrieving jsonP not json and that's why it is wrapped by callback.Regarding "Object doesn't support property or method 'observableHierarchy'

Regarding "Object doesn't support property or method 'observableHierarchy'", which version of KendoUI are you using? Make sure to use the very last one!