Problem with TreeView Load on Demand using Angular

2 posts, 0 answers
  1. Jason Maronge
    Jason Maronge avatar
    322 posts
    Member since:
    Jan 2005

    Posted 06 Nov 2015 Link to this post

    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?  

     

     

     

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 10 Nov 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top