Edit this page

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)
gridview-hierarchical-grid-binding-to-hierarchical-data 001

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.

gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 020

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.
    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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 002

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

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 003

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 004

  6. Click the Next to save the ConnectionString name:

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 009

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 010

  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.*

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 011

  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.*

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 012 

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 013

Define Child Templates

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

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 014

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 015

Define relations

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

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 016

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 019

  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.

    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 017

  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