This demo shows how to use TreeView populate tree nodes from remote feature to load the remote server folders on demand.

TreeView offers ClientBind methods to implatement ajax load.

• ClientBind(string url)
• ClientBind(string url,Action clientNodeTemplate)
• ClientBind(string url,string httpMethod,Action clientNodeTemplate)

If clientNodeTemplate not specified TreeView will create clientNodeTemplate for NavigatableNode object, the remote url must be return a JSON array which contains remote node objects. You also can return your JSON format objects and specified the client template.

<%
 <% 
        Ajax.Dna().TreeView("treeview1")
        .SinglePathExpand(true)
        .Options(opts =>
        {
            //Handling the node populate events.
            opts.OnNodePopulate = (new StringBuilder())
                .Append("var $n = $(node);")
                .Append("$n.addClass(\"d-treenode-loading\");")
                .Append("var url = $(\">.d-treenode-content>a\", $n).attr(\"rel\");")
                .Append("$(\"#treeview1\").dtree(\"loadNodes\", url, \"POST\", {}, $n);")
                .Append("$n.removeClass(\"d-treenode-hasChildren\");")
                .ToString();
            opts.OnNodeLoaded = "if (node) { $(node).removeClass(\"d-treenode-loading\"); } ";
        })
        .ClientBind("Your remote url here"), () =>
        {
        /*Here is return a JSON array object that contains and object like:
        {
            hasChildren:bool,
            url:string,
            rel:string,
            imgUrl:string,
            title:string
        }
        */
        %>
         <li { {if hasChildren} } class="d-treenode-hasChildren" { {/if} }>
               <a href="${url}" { {if rel} } rel="${rel}" { {/if} }>
               <img src="${imgUrl}" class="d-treenode-img" alt="${title}" />
               <span class="d-treenode-text">${title}span> a>
         li>
       <%
       })
       .Render();
%>

For more about jQuery client template you can read this document:"jQuery-templ"