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

Multiple childnodes with different data

7 Answers 537 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Lutz
Top achievements
Rank 1
Lutz asked on 08 Aug 2017, 08:54 AM

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

7 Answers, 1 is accepted

Sort by
0
Lutz
Top achievements
Rank 1
answered on 08 Aug 2017, 08:59 AM

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"]
    });
 
}
0
Lutz
Top achievements
Rank 1
answered on 08 Aug 2017, 09:00 AM

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.

 

 

0
Lutz
Top achievements
Rank 1
answered on 08 Aug 2017, 09:01 AM

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.}
0
Nencho
Telerik team
answered on 10 Aug 2017, 07:32 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nencho
Telerik team
answered on 10 Aug 2017, 07:43 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lutz
Top achievements
Rank 1
answered on 10 Aug 2017, 10:21 AM

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

 

0
Nencho
Telerik team
answered on 14 Aug 2017, 08:12 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Lutz
Top achievements
Rank 1
Answers by
Lutz
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or