Multiple childnodes with different data

8 posts, 0 answers
  1. Lutz
    Lutz avatar
    7 posts
    Member since:
    Feb 2017

    Posted 08 Aug Link to this post

    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

  2. Lutz
    Lutz avatar
    7 posts
    Member since:
    Feb 2017

    Posted 08 Aug Link to this post

    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"]
        });
     
    }
  3. Lutz
    Lutz avatar
    7 posts
    Member since:
    Feb 2017

    Posted 08 Aug Link to this post

    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.

     

     

  4. Lutz
    Lutz avatar
    7 posts
    Member since:
    Feb 2017

    Posted 08 Aug Link to this post

    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.}
  5. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 10 Aug Link to this post

    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.
  6. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 10 Aug Link to this post

    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.
  7. Lutz
    Lutz avatar
    7 posts
    Member since:
    Feb 2017

    Posted 10 Aug Link to this post

    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

     

  8. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 14 Aug Link to this post

    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.
Back to Top