RadControls for WinForms
Contents

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 two basic steps:

  1. Configure datasources.
  2. Define child grid view templates, one for each level in the hierarchy.
  3. Define relations between parent and child tables.

Configure Datasources

  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.
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 004
  6. In the Add Connection dialog click the Change... button. This step will display the Change Data Source dialog.
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 005
  7. Select the Microsoft Access Database File data source. Click the OK button to close the Change Data Source dialog.
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 006
  8. Click the Browse button of the dialog to navigate to a database file. After a file is selected, click the OK button to continue.
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 007
  9. Click the Next button of the dialog that appears and Next button of the next dialog page to save the ConnectionString name:
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 008
    gridview-hierarchical-grid-tutorial-binding-to-hierarchical-data 009
  10. 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
  11. 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
  12. 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
     
  13. The project design should look similar to the screenshot below. The RadGridView 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 datatable "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 step 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 grid view MasterTemplate.
  6. Click the ellipses for the ChildColumnName property. This step 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.