How to load multiple levels of nodes using remote binding ?

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

    Posted 23 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. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 25 Aug Link to this post

    Hello Naga,

    When the Kendo UI TreeView is bound to remote data does not know at the beginning how many levels will be displayed. Each level of data is loaded when the node is expanded. For example please refer to the TreeView / Binding to remote data demo. The field "HasEmployees" indicates whether this node has child nodes. If so an expand icon will be displayed and when user expands this node a request with the id value will be sent. 

    Regards,
    Boyan Dimitrov
    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