Re-loading Lazy-Loaded Nodes
The TreeView's lazyLoadFunction property allows you to create nodes that are loaded only when the node is expanded.
This can be used to improve performance in cases where data is loaded asynchronously.
By default, lazy nodes load their data only once, when the node is expanded for the first time. This sample shows how you can change that behavior for selected nodes causing them to re-load their data whenever they are expanded. The sample does this by:
- Clearing the node's lazy-loaded data when the node is collapsed, and
- Re-binding the tree to remove the old nodes.
Electronics (reload when opening)
Toys (load once)
Home (load once)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // This file locates: "Scripts/Lesson/C1Nav/Reloading.js". c1.documentReady(function () { var theTree = wijmo.Control.getControl( '#theTree' ); theTree.itemsSource = getData(); // load elements with a simulated http delay theTree.lazyLoadFunction = function (node, callback) { setTimeout(function () { var result = getLazyData(); callback(result); }, 1000); }; // when collapsing a node with 'reload' set to true, // clear its contents to reload later theTree.isCollapsedChanging.addHandler(function (s, e) { var node = e.node, tree = node.treeView; if (!node.isCollapsed && node.dataItem.reload == true ) { // remove previous lazy-loaded items from data source node.dataItem.items = []; // re-bind the tree to remove the old nodes tree.loadTree(); } }); // starting data function getData() { return [ { header: 'Electronics <i>(reload when opening)</i>' , items: [], reload: true }, { header: 'Toys <i>(load once)</i>' , items: [] }, { header: 'Home <i>(load once)</i>' , items: [] }, ]; } // lazy data (re-loaded when opening nodes) function getLazyData() { var creationTime = wijmo.Globalize.format( new Date(), 'hh:mm:ss' ); return [ { header: 'Empty Node at: ' + creationTime }, { header: 'Node with child nodes at: ' + creationTime, items: [ { header: 'hello' }, { header: 'world' }] }, { header: 'Lazy node <i>(reload when opening)</i>' , items: [], reload: true }, ] } }); |
1 2 3 4 5 6 7 | // This file locates: "Content/css/Lesson/C1Nav/Reloading.css". .demo-control .wj-treeview { background-color: rgba(0,0,0,.1); padding: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); height: 400px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1NavController : Controller { // GET: Reloading public ActionResult Reloading() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < h1 > @Html .Raw(Resources.C1Nav.Reloading_Title) </ h1 > < p > @Html .Raw(Resources.C1Nav.Reloading_Text1) </ p > < p > @Html .Raw(Resources.C1Nav.Reloading_Text2) </ p > < p > @Html .Raw(Resources.C1Nav.Reloading_Text3) </ p > < ol > < li > @Html .Raw(Resources.C1Nav.Reloading_Text4) </ li > < li > @Html .Raw(Resources.C1Nav.Reloading_Text5) </ li > </ ol > @Html .C1().TreeView().Id( "theTree" ).DisplayMemberPath( "header" ).ChildItemsPath( "items" ).IsContentHtml( true ).AllowDragging( true ).ExpandOnClick( false ).AutoCollapse( false ) |