How to lazy load Infragistics UltraWebTree control?

Question

I cannot find any examples of how to lazy load the Infragistics UltraWebTree v6.3

I found that the docs on the Infragistics site tend to be limited to the latest version of their controls, but this is a legacy app which I am unable to upgrade. Has anyone got example code or links which demonstrate how to lazy-load nodes in this control?

The current implementation that we have loads 1.35MB of html because it is populating the entire tree!! Yikes!

Answer 1

It turnedout to be a simple piece of JQuery and a webservice to return the rendered nodes.

Any node that has sub-items is initialised with the text "Loading..." so that the script knows to attempt to retrieve them.

<script type="text/javascript" language="javascript">
    var imageTypeExpression = "img[imgType='exp'][src$='plus.gif']";
    var maxRetries = 5;
    jQuery(document).ready(function() {
        jQuery("#T_TreeListCtl " + imageTypeExpression).click(imageClick);
        jQuery("#tdLists").show();
    });

    function imageClick() {
        var parentDivId = jQuery(this).parent().attr('id');
        var nodesDiv = '#M_' + parentDivId;
        if (jQuery(nodesDiv).text() == 'Loading...') {
            getNodes(parentDivId, nodesDiv, maxRetries);
        }
    }

    function getNodes(parentDivId, nodesDiv, retryCount){
        if (retryCount == 0) {
            jQuery(nodesDiv).html("<div>Loading... failed.</div>");
        }
        else {
            jQuery.ajax({ type: "POST",
                url: "WebServices/TreeNodes.asmx/GetChildNodes",
                data: "{'parentId' :'" + parentDivId + "'}",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                success: function(json) {
                    var result = eval("(" + json.d + ")");
                    jQuery(nodesDiv).html(result.value);
                    jQuery(imageTypeExpression, nodesDiv).click(imageClick);
                },
                timeout: 100,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus == 'timeout') {
                        getNodes(parentDivId, nodesDiv, retryCount - 1); //keep trying
                    }
                }
            });
        }
    }
</script>