Creating a Self-Related Data Relation

Before You Begin

You can represent a self-related data model with WebHierarchicalDataSource™. If your data entity contains fields that relate to each other, you can show the self-related data model as a hierarchical view using WebHierarchicalDataSource.

For example, the Employees table of the Northwind data base contains a ReportTo field that specifies the employee id that an employee reports to. You can display the hierarchy of employee order by defining a self-related relationship using WebHierarchicalDataSource.


When creating a self-related data relation, make sure that the relation is not infinitely recursive otherwise no data is displayed.

What You Will Accomplish

You will display the Employees table in a hierarchical fashion in order to show who the employees report to. You will do this using a self-related data relation using the WebHierarchicalDataSource component. The hierarchy of data is displayed in a TreeView control.

Follow These Steps

  1. Create an ASP.NET Webpage.

  2. Drag a ScriptManager component on the form.

  3. Drag a TreeView control on the form.

  4. Drag a WebHierarchicalDataSource component on the form.

  5. Drag a SqlDataSource component on the form.

  6. Configure the SqlDataSource component to connect to the Employees table of the Northwind data base. Retrieve the EmployeeID, LastName, and ReportTo fields.

  7. In the Quick Designer for WebHierarchicalDataSource, click Add View.

  8. Select SqlDataSource1 as the data source.

WebHierarchicalDataSource Creating a Self Related Data Relation 01.png
  1. Click OK.

  2. Click Add Child to add the child data.

  3. Select the same data source, SqlDataSource1, as the child data source.

  4. In the Specify Fields to Join section, leave the EmployeeID field as the parent column and select the ReportsTo field as the child column.

WebHierarchicalDataSource Creating a Self Related Data Relation 02.png
  1. Click Ok. You return to the Quick Design main screen.

  2. Click Apply then OK. WebHierarchicalDataSource is now configured to display the SQL data as a hierarchy.

  3. Click the Smart Tag for the TreeView control.

    1. Select WebHierarchicalDataSource for the data source.

    2. Click on the Edit TreeNode Databindings link. The TreeView DataBindings Editor appears.

    3. Select SqlDataSource1_DefaultView in the Available data bindings section and click Add.

    4. In the properties window, make sure SqlDataSource1_DefaultView is the DataMember and that the TextField property is set to LastName.

    5. Click Apply then OK.

  1. Run the application. You will see a hierarchical tree view that displays employee names nested according to the order of who they report to.

WebHierarchicalDataSource Creating a Self Related Data Relation 03.png