Edit this page

Binding to a Data Source

This tutorial will show how to bind RadPanelBar to an AccessDataSource:

  1. Locate the "Nwind.mdb" file that appears in the "Live Demos\App_Data" sub-folder of the folder where you installed RadControls "for ASP.NET Ajax".

  2. Drag this file ("Northwind.mdf") to the "App_Data" folder in the Solution Explorer for your project:Nwind MDB

  3. Add the following connection string in the web config file under the connection string section:Connection String

  4. Drag a RadPanelBar component from the toolbox onto your Web page. The RadPanelBar Smart Tag should appear automatically:PanelBar Tasks

  5. In the RadPanelBar Smart Tag, use the Skin drop-down to change the skin for the RadPanelBar to "Vista":Vista Skin

  6. Still in the Smart Tag, open the Choose Data Source drop-down and select New Data Source:
    New Data Source

  7. The Data Source Configuration Wizard appears. In the Select a DataSource Type screen, specify an SqlDataSource and click OK.Choose A DataSourcecType

  8. In the Choose your Data Connection screen, click the Browse button, and select the "NorthwindConnectionString". Then choose Next to continue:
    Choose A Database

  9. In the Configure the Select Statement screen, choose Specify columns from a table or view.

  10. In the Name drop-down, select the "Employees" table.

  11. In the Columns panel, Select the "EmployeeID", "FirstName", and "ReportsTo" fields. Then choose Next to continue:Configure Select

  12. Click the Test Query button to see the data. Then click Finish to exit the Configure Data Source Wizard:Query Test

  13. In the Properties pane for the RadPanelBar component,

    • Set the DataFieldId property to "EmployeeID".

    • Set the DataFieldParentId property to "ReportsTo".

    • Set the DataTextField property to "FirstName":
      Data Fields

  14. Run the application. The panel bar has a single root level item (for the one record with a null value in the "ReportsTo" field). When you expand this item, you can see level 1 items for every record that had Andrew's ID in the "ReportsTo" field. You can expand the item labelled "Steven" to see the level 2 items for records that had Steven's ID in the "ReportsTo" field:

Bound PanelBar

See Also