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

Problem with TreeView Load on Demand using Angular

1 Answer 222 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jason Maronge
Top achievements
Rank 1
Jason Maronge asked on 07 Nov 2015, 05:52 AM

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?  

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Nov 2015, 01:53 PM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Jason Maronge
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or