Edit this page

Building a Simple TreeView

The following tutorial will demonstrate how to create a simple TreeView using the designer and shows how to:

  • Create root level nodes.

  • Create child nodes.

  • Apply a pre-defined style to the TreeView.

  • Display checkboxes next to nodes.

RadTreeView Getting Started

  1. In a new AJAX Enabled Web Application, drop a RadTreeView to the default form.

  2. Open the Smart Tag and set the Skin to Vista from the drop down list. Then select the Build RadTreeView link. This step will display the RadTreeView Item Builder Dialog.

    RadTreeView Getting Started

  3. In the RadTreeView Item Builder dialog click the Add Root Node button to add three nodes.

    RadTreeView Getting Started

  4. Click the first node and set the Text property to "Condos". Set the Checkable property to False.

  5. Click the second node and set the Text property to "Townhomes". Set the Checkable property to False.

  6. Click the third node and set the Text property to "Houses". Set the Checkable property to False.

    RadTreeView Getting Started

  7. While the third node, "Houses", is still selected, click the Add Child Item button twice.

    RadTreeView Getting Started

  8. Select the first child item and set the Text property to "3 Bedroom, 2.5 Baths".

  9. Select the second child item and set the Text property to "5 Bedroom, 3 Baths".

    RadTreeView Getting Started

  10. Click OK to close the RadTreeView Item Builder dialog.

  11. In the Properties Window, set the RadTreeView CheckBoxes property to true.

  12. Press F5 to run the application.