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

How to load multiple levels of nodes using remote binding ?

1 Answer 202 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Naga
Top achievements
Rank 1
Naga asked on 23 Aug 2016, 10:03 PM

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"]

        });
    }

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 25 Aug 2016, 02:43 PM

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.
 
Tags
TreeView
Asked by
Naga
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or