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

TreeView with Lazy Loading

1 Answer 416 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Balaji
Top achievements
Rank 1
Balaji asked on 23 Sep 2015, 08:49 AM

Hi, 

We are using the Kendo tree view to display no of clients in the left panel of the page. These is the master client list and each client may have 2-3 levels of sub clients to display in the tree view. Now the Tree view displays all the Master clients and its child clients from the Database at a time. We don’t want to display all the clients from the first. Sometimes the record count will be in thousands, so firstly we will be displaying some number of clients, say first 50 master clients with their sub clients. And then we have load remaining clients details if the user wants to check the remaining clients as well. We have to display the remaining clients in the lazy loading format as i.e., as the user scrolls the mouse the clients have to populate into the tree view. This functionality is similar to the Grid lazy loading. Is it possible to load tree view like this scenario?  

We will be using MVC format as well to display the Tree view.

CSHTML code:
   @(Html.Kendo().TreeView()
    .Name("treeview")   
    .HtmlAttributes(new { @class = "demo-section" })
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
                    .Action("TreeViewDemo", "AutoMVC")
        )
    )
    .LoadOnDemand(true)
        )

Controller Code:

public JsonResult TreeViewDemo(int? id)
{
       if (id == null)
            {
                var clientsdata = from e in cllist      //Here cllist comes from DataBase                         
                              select new
                              {
                                  id = e.clientId,
                                  Name = e.clientName,
                                  hasChildren = e.hasSubClients
                              };



                return Json(clientsdata, JsonRequestBehavior.AllowGet);
            }
            else
            {
                List<Clients> newcl = ChildEmps(id);
                var subc= from e in newcl
                          select new
                          {
                              id = e.clientId,
                              Name = e.clientName,
                              hasChildren = e.hasSubClients
                          };

                return Json(subc, JsonRequestBehavior.AllowGet);
            }
}

public List<Clients> ChildEmps(int? id)
        {
//here cllist is the client list from DataBase
var clientsdata = (from e in cllist
                              where e.ReportsTo == id
                              select e);

           return clientsdata.ToList();
}

Client Class:
public class Clients
    {
        public Clients(int x,string str, bool hs,int rt)
        {
            clientId = x;
            clientName = str;
            hasSubClients = hs;
            ReportsTo = rt;
            //childrenNodes = cl;
        }
        public int clientId { get; set; }
        public string clientName { get; set; }

        public bool hasSubClients { get; set; }
        public int ReportsTo { get; set; }

       // public Clients childrenNodes { get; set; }
    }


Can you please provide examples for Treeview lazy loading. ​​​

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 25 Sep 2015, 10:25 AM
Hello Balaji,

Currently the treeView does not support virtualization of the data and the only possible solution is to use the "lazy loading" (nested levels are loaded on demand) demonstrated in the following demo (link to the option in our API):

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Balaji
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or