How to add a nested node to HierarchialDataSource?

[David]

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

[OnaBai]

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

                },

[David]

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

[OnaBai]

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!




 

[David]

Hi,
I downloaded and unzipped kendoui.web.2012.2.913.  Here are the script references I'm using.  Could I be missing a script reference?  I the dependency docs it states "kendo.web.min.js contains a minified version of all scripts from Kendo UI Web".   Now I'm wondering if I need the "kendo.data.js" etc. 

<script type="text/javascript" src="../../Javascript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Javascript/kendo.web.min.js"></script>

[OnaBai]

Actually the problem is 2012.2.913. A couple of weeks ago the published a beta 2012.2.1024. In this one they fixed a lot of bugs (and added a lot related with tree view). Would you mind trying a newer one? Today (a couple of hours ago) they presented Q3 release (likely to be already available).