This example demonstrates how to manipulate the ASPxTreeView control programmatically on the client using our extended client-side functionality. The ASPxTreeView's client-side programmatic interface is available in the following cases:
- The EnableClientSideAPI property is set to true.
- Any client-side event (available via the ClientSideEvents property) is handled.
- The ClientInstanceName property is defined.
This demo allows the selected node's settings to be modified on the client by clicking check boxes in the rightmost panel.
A node can be selected either directly within the ASPxTreeView control or by using the panel's dropdown editor. Note that the editor's dropdown window contains another ASPxTreeView control (created using a template) to make node selection easier. For synchronization purposes, the NodeClick client events of both ASPxTreeView controls are handled in an appropriate manner (using the OnTreeViewNodeClick function - for the leftmost ASPxTreeView, and using the OnNodesTreeViewNodeClick function - for the ASPxTreeView embedded into the editor's dropdown window).
In this demo, each tree view node is identified using the name assigned to its server Name property. So, any specific node can be easily obtained on the client using the GetNodeByName method of an ASPxTreeView.
Clicking check boxes invokes the corresponding client-side methods (SetEnabled, SetVisible, SetSelectedNode, SetChecked, or SetExpanded), to change the state of a node being currently selected.
A click on the 'Expand all' or 'Collapse all' button calls the respective client method (ExpandAll or CollapseAll) of the leftmost ASPxTreeView control.