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:

student marks

Details View

Details View

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

The expected output in Windows Forms will be:

Expected Output

Forrm

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.

    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);  
    6.   
    7.   
    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.

    choose 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));  
    9.   
    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));  
    16.   
    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");  
    22.   
    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);  
    28.   
    29.   
    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);  
    35.   
    36. DataSet dsDataset = new DataSet();  
    37. //Add two DataTables in Dataset  
    38. dsDataset.Tables.Add(dtstudent);  
    39. dsDataset.Tables.Add(dtstudentMarks);  
    40.   
    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];  

  14. Running the code:

    We will get the following screen having expandable rows in the datagrid.

    datagrid
     
  15. Expanding a row to see the details.

    Expanding row
     
  16. Click on DetailsMarks to get the Marks details.

    DetailsMarks
     
  17. Details screen for student_Id=222:

    screen
     
  18. Go to back for Master details.

    Click on the highlighted back button to go to the master detail form.

    master detail form
     
  19. Main form:

    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.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now