TreeView with Lazy Loading

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

    Posted 23 Sep 2015 Link to this post

    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. ​​​

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 25 Sep 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top