Pages

Wednesday, November 21, 2007

The ASP.NET 2.0 TreeView Control

ASP.NET 2.0 introduces a new control named TreeView that provides a seamless way to consume information from hierarchical data sources such as an XML file and then display that information. We can use the TreeView control to display information from a wide variety of data sources such as an XML file, site-map file, string, or from a database.It is available under the Standard tab in the Toolbox.
We can use this control when displaying a navigation menu, displaying database records from database tables in a Master/Detail relation, displaying the contents of an XML document, or displaying files and folders from the file system. It is also possible for usto programmatically access the TreeView object model to dynamically create trees, populate nodes, set properties and so on. The TreeView control consists of nodes and there are three types of nodes that you can add to a TreeView control.
Root - A root node is a node that has no parent node. It has one or more child nodes.
Parent - A node that has a parent node and one or more child nodes.
Leaf - A node that has no child nodes.

Customizing the Appearance of the TreeView Control

The TreeView control provides ImageUrl properties such as RootNodeImageUrl, ParentNodeImageUrl, and LeafNodeImageUrl. These custom images are rendered to the left of the node's text. You can override the default image for the node type using the ImageUrl property. The TreeView control also provides CollapseImageUrl and ExpandImageUrl properties for the expanded and collapsed indicators. These are usually represented by plus and minus icons. There is also a property named NoExpandImageUrl that can be used for rendering an image for nodes which have no children. We can turn off the default image using the ShowExpandCollapseboolean property.
In addition to custom images, the TreeView control also supports TreeNodeStyle properties for each node types. These style properties override the NodeStyle property, which applies to all node types. A node can also have a different style applied when it is selected. When Selected property is set to true, the node is selected and the SelectedNodeStyle properties overrides any corresponding unselected style properties for the selected node. It is also possible for us to render check boxes between the node and image by setting the ShowCheckBoxes property to a boolean value.

No comments: