Telerik blogs

Display data hierarchy in the RadGridView

by Nikolay Diyanov
October 23, 2008 Desktop, WPF 0 Comments


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.

image

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.

image

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.

image

XAML
About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Comments

Comments are disabled in preview mode.