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

   //Parent table
   DataTable dtstudent = new DataTable();
   dtstudent.Columns.Add("Student_ID", typeof(int));
   dtstudent.Columns.Add("Student_Name", typeof(string));
   dtstudent.Columns.Add("Student_RollNo", typeof(string));

5. Child Table (Student Marks).
   

   //Child table
   DataTable dtstudentMarks = new DataTable();
   dtstudentMarks.Columns.Add("Student_ID", typeof(int));
   dtstudentMarks.Columns.Add("Subject_ID", typeof(int));
   dtstudentMarks.Columns.Add("Subject_Name", typeof(string));
   dtstudentMarks.Columns.Add("Marks", typeof(int));

6. Understanding the relationship between master and child table.
   
   
    
7. In brief:
   

   dtstudent.StudentID = dtstudentMarks.StudentID

8. Adding rows to the master table (Student Table):
   

   //Adding Rows
   dtstudent.Rows.Add(111, "Devesh", "03021013014");
   dtstudent.Rows.Add(222, "ROLI", "0302101444");
   dtstudent.Rows.Add(333, "ROLI Ji", "030212222");
   dtstudent.Rows.Add(444, "NIKHIL", "KANPUR");

9. Adding rows to the child table (Student Marks table):
   

   // data for devesh ID=111
   dtstudentMarks.Rows.Add(111, "01","Physics", 99);
   dtstudentMarks.Rows.Add(111, "02","Maths", 77);
   dtstudentMarks.Rows.Add(111, "03","C#", 100);
   dtstudentMarks.Rows.Add(111, "01","Physics", 99);
   
   
   //data for ROLI ID=222
   dtstudentMarks.Rows.Add(222, "01", "Physics", 80);
   dtstudentMarks.Rows.Add(222, "02", "English", 95);
   dtstudentMarks.Rows.Add(222, "03", "Commerce", 95);
   dtstudentMarks.Rows.Add(222, "01", "BankPO", 99);

10. Adding a master and child table to the dataset:
    

    DataSet dsDataset = new DataSet();
    dsDataset.Tables.Add(dtstudent);
    dsDataset.Tables.Add(dtstudentMarks);
    k. Defining relationship between Master and child table
    DataRelation Datatablerelation = new DataRelation("DetailsMarks", dsDataset.Tables[0].Columns[0], dsDataset.Tables[1].Columns[0], true);
    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:
    

    dataGrid1.DataSource = dsDataset.Tables[0];

13. All the code together:
    

    private void Form1_Load(object sender, EventArgs e)
    {
    //Parent table
    DataTable dtstudent = new DataTable();
    // add column to datatable
    dtstudent.Columns.Add("Student_ID", typeof(int));
    dtstudent.Columns.Add("Student_Name", typeof(string));
    dtstudent.Columns.Add("Student_RollNo", typeof(string));
    
    //Child table
    DataTable dtstudentMarks = new DataTable();
    dtstudentMarks.Columns.Add("Student_ID", typeof(int));
    dtstudentMarks.Columns.Add("Subject_ID", typeof(int));
    dtstudentMarks.Columns.Add("Subject_Name", typeof(string));
    dtstudentMarks.Columns.Add("Marks", typeof(int));
    
    //Adding Rows
    dtstudent.Rows.Add(111, "Devesh", "03021013014");
    dtstudent.Rows.Add(222, "ROLI", "0302101444");
    dtstudent.Rows.Add(333, "ROLI Ji", "030212222");
    dtstudent.Rows.Add(444, "NIKHIL", "KANPUR");
    
    // data for devesh ID=111
    dtstudentMarks.Rows.Add(111, "01","Physics", 99);
    dtstudentMarks.Rows.Add(111, "02","Maths", 77);
    dtstudentMarks.Rows.Add(111, "03","C#", 100);
    dtstudentMarks.Rows.Add(111, "01","Physics", 99);
    
    
    //data for ROLI ID=222
    dtstudentMarks.Rows.Add(222, "01", "Physics", 80);
    dtstudentMarks.Rows.Add(222, "02", "English", 95);
    dtstudentMarks.Rows.Add(222, "03", "Commerce", 95);
    dtstudentMarks.Rows.Add(222, "01", "BankPO", 99);
    
    DataSet dsDataset = new DataSet();
    //Add two DataTables in Dataset
    dsDataset.Tables.Add(dtstudent);
    dsDataset.Tables.Add(dtstudentMarks);
    
    DataRelation Datatablerelation = new DataRelation("DetailsMarks", dsDataset.Tables[0].Columns[0], dsDataset.Tables[1].Columns[0], true);
    dsDataset.Relations.Add(Datatablerelation);
    dataGrid1.DataSource = dsDataset.Tables[0];
    }

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.