TreeView
Lazy Loading
This view shows how to load the child nodes dynamically in TreeView.
Features
Description
Lazy loading is useful when you are dealing with large hierarchical data sources and would like to avoid the delays involved in loading the entire data set at once.
The TreeView control makes lazy-loading super easy. Only one step is required:
- Set the "lazy-load-action-url" attribute to a url where you can get the lazy nodes data. If the child node has children, you can set an empty array to the field which name is what the "child-items-path" attribute stands for. Otherwise, let it to be null.
If you wants to use lazy-loading with javascript, you can set the TreeView's lazy-load-function attribute to a function to be called when the user expands the node. This function takes two parameters: the parent node and a callback function to be invoked when the data becomes available.
The tree in example below starts with three lazy-loaded nodes. When you expand them, the lazy-load-function is invoked. The function uses a setTimeout to simulate an http delay and returns data for three child nodes, one of which is also a lazy-loaded node.
The example also uses some CSS to animate the node icons while they are being loaded.
using C1.Web.Mvc;
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Serialization;
namespace MvcExplorer.Controllers
{
partial class TreeViewController : Controller
{
private readonly C1NWindEntities _db;
public TreeViewController(C1NWindEntities db)
{
_db = db;
}
// GET: LazyLoad
public ActionResult LazyLoading()
{
return View();
}
public ActionResult Load()
{
return this.C1Json(EmployeeEx.GetEmployees(null, _db.Employees), false);
}
public ActionResult LazyLoading_LoadAction([C1JsonRequest]TreeNode node)
{
var leaderID = (int?)node.DataItem["EmployeeID"];
return this.C1Json(EmployeeEx.GetEmployees(leaderID, _db.Employees), false);
}
}
}
<c1-tree-view display-member-path="Name"
child-items-path="SubExployees"
load-action-url="@Url.Action("Load")" lazy-load-action-url="@Url.Action("LazyLoading_LoadAction")"></c1-tree-view>
@section Summary{
<p>@Html.Raw(TreeViewRes.LazyLoading_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.LazyLoading_Text1)</p>
<p>@Html.Raw(TreeViewRes.LazyLoading_Text2)</p>
<ul class="normal">
<li>@Html.Raw(TreeViewRes.LazyLoading_Li1)</li>
@Html.Raw(TreeViewRes.LazyLoading_Text6)
</ul>
<p>@Html.Raw(TreeViewRes.LazyLoading_Text3)</p>
<p>@Html.Raw(TreeViewRes.LazyLoading_Text4)</p>
<p>@Html.Raw(TreeViewRes.LazyLoading_Text5)</p>
}