New to Telerik UI for WinForms? Download free 30-day trial

Tutorial: Binding to Hierarchical Data

RELATED VIDEOS
RadGridView for WinForms Hierarchy Overview
In this video you will learn the various ways you can display hierarchical data in a RadGridView. (Runtime: 12:13)
WinForms RadGridView Binding to Hierarchical Data Tutorial

The following tutorial demonstrates configuring the grid to display multiple tables in a hierarchy. The example below uses the Northwind Categories table as the parent table and lists the appropriate Product table records below each category. The tutorial only uses the two tables, but the example can be extended to larger numbers of child tables.

WinForms RadGridView Hierarchical Data

The task has 3 basic steps:

  1. Configure data sources.

  2. Define child grid view templates, one for each level in the hierarchy.

  3. Define relations between parent and child tables.

Configure Data Sources

  1. Place a RadGridView component on a form. Set the Dock property to Fill.

  2. In the Properties window locate the DataSource property and click the arrow to open the list. Select the Add Project Data Source... link. This step will display the Data Source Configuration Wizard. WinForms RadGridView gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 001

  3. In the Data Source Configuration Wizard, Choose a Data Source Type page, select the Database icon. Click the Next button.

    WinForms RadGridView Data Source Type

  4. In the Database Model page of the Data Source Configuration Wizard choose Database icon. Click the Next button.

    WinForms RadGridView Database

  5. In the Choose Your data Connection page click the New Connection... button. *This step will display the Add Connection dialog. * Add the connection and then click Next.

    WinForms RadGridView New Connection

  6. Click the Next to save the ConnectionString name:

    WinForms RadGridView ConnectionString

  7. In the Choose Your Database Objects page, select the "Categories" and "Products" checkboxes. Click the Finish button to close the Data Source Configuration Wizard.

    WinForms RadGridView Categories and Products

  8. In the Visual Studio Properties window for the grid DataSource property select the "Products" table. * This step will create DataSet, BindingSource and TableAdapter objects for the products table.*

    WinForms RadGridView Products Table

  9. In the Visual Studio Properties window for the grid DataSource property select the "Categories" table. * This step will create DataSet, BindingSource and TableAdapter objects for the categories table.*

    WinForms RadGridView Categories Table 

  10. The project design should look similar to the below image. The DataSource property should be left to point at the binding source of the Categories table. Note the new data components in the component tray under the design surface.

    WinForms RadGridView DataSource Property

Define Child Templates

  1. In the Properties window click the ellipses for the Templates property. This step will display the GridViewTemplate Collection Editor.

    WinForms RadGridView Templates

  2. In the GridViewTemplate Collection Editor, click the Add button to add a child grid view template. In the properties for the new grid view template, use the DataSource property drop down to locate and select the binding source of the data table "Products". Click the OK button to close the dialog.

    WinForms RadGridView Add Child Grid

Define relations

  1. In the Properties window click the ellipses for the grid Relations property. This will display the GridViewRelation Collection Editor.

    WinForms RadGridView Relations

  2. In the GridViewRelation Collection Editor, click the Add button to add a relation. The relation will describe the parent/child relationship between the category data (parent table) and the products (child table) for each category.

  3. Set the RelationName property to "CategoryProduct".

  4. Set the GridViewRelation ChildTemplate property to the child grid view template (created earlier in the GridViewTemplate Collection Editor) using the drop down list.

    WinForms RadGridView ChildTemplate

  5. Set the ParentTemplate property to the MasterTemplate.

  6. Click the ellipses for the ChildColumnName property. This will display the ColumnName Collection Editor.

  7. In the ColumnName Collection Editor click the Add button and set the column Name property to "CategoryID". Click the OK button to close the dialog.

    WinForms RadGridView CategoryID

  8. Click the ellipses for the ParentColumnName property. In the ColumnName Collection Editor click the Add button and set the column Name property to "CategoryID". Click the OK button to close the dialog.

  9. Press F5 to run the application.

See Also

In this article