Multiple childnodes with different data

[Lutz]

Hi,

I am rather new to javascript and kendo ui and I try to build a sharepoint solution but came across with 2 issues.

1.) I want to populate a TreeView with the following layout

|_{Fix:Root}

|__{Fix:Lists and libraries}

|___{REST: Library 1}

|____{Fix:Fields}

|_____{REST: Field A}

|_____{REST: Field B}

|___{REST: Library 2}

|___{REST: Library 3}

|___{REST: Library 4}

|--{Fix:Site Columns}

 

Fix: Fix names of the node

REST: nodes received via REST

 

So this means that my ROOT node has 2 fix child nodes. "Lists and libraries" and "SiteColumns". When I expand "Lists and libraries" it should load data from REST URL "A" and if I expand "Site Columns" it should load data from a different URL. How can this be achieved? From what I have read I only can assign one child!?

 

2.) When I click for example on the node "Field A" I want to show a ListView with all fields from the datasource beloning to this node. Is this possible?

 

Thanks for your support.

 

best regards,

Lutz

[Lutz]

So far I have this code which just create a TreeView with the ListNames and Fields.

function populateTreeView() {
    // TreeView bound to Categories > Products > OrderDetails
    var appWebUrl = _spPageContextInfo.webAbsoluteUrl;

    var Fields = {
        type: "odata",
        schema: {
            model: {
                hasChildren: function () {
                    return false;
                }
            },
            data: function (data) {
                console.log(data.d);
                return data.d && data.d.results ? data.d.results : [data.d];
            }
        },
        transport: {
            read: {
                url: function (options) {
                    return appWebUrl +  kendo.format("/_api/web/lists('{0}')/fields", options.Id) + "?$filter=Hidden eq false";

                }
            }
        }
    };

    var Lists = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                dataType: "json",
                contentType: "application/json;odata=verbose",
                headers: {
                    "accept": "application/json; odata=verbose"
                },
                url: appWebUrl + "/_api/lists" + "?$filter=Hidden eq false"
            }
        },
        schema: {
            model: {
                hasChildren: "Fields",
                id: "Id",
                children: Fields
            },
            data: function (data) {
                console.log(data.d);
                return data.d && data.d.results ? data.d.results : [data.d];
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: Lists,
        dataTextField: ["Title", "Title"]
    });

}

[Lutz]

So far I have this code which just creates a tree with

function populateTreeView() {
    // TreeView bound to Categories > Products > OrderDetails
    var appWebUrl = _spPageContextInfo.webAbsoluteUrl;

    var Fields = {
        type: "odata",
        schema: {
            model: {
                hasChildren: function () {
                    return false;
                }
            },
            data: function (data) {
                console.log(data.d);
                return data.d && data.d.results ? data.d.results : [data.d];
            }
        },
        transport: {
            read: {
                url: function (options) {
                    return appWebUrl +  kendo.format("/_api/web/lists('{0}')/fields", options.Id) + "?$filter=Hidden eq false";

                }
            }
        }
    };

    var Lists = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                dataType: "json",
                contentType: "application/json;odata=verbose",
                headers: {
                    "accept": "application/json; odata=verbose"
                },
                url: appWebUrl + "/_api/lists" + "?$filter=Hidden eq false"
            }
        },
        schema: {
            model: {
                hasChildren: "Fields",
                id: "Id",
                children: Fields
            },
            data: function (data) {
                console.log(data.d);
                return data.d && data.d.results ? data.d.results : [data.d];
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: Lists,
        dataTextField: ["Title", "Title"]
    });

}

ListNames and Fields.

 

 

[Lutz]

Thats the code I have so far. It creates a treeview with just the listnames and fields.

 

01.function populateTreeView() {
02.    // TreeView bound to Categories > Products > OrderDetails
03.    var appWebUrl = _spPageContextInfo.webAbsoluteUrl;
04.
05.    var Fields = {
06.        type: "odata",
07.        schema: {
08.            model: {
09.                hasChildren: function () {
10.                    return false;
11.                }
12.            },
13.            data: function (data) {
14.                console.log(data.d);
15.                return data.d && data.d.results ? data.d.results : [data.d];
16.            }
17.        },
18.        transport: {
19.            read: {
20.                url: function (options) {
21.                    return appWebUrl +  kendo.format("/_api/web/lists('{0}')/fields", options.Id) + "?$filter=Hidden eq false";
22.
23.                }
24.            }
25.        }
26.    };
27.
28.    var Lists = new kendo.data.HierarchicalDataSource({
29.        type: "odata",
30.        transport: {
31.            read: {
32.                dataType: "json",
33.                contentType: "application/json;odata=verbose",
34.                headers: {
35.                    "accept": "application/json; odata=verbose"
36.                },
37.                url: appWebUrl + "/_api/lists" + "?$filter=Hidden eq false"
38.            }
39.        },
40.        schema: {
41.            model: {
42.                hasChildren: "Fields",
43.                id: "Id",
44.                children: Fields
45.            },
46.            data: function (data) {
47.                console.log(data.d);
48.                return data.d && data.d.results ? data.d.results : [data.d];
49.            }
50.        }
51.    });
52.
53.    $("#treeview").kendoTreeView({
54.        dataSource: Lists,
55.        dataTextField: ["Title", "Title"]
56.    });
57.
58.}

[Nencho]

Hello Lutz,

The last demonstrated implementation seems to be correct. The approach that you use is well demonstrated on our online demos below:

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

Since I am unable to locally replicate the issue, due to missing data source, I would like to ask you to provide us with a runnable example of the current implementation that you have at your end. Hence, we will be able to locally test the scenario with the exact data source that you have at your end.

Lastly, please make sure that both source return the needed data and that there are not js errors in the devtool console of your browser.

I am looking forward to your reply.

Regards,
Nencho
Progress Telerik

[Nencho]

Hello Lutz,

In addition, I have created a sample example, where the binding to static and service is demonstrated, following the approach demonstrated in our online demo:

http://dojo.telerik.com/ANOpa/5

Hope this would help.

Regards,
Nencho
Progress Telerik

[Lutz]

Hi,

thanks for your reply. The code I have posted above is working fine but its not really what I was looking for.

I have attached an image demonstrating what I am looking for. Always keep in mind that I try to get this done with odata-binding!

 

Thanks

 

[Nencho]

Hello Lutz,

Thank you for the attached screenshot - it clears the hierarchy that you aim to achieve.

I am afraid, however, that such hierarchy could hardly be achieved in terms of declaration of the static and dynamic data source. In other words, the approach suggested in the demo and the last provided example is targeting the levels of hierarchy and what binding each level should use. As I can see in the attached image - the list & libraries items has a child level of static data, which should have a children with REST service, while, the site columns has directly children with Rest service binding. Hence, the needed structure of the treeview does not allow such combination of bindings.

Regards,
Nencho
Progress Telerik