Thursday, October 23, 2008
by
John Kellar
|
Sometimes it can be valuable to display hierarchy data in a grid. It can allow users to quickly drill down into the data at the click of a button. Below you will see a sample database with just three tables.
Notice that this is very elementary example, but it works well to demonstrate how easy it is to leverage hierarchy within the RadGridView control. I am using LINQToSQL to pull the data from the database. Below you will see the classes created after I did a drag and drop of the tables using Server Explorer in Visual Studio 2008.
Now I can add a new Window Form called "ClassInfo" to my project and drop a RadGridView onto to design surface. I set it the Dock property to Fill so you can see the grid appropriately. I added the following using statement to keep minimize my typing.
using Telerik.WinControls.UI;
The Load event is where I will populate the grid and setup the hierarchy relationship within the RadGridView.
|         private void ClassInfo_Load(object sender, EventArgs e)  |
| Â Â Â Â Â Â Â Â { Â |
|             //unrelated settings  |
|             classesGrid.MasterGridViewTemplate.AllowAddNewRow = false;  |
|             classesGrid.MasterGridViewTemplate.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;  |
| Â |
|             using (var sampleDB = new SampleDataDataContext())  |
| Â Â Â Â Â Â Â Â Â Â Â Â { Â |
|                 //the main source data  |
|                 classesGrid.DataSource = from t in sampleDB.Teachers  |
|                                          where t.Classes.Count() > 0  |
|                                          select new { t.TeacherID, t.Name, t.Subject, ClassSize = t.Classes.Count() };  |
| Â |
|                 var childDataTemplate = new GridViewTemplate()  |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â { Â |
|                     AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill,  |
|                     AllowAddNewRow = false,  |
|                     DataSource = from c in sampleDB.Classes  |
|                                  select new { c.TeacherID, c.RoomNumber, c.Student.Name, c.Student.Grade, c.Student.Age }  |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â }; Â |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â classesGrid.MasterGridViewTemplate.ChildGridViewTemplates.Add(childDataTemplate); Â |
| Â |
|                 //define the relationship between the datasources  |
|                 var parentChildRelationship = new GridViewRelation(classesGrid.MasterGridViewTemplate);  |
|                 parentChildRelationship.ChildTemplate = childDataTemplate;  |
|                 parentChildRelationship.RelationName = "TeachersStudents";  |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â parentChildRelationship.ParentColumnNames.Add("TeacherID"); Â |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â parentChildRelationship.ChildColumnNames.Add("TeacherID"); Â |
| Â |
|                 //add the relationship to the gridview  |
| Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â classesGrid.Relations.Add(parentChildRelationship); Â |
| Â |
| Â Â Â Â Â Â Â Â Â Â Â Â } Â |
| Â Â Â Â Â Â Â Â }Â |
The end result is my grid will now display both the Teacher information and the Students that are in that Teachers classes. See below.
