Problem with TreeView Load on Demand using Angular

[Jason Maronge]

Kendo UI version: v2015.3.930
AngularJS version: 1.4.7
JQuery version: 2.1.0 

I have the following treeview defined in html:

<div kendo-tree-view
     k-options="kendoTreeOptions"
     k-rebind="kendoTreeOptions">
</div>

and it shows up fine. The initial load of data happens in the read of the HierarchicalDataSource.  see attachment 1

The problem occurs when I try to load the children on demand.  All that happens is that the arrow disappears (see attachment 2).  In looking at the Chrome Network tool there is no request being made to get any children and no errors showing up in the console.

Here is the tree options I am using:

{
    loadOnDemand: true,
    dataTextField: "title",
    dataImageUrlField: "imageUrl",
    dataSource: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "../api/ctl1/getTreeData2",
                dataType: "json",
                type: "GET",
                data: () => {
                    return {
                        caseId: !this.treeHasSelectedNode() ? null : this.getSelectedNodeCaseId(),
                        entityId: !this.treeHasSelectedNode() ? null : this.getSelectedNodeKey(),
                        location: !this.treeHasSelectedNode() ? null : this.getSelectedNodeLocation(),
                        createdById: !this.treeHasSelectedNode() ? null : this.getSelectedNodeOwnerId(),
                        isDraggableDroppable: !this.treeHasSelectedNode() ? null : this.getSelectedNodeIsDraggableDroppable(),
                    };
                }
            },
            schema: {
                model: {
                    hasChildren: "hasChildren",
                    children: "children",
                    id: "key"
                }
            }
        },
        requestStart: (e) => {
            console.log("request started");
        },
        requestEnd: (e) => {
            var response = e.response;
            var type = e.type;
            console.log(type);
            console.log(response);
        }
    })
}

and here is what my initial data load is:

 

[{
    "$type": "TreeItem",
    "unselectable": false,
    "extraClasses": null,
    "nodeType": null,
    "customObject": {
        "entityType": "Case",
        "location": "",
        "owner": "1000",
        "caseId": "1",
        "isDraggableDroppable": "False"
    },
    "title": "p1",
    "tooltip": null,
    "key": "1:1:1",
    "lazy": true,
    "expanded": false,
    "selected": false,
    "children": [],
    "folder": true,
    "hideCheckbox": false,
    "data": null,
    "path": null,
    "refKey": null,
    "parentId": "-1",
    "imageUrl": "../app/images/folder_standard.png",
    "hasChildren": true
}, {
    "$type": "TreeItem",
    "unselectable": false,
    "extraClasses": null,
    "nodeType": null,
    "customObject": {
        "entityType": "User",
        "location": "//trtr/Share/dfas/fasdf/1000",
        "owner": "1000",
        "caseId": "",
        "isDraggableDroppable": "True"
    },
    "title": "My Dropspace",
    "tooltip": null,
    "key": "0:-25:",
    "lazy": true,
    "expanded": false,
    "selected": false,
    "children": [],
    "folder": true,
    "hideCheckbox": false,
    "data": null,
    "path": null,
    "refKey": null,
    "parentId": "-1",
    "imageUrl": "../app/images/folder_standard.png",
    "hasChildren": true
}, {
    "$type": "TreeItem",
    "unselectable": false,
    "extraClasses": null,
    "nodeType": null,
    "customObject": {
        "entityType": "User",
        "location": "",
        "owner": "1000",
        "caseId": "",
        "isDraggableDroppable": "True"
    },
    "title": "Shared with me",
    "tooltip": null,
    "key": "0:-50:",
    "lazy": false,
    "expanded": false,
    "selected": false,
    "children": null,
    "folder": true,
    "hideCheckbox": false,
    "data": null,
    "path": null,
    "refKey": null,
    "parentId": "-1",
    "imageUrl": "../app/images/folder_standard.png",
    "hasChildren": false
}]

 Am I doing something wrong?  Isn't the HierarchicalDataSource supposed to handle getting the children data for me?  

 

 

 

 

 

[Konstantin Dikov]

Hi Jason,

The "children" property of the model in the HierarchicalDataSource should specify the property that will hold the child items. In your case, since the children array is empty, no children elements will be displayed. If you need to load the child items on demand, you need to follow the approach from the following online demo:

• http://demos.telerik.com/kendo-ui/treeview/odata-binding

Hope this helps.


Regards,
Konstantin Dikov
Telerik