In my
previous post, I talked about the web service functionality that's common to all ComponentArt navigation controls. I focused on common features that are present in many different controls, especially in this case, but this approach was unfair to one control. With its ability to load chunks of data on demand, TreeView is the odd man out, supporting everything that other navigation controls do, but adding its own unique twist.
Like the other navigation controls, TreeView has control-level
WebService and
WebServiceMethod properties. These determine which ASP.NET AJAX registered web service will be called, and which method of that service, when nodes are retrieved. For the initial data load, the behaviour is identical to Menu, TabStrip or NavBar. What TreeView can do that others can not is to only load some nodes initially, letting user actions determine what else gets loaded and when. Essentially, TreeView is able to operate in load-on-demand mode with web services.
To return load-on-demand nodes (parent nodes with no child nodes pre-loaded), simply set their
UseWebService property to true. This will notify TreeView to consider these nodes to be parent nodes, and to call the web service again when they are expanded, to load their child nodes. When that happens, the same WebServiceMethod will be called, but with a twist: the
TreeViewWebServiceRequest object that is passed in will have its
Node property set to the node that requires data. Based on the Text, Value or ID of this node, appropriate new nodes can be created and returned, as they would normally, from the web service method. Note that these child nodes can also have their UseWebService property set to true.
After a web service call completes, the client-side event also exposes the node for which the call was made, in addition to the
customData property common to all navigation controls. Here's an overview of the client-side
TreeViewNodeWebServiceCompleteEventArgs class:
function TreeView1_webServiceComplete(sender, eventArgs)
{
var node = eventArgs.get_node();
if(node)
{
alert('Completed web service call for node ' + node.get_text());
}
else
{
alert('Completed web service call for top level data.');
}
var customData = eventArgs.get_customData();
if(customData)
{
alert('Web service call returned custom data: ' + customData);
}
}
You can see an example of this functionality online with the
TreeView Web Service Load-on-demand sample. Please note that this functionality is fully available only as of Web.UI 2008.1 SP1, released on April 23rd 2008.
Summary
To recap, since TreeView can load node-specific partial data through web services (unlike other navigation controls, which can only load all the items at once), its related API is a superset of, say, that of Menu.
TreeViewWebServiceRequest includes the
Node property (null for initial, top-level loading),
TreeViewNode has the
UseWebService boolean, and the client-side
TreeViewWebServiceCompleteEventArgs class includes a
node property. These extensions enable efficient load-on-demand functionality built entirely on ASP.NET AJAX web services.
