Multiple child views with RadGridView for WinForms
Posted by: the telerik blogs,
on 05 Aug 2009 |
View original | Bookmarked: 0 time(s)
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).