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)

// 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 },
        ]
    }
});

// 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;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Reloading
        public ActionResult Reloading()
        {
            return View();
        }
    }
}

<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)