Treeview - load dynamic multiple levels of nodes using remote binding

2 posts, 0 answers
  1. Naga
    Naga avatar
    21 posts
    Member since:
    Jul 2015

    Posted 24 Aug Link to this post

    I am trying to implement multilevel lazy loading treeview. We are not sure of how many levels of nodes will be there in the treeview.
    1. ) How can i implement multiple levels of nodes ?  i have X number of items and it is not possible for me to provide  children always. 
    2. )  while creating my treeview data model i have an attribute "RANK" in the model. How do i get value of RANK for expanded node so that i can pass it as input while calling service to load child node? 
    For URL i need to add RANK as parameter. When i used   url: function (options) { })  i am only getting ID value in options but not the RANK. 
    Below is the code i implemented for two levels.
    Please help. If possible please provide an example.
    Thanks in advance.

        <div id="trVwScanOrg" ></div>

        $(document).ready(function () {
            TreeviewDataBind();
     });


        function TreeviewDataBind() {
    var SecondLevel= {
                transport: {
                    read: {
                        url: function (options) {


                    return kendo.format(MVC URL + parameters in querystring);

                        },
                        type: "get",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "ID",
                        hasChildren: "HasChildren",
                        children: NextLevelItems,
                        Name: "Name"
                    }
                }
            };

            var FirstLevel= new kendo.data.HierarchicalDataSource({

                transport: {
                    read: {
                        url: MVC URL + parameters in querystring
                        type: "get",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        hasChildren: "HasChildren",
                        id: "ID",
                        children: SecondLevel,
                        Name: "Name"
                    }
                }
            });

            var trVwScanOrg = $("#trVwScanOrg").kendoTreeView({
                dataSource: FirstLevel,
                dataTextField: ["Name"]

            });
        }
  2. Stefan
    Admin
    Stefan avatar
    265 posts

    Posted 29 Aug Link to this post

    Hello Naga,

    Apologies for the delayed response.

    Regarding the two questions:

    1) How to implement multiple levels of nodes with X number of items: 
     
    The Hierarchical DataSource supports multiple levels of nodes with X number of items.
     
    I made examples demonstrating implementation with N-level nesting, and with fixed number of levels:

    N-level nesting:

    http://dojo.telerik.com/omUHe

    Fixed number:

    http://dojo.telerik.com/OfIGa

    2) How to get the value of RANK for expanded node:

    I can suggest using the dataItem method of the Kendo UI TreeView on its expand event, to retrieve the value of the RANK attribute:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-dataItem

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events-expand

    I hope these examples will help you to achieve the desired result.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top