Display data hierarchy in the RadGridView
Posted by: the telerik blogs,
on 23 Oct 2008 |
View original | Bookmarked: 0 time(s)
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.
| privatevoidClassInfo_Load(objectsender,EventArgse) |
| { |
| //unrelatedsettings |
| classesGrid.MasterGridViewTemplate.AllowAddNewRow=false; |
| classesGrid.MasterGridViewTemplate.AutoSizeColumnsMode=GridViewAutoSizeColumnsMode.Fill; |
|
| using(varsampleDB=newSampleDataDataContext()) |
| { |
| //themainsourcedata |
| classesGrid.DataSource=fromtinsampleDB.Teachers |
| wheret.Classes.Count()>0 |
| selectnew{t.TeacherID,t.Name,t.Subject,ClassSize=t.Classes.Count()}; |
|
| varchildDataTemplate=newGridViewTemplate() |
| { |
| AutoSizeColumnsMode=GridViewAutoSizeColumnsMode.Fill, |
| AllowAddNewRow=false, |
| DataSource=fromcinsampleDB.Classes |
| selectnew{c.TeacherID,c.RoomNumber,c.Student.Name,c.Student.Grade,c.Student.Age} |
| }; |
| classesGrid.MasterGridViewTemplate.ChildGridViewTemplates.Add(childDataTemplate); |
|
| //definetherelationshipbetweenthedatasources |
| varparentChildRelationship=newGridViewRelation(classesGrid.MasterGridViewTemplate); |
| parentChildRelationship.ChildTemplate=childDataTemplate; |
| parentChildRelationship.RelationName="TeachersStudents"; |
| parentChildRelationship.ParentColumnNames.Add("TeacherID"); |
| parentChildRelationship.ChildColumnNames.Add("TeacherID"); |
|
| //addtherelationshiptothegridview |
| 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.
