TreeView Control Example

Both a TreeView and a Menu visualize hierarchical information. Without adapters both use HTML <table> tags. Control adapters can be used so that nested <ul> tags are rendered instead. A combination of CSS and JavaScript can then be used to show and hide portions of the hierarchy of the tree or menu.

When the CSS and JavaScript are removed the adapted HTML degrades into simple nested unordered lists that are easily interpreted by screen readers, etc. You can see this for yourself by setting the theme to None in the Theme Chooser on the left.

Quick demo: Expand several nodes in the tree. Select a node (this causes the page to post back). You'll notice that:

• The TreeView maintains its expansion state.
• The TreeView's selected node is visually identified.
• The page's sample content has changed to include several instances of the selected node's value.

Additional TreeView examples:

• Checkboxes.
• Cascading checkboxes.
• Populate-on-demand
• Postback (including emulation of the SelectedNodeChanged, TreeNodeCheckChanged and TreeNodePopulate events)