Lazy loading Wijmo tree child nodes

Question

How can I lazy load the child nodes of a Wijtree? Means initially only the top-level parent nodes will be loaded by making an AJAX server call ($.getJSON() method). When user expands a parent node (nodeExpanded event), then its child nodes will be loaded by making another AJAX server call to get the child nodes for the expanded parent node. The purpose for such lazy loading is better performance in rendering the tree. Sample code will be highly appreciated.

Answer 1

I have been able to implement lazy loading in Wijmo tree in the following way: Only the tree nodes at the top-most hierarchy level are first loaded into the Wijmo tree. However, as none of the nodes will have a child node, the node expand icon will not appear at the left of the nodes and hence nodes cannot be expanded. To solve this issue, a “dummy” child node is added to each top level node, so that they now become parent nodes and hence node expand icon appears which can be clicked to reveal the child nodes. On expanding a parent node, the “dummy” child node is removed and actual child nodes are loaded beneath the parent node. This strategy can be implemented for any number of nested child nodes which have sub-child nodes.

Here is my sample code using AngularJS, but this can be implemented using jQuery as well, following the same logic.

View code:

<div data-ng-controller="DomainCtrl">       
    <div id="domainEntitiesTreeView">
       <wij-tree id="wijtree" nodes="treeList">
            <ul>
            </ul>
        </wij-tree>
    </div>
</div>

AngularJS Controller code:

//Global array to store domain entity ids
var domainEntityIdList = [];
var REST_SERVICE_URL = 'http://DevServer1/MyApplication/Api/DomainEntities';

function DomainCtrl($scope, $http) {
    var domainEntityList = [];
    //AJAX call to the RESTful service to get list of domain entities
    $http({ method: 'GET', url: REST_SERVICE_URL })
        .success(function (data) {
            $(data).each(function (i, val) {
                var domainEntity = data[i];
              var domainEntityId = domainEntity.Id;
                //Keep the domain entity ids in array for later use
                domainEntityIdList.push(domainEntityId);

                var domainEntityName = domainEntity.Name;
                var treeNodes = [{ text: "" }]; //dummy child node
                domainEntityList.push({
                    text: domainEntityName,
                    nodes: treeNodes // dummy child node added to each node
                });
            })
         //Model for the tree
         $scope.treeList = domainEntityList;
        })
        .error(function (data, status) {
            alert('Unable to load data: ' + status);
        });
}

Each parent node here (representing a domain entity) needs to be assigned the corresponding domain entity id, so that on expanding the node, we can get and pass the domain entity id as a parameter to a RESTful service which returns the list of sub domain entities for the given domain entity id. These sub domain entities are then added as child nodes to the expanded node. Code below:

Code for on-demand child nodes loading:

$(document).on("ready", function (e) {
    $("#wijtree").wijtree({
        autoCollapse: true,
        showExpandCollapse: true,
        //nodeExpanded event is triggered on expanding a domain entity node
        nodeExpanded: function (e, data) { 
            AssignNodeId();
            LoadChildNodesOnDemand(e, data);
        }
    });
});

function AssignNodeId() {
    //Assign each node's (li) id attribute to domain entity id   
    $("#wijtree li").each(function (index) {
        $(this).attr("id", domainEntityIdList[index]);
    });
}

function LoadChildNodesOnDemand(e, data) {
    var node = data.element;

    //First remove the dummy child node that was added in each node of the tree
    var nodes = node.wijtreenode("getNodes");
    $(nodes).each(function () {
        node.wijtreenode("remove", 0);
    });

    var domainEntId = node.attr("id");  






    //RESTful service URL for getting the sub domain entities for a given domain entity id. In production-ready application, the URL should not be hardcoded and should come from constant file
    var SUBDOMAIN_SERVICE_URL = 'http://DevServer1/MyApplication/Api/SubDomainEntities?domainEntityId=' + domainEntId;

    //AJAX call to the RESTful service to get list of sub domain entities
    $.ajax({
        url: SUBDOMAIN_SERVICE_URL,
        success: function (data) {
            $(data).each(function (index, val) {
                var subDomainEntity = data[index];
                //Add the subentity as a child node 
                node.wijtreenode("add", subDomainEntity.Name, index);
                //Get the newly added child node and assign its id to Sub Domain Entity Id
                var childNode = nodes[index].element;
                childNode.attr("id", subDomainEntity.Id);
            });
        },
        error: function (data, status) {
            alert('Unable to load data: ' + status);
        }
    });
}

Do let me know if it helps or if you have any questions.