Multiple child views with RadGridView for WinForms

One of the most wanted features related to hierarchy in RadGridView is the support for hierarchy containing one-to-many relations. Now, this is possible by using tabbed child views. We added the feature in our latest release – Q2 2009.

However, RadGridView is not restricted to show only tables. Child views can be used to display any relevant information (e.g. rich text, picture or even a chart). If fact you can use any RadElement or host a control by using the RadHostItem. In the example below I will demonstrate how to do it.

You should follow a few simple steps:

1. First bind the grid to the desired data source.

this.radGridView1.DataSource = table;

2. Add at least two child templates and bind them.

GridViewTemplate template1 = new GridViewTemplate(this.radGridView1);
Template1.Caption = "Details";
Template1.DataSource = detailsTable;
this.radGridView1.MasterGridViewTemplate.ChildGridViewTemplates.Add(template1);

GridViewTemplate template2 = new GridViewTemplate(this.radGridView1);
template2.Caption = "Performance";
template2.DataSource = chartTable;
this.radGridView1.MasterGridViewTemplate.ChildGridViewTemplates.Add(template2);

3. Add relations to connect the child templates with the master template.

GridViewRelation relation = new GridViewRelation(this.radGridView1.MasterGridViewTemplate);
relation.ChildTemplate = template1;
relation.ParentColumnNames.Add("EmployeeID");
relation.ChildColumnNames.Add("EmployeeID");
this.radGridView1.Relations.Add(relation);

GridViewRelation relation = new GridViewRelation(this.radGridView1.MasterGridViewTemplate);
relation.ChildTemplate = template2;
relation.ParentColumnNames.Add("EmployeeID");
relation.ChildColumnNames.Add("EmployeeID");
this.radGridView1.Relations.Add(relation);

This is enough to show a hierarchy with multiple child views. However, we want to show a chart image. So we will customize the second template a little. In the code below I hide the column headers and row header column. Then I increase the width of the first column (it will hold the chart) and hide all other columns:

template2.AllowRowResize = false;
template2.ShowColumnHeaders = false;
template2.ShowRowHeaderColumn = false;
template2.Columns[0].Width = 600;
for (int i = 1; i < template2.Columns.Count; i++)
{
    template2.Columns[i].IsVisible = false;
}

Finally, CellFormatting event is processed where we embed the chart image:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
   if (e.CellElement.RowInfo.Tag == null)
   {
      chart.Series.Clear();
      chart.Series.Add(GetRowData((GridViewDataRowInfo)e.CellElement.RowInfo));
      e.CellElement.RowInfo.Tag = chart.GetBitmap();
   }
   e.CellElement.Image = e.CellElement.RowInfo.Tag as Image;
   e.CellElement.DrawBorder = false;
   e.CellElement.Text = "";
   e.CellElement.Padding = new Padding(10, 0, 0, 0);
}

The full sample can be found in our demo application (RadGridView->Hierarchy->Tabbed child views).