Lazy-Loading Nodes

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 two steps are required:

Set the items property in the parent node data item to an empty array.
Set the TreeView's lazyLoadFunction property 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 lazyLoadFunction is invoked. The function uses a timeout to simulate an http delay and returns data for three child nodes, one of which is also a lazy-loaded node.

Lazy Node 1

Lazy Node 2

Lazy Node 3

// This file locates: "Scripts/Lesson/C1Nav/LazyLoading.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
    tree.itemsSource = getData();
    tree.displayMemberPath = 'header';
    tree.childItemsPath = 'items';
    tree.lazyLoadFunction = lazyLoadFunction;
 
    // start with three lazy-loaded nodes
    function getData() {
        return [
            { header: 'Lazy Node 1', items: [] },
            { header: 'Lazy Node 2', items: [] },
            { header: 'Lazy Node 3', items: [] }
        ];
    }
 
    // function used to lazy-load node content
    function lazyLoadFunction(node, callback) {
        setTimeout(function () { // simulate http delay
            var result = [ // simulate result
                { header: 'Another lazy node...', items: [] },
                { header: 'A non-lazy node without children' },
                {
                    header: 'A non-lazy node with child nodes', items: [
                        { header: 'hello' },
                        { header: 'world' }]
                }];
            callback(result); // return result to control
        }, 2500); // 2.5sec http delay
    }
});

// This file locates: "Content/css/Lesson/C1Nav/LazyLoading.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

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

<h1>
    @Html.Raw(Resources.C1Nav.LazyLoading_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.LazyLoading_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.LazyLoading_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Nav.LazyLoading_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.LazyLoading_Text4)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1Nav.LazyLoading_Text5)
</p>
 
@Html.C1().TreeView().Id("theTree")