ASP.NET 3.5 and above only

ASP.NET TreeView - Quick Start Tutorial

This tutorial shows how to use OboutTree control in the web page.

Sample files

See QuickStart Sample to download and build the sample files discussed in this tutorial.


  • Step 1: Add OboutTree control to Visual Studio Toolbox.

    Refer the link to add Obout components to Visual Studio Toolbox.

  • Step 2: Drag and drop the control from the Visual studio Toolbox to the designer.

    Quick Start Image1

  • Step 3: From the control smart tag, click the 'AutoFormat' link.Choose the 'Vista' style and click 'Apply'.

    Quick Start Image1

  • Step 4: Choose '<NewDataSource...'> option from the 'Choose DataSource' link in the control smart tag.

    This sample uses 'Employees' Table in the 'NorthWind.mdf' database.

    Quick Start Image3

    Quick Start Image4

    Quick Start Image5

    Quick Start Image6

    Quick Start Image7

    Quick Start Image8

  • Step 5: Choose 'EditBindings' in the control smart tag to bind the columns with Node.
    • DataSourceColumnID - The field name from a data source to determine the ID of the nodes to bind
    • DataSourceColumnParentID - The field name from a data source to determine the parent ID of the nodes to bind.
    • TextField - The field name from a data source to bind to the Node Text property

    Quick Start Image8

  • Step 6: That's it. Run the page.

    Quick Start Image8

"These are great products! My clients love them."

Tony Maldonado
Seattle, WA

Random testimonial   All testimonials