Expandable and Collapsible Rows in DataGrid in C# Winforms

Introduction

Here I will describe how to show expandable/collapsible rows in a datagrid in C#.

This is applicable to those cases where we need to display master and child content/rows.

Example Student Table

In this example we have a list of students and inside we have details of student marks as in the following:



Details View



Our purpose is to display this type of data using C# Windows Forms.

The expected output in Windows Forms will be:





Procedure with code

1. First we need to create a master and child tables.
2. To identify the relationship between tables we should have primary and foreign keys in the tables.
3. Here we are creating a datatable for the master and child tables.
4. Master table (student).
   
   1. //Parent table
   2. DataTable dtstudent = new DataTable();
   3. dtstudent.Columns.Add("Student_ID", typeof(int));
   4. dtstudent.Columns.Add("Student_Name", typeof(string));
   5. dtstudent.Columns.Add("Student_RollNo", typeof(string));
      
5. Child Table (Student Marks).
   
   1. //Child table
   2. DataTable dtstudentMarks = new DataTable();
   3. dtstudentMarks.Columns.Add("Student_ID", typeof(int));
   4. dtstudentMarks.Columns.Add("Subject_ID", typeof(int));
   5. dtstudentMarks.Columns.Add("Subject_Name", typeof(string));
   6. dtstudentMarks.Columns.Add("Marks", typeof(int));
      
6. Understanding the relationship between master and child table.
   
   
   
7. In brief:
   
   1. dtstudent.StudentID = dtstudentMarks.StudentID
8. Adding rows to the master table (Student Table):
   
   1. //Adding Rows
   2. dtstudent.Rows.Add(111, "Devesh", "03021013014");
   3. dtstudent.Rows.Add(222, "ROLI", "0302101444");
   4. dtstudent.Rows.Add(333, "ROLI Ji", "030212222");
   5. dtstudent.Rows.Add(444, "NIKHIL", "KANPUR");
      
9. Adding rows to the child table (Student Marks table):
   
   1. // data for devesh ID=111
   2. dtstudentMarks.Rows.Add(111, "01","Physics", 99);
   3. dtstudentMarks.Rows.Add(111, "02","Maths", 77);
   4. dtstudentMarks.Rows.Add(111, "03","C#", 100);
   5. dtstudentMarks.Rows.Add(111, "01","Physics", 99);
   8. //data for ROLI ID=222
   9. dtstudentMarks.Rows.Add(222, "01", "Physics", 80);
   10. dtstudentMarks.Rows.Add(222, "02", "English", 95);
   11. dtstudentMarks.Rows.Add(222, "03", "Commerce", 95);
   12. dtstudentMarks.Rows.Add(222, "01", "BankPO", 99);
       
10. Adding a master and child table to the dataset:
    
    1. DataSet dsDataset = new DataSet();
    2. dsDataset.Tables.Add(dtstudent);
    3. dsDataset.Tables.Add(dtstudentMarks);
    4. k. Defining relationship between Master and child table
    5. DataRelation Datatablerelation = new DataRelation("DetailsMarks", dsDataset.Tables[0].Columns[0], dsDataset.Tables[1].Columns[0], true);
    6. dsDataset.Relations.Add(Datatablerelation);
11. Adding a Datagrid control in the Windows Forms form.
    
    As per the following screen we can add a datagrid to a Windows Forms form by right-clicking the toolbar then choosing the item.
    
    
    
12. Binding the data:
    
    1. dataGrid1.DataSource = dsDataset.Tables[0];
13. All the code together:
    
    1. private void Form1_Load(object sender, EventArgs e)
    2. {
    3. //Parent table
    4. DataTable dtstudent = new DataTable();
    5. // add column to datatable
    6. dtstudent.Columns.Add("Student_ID", typeof(int));
    7. dtstudent.Columns.Add("Student_Name", typeof(string));
    8. dtstudent.Columns.Add("Student_RollNo", typeof(string));
    10. //Child table
    11. DataTable dtstudentMarks = new DataTable();
    12. dtstudentMarks.Columns.Add("Student_ID", typeof(int));
    13. dtstudentMarks.Columns.Add("Subject_ID", typeof(int));
    14. dtstudentMarks.Columns.Add("Subject_Name", typeof(string));
    15. dtstudentMarks.Columns.Add("Marks", typeof(int));
    17. //Adding Rows
    18. dtstudent.Rows.Add(111, "Devesh", "03021013014");
    19. dtstudent.Rows.Add(222, "ROLI", "0302101444");
    20. dtstudent.Rows.Add(333, "ROLI Ji", "030212222");
    21. dtstudent.Rows.Add(444, "NIKHIL", "KANPUR");
    23. // data for devesh ID=111
    24. dtstudentMarks.Rows.Add(111, "01","Physics", 99);
    25. dtstudentMarks.Rows.Add(111, "02","Maths", 77);
    26. dtstudentMarks.Rows.Add(111, "03","C#", 100);
    27. dtstudentMarks.Rows.Add(111, "01","Physics", 99);
    30. //data for ROLI ID=222
    31. dtstudentMarks.Rows.Add(222, "01", "Physics", 80);
    32. dtstudentMarks.Rows.Add(222, "02", "English", 95);
    33. dtstudentMarks.Rows.Add(222, "03", "Commerce", 95);
    34. dtstudentMarks.Rows.Add(222, "01", "BankPO", 99);
    36. DataSet dsDataset = new DataSet();
    37. //Add two DataTables in Dataset
    38. dsDataset.Tables.Add(dtstudent);
    39. dsDataset.Tables.Add(dtstudentMarks);
    41. DataRelation Datatablerelation = new DataRelation("DetailsMarks", dsDataset.Tables[0].Columns[0], dsDataset.Tables[1].Columns[0], true);
    42. dsDataset.Relations.Add(Datatablerelation);
    43. dataGrid1.DataSource = dsDataset.Tables[0];
    44. }
        
14. Running the code:
    
    We will get the following screen having expandable rows in the datagrid.
    
    
    
15. Expanding a row to see the details.
    
    
    
16. Click on DetailsMarks to get the Marks details.
    
    
    
17. Details screen for student_Id=222:
    
    
    
18. Go to back for Master details.
    
    Click on the highlighted back button to go to the master detail form.
    
    
    
19. Main form:
    
    
    

Conclusion

We have learned how to show data in a datagrid with a master and child relationship.

Also this code can be used directly in a project but you need to change this code depending on requirements.