Lightkeepers: Multiple child views with RadGridView for WinForms

Sent to you by Sparkie via Google Reader:

Multiple child views with RadGridView for WinForms

via DotNetSlackers Latest ASP.NET News by the telerik blogs on 8/4/09

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

Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.