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

TreeView with Lazy Loading

1 Answer 870 Views

TreeView

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

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.

TreeView with Lazy Loading

1 Answer, 1 is accepted