Create a Master/Detail Form Using Two Windows

Forms DataGridView Controls

The following code example creates a master/detail form using two DataGridView controls bound to two
BindingSource components. The data source is a DataSet that contains the Customers and Orders tables
from the Northwind SQL Server sample database along with a DataRelation that relates the two through the
CustomerID column.
One BindingSource is bound to the parent Customers table in the data set. This data is displayed in the
master DataGridView control. The other BindingSource is bound to the first data connector. The
DataMember property of the second BindingSource is set to the DataRelation name. This causes the
associated detail DataGridView control to display the rows of the child Orders table that correspond to the
current row in the master DataGridView control.
For a complete explanation of this code example, see Walkthrough: Creating a Master/Detail Form Using
Two Windows Forms DataGridView Controls.

using
using
using
using

System;
System.Data;
System.Data.SqlClient;
System.Windows.Forms;

public class Form1 : System.Windows.Forms.Form

{
private DataGridView masterDataGridView = new DataGridView();
private BindingSource masterBindingSource = new BindingSource();
private DataGridView detailsDataGridView = new DataGridView();
private BindingSource detailsBindingSource = new BindingSource();
[STAThreadAttribute()]
public static void Main()
{
Application.Run(new Form1());
}
// Initializes the form.
public Form1()
{
masterDataGridView.Dock = DockStyle.Fill;
detailsDataGridView.Dock = DockStyle.Fill;
SplitContainer splitContainer1 = new SplitContainer();
splitContainer1.Dock = DockStyle.Fill;
splitContainer1.Orientation = Orientation.Horizontal;
splitContainer1.Panel1.Controls.Add(masterDataGridView);
splitContainer1.Panel2.Controls.Add(detailsDataGridView);
this.Controls.Add(splitContainer1);
this.Load += new System.EventHandler(Form1_Load);
this.Text = "DataGridView master/detail demo";
}
private void Form1_Load(object sender, System.EventArgs e)
{
// Bind the DataGridView controls to the BindingSource
// components and load the data from the database.
masterDataGridView.DataSource = masterBindingSource;
detailsDataGridView.DataSource = detailsBindingSource;

GetData();
// Resize the master DataGridView columns to fit the newly loaded data.
masterDataGridView.AutoResizeColumns();

// Configure the details DataGridView so that its columns automatically

// adjust their widths when the data changes.
detailsDataGridView.AutoSizeColumnsMode =
DataGridViewAutoSizeColumnsMode.AllCells;

private void GetData()

{
try
{
// Specify a connection string. Replace the given value with a
// valid connection string for a Northwind SQL Server sample
// database accessible to your system.
String connectionString =
"Integrated Security=SSPI;Persist Security Info=False;" +
"Initial Catalog=Northwind;Data Source=localhost";
SqlConnection connection = new SqlConnection(connectionString);
// Create a DataSet.
DataSet data = new DataSet();
data.Locale = System.Globalization.CultureInfo.InvariantCulture;
// Add data from the Customers table to the DataSet.
SqlDataAdapter masterDataAdapter = new
SqlDataAdapter("select * from Customers", connection);
masterDataAdapter.Fill(data, "Customers");
// Add data from the Orders table to the DataSet.
SqlDataAdapter detailsDataAdapter = new
SqlDataAdapter("select * from Orders", connection);
detailsDataAdapter.Fill(data, "Orders");
// Establish a relationship between the two tables.
DataRelation relation = new DataRelation("CustomersOrders",
data.Tables["Customers"].Columns["CustomerID"],
data.Tables["Orders"].Columns["CustomerID"]);
data.Relations.Add(relation);
// Bind the master data connector to the Customers table.
masterBindingSource.DataSource = data;
masterBindingSource.DataMember = "Customers";
// Bind the details data connector to the master data connector,
// using the DataRelation name to filter the information in the
// details table based on the current row in the master table.
detailsBindingSource.DataSource = masterBindingSource;
detailsBindingSource.DataMember = "CustomersOrders";

}
}

}
catch (SqlException)
{
MessageBox.Show("To run this example, replace the value of the " +
"connectionString variable with a connection string that is " +
"valid for your system.");
}

Walkthrough: Creating a Master/Detail Form

Using Two Windows Forms DataGridView
Controls
Visual Studio 2010

One of the most common scenarios for using the DataGridView control is the master/detail form, in which a
parent/child relationship between two database tables is displayed. Selecting rows in the master table causes
the detail table to update with the corresponding child data.
Implementing a master/detail form is easy using the interaction between the DataGridView control and the
BindingSource component. In this walkthrough, you will build the form using two DataGridView controls
and two BindingSource components. The form will show two related tables in the Northwind SQL Server
sample database: Customers and Orders. When you are finished, you will have a form that shows all the
customers in the database in the master DataGridView and all the orders for the selected customer in the
detail DataGridView.
To copy the code in this topic as a single listing, see How to: Create a Master/Detail Form Using Two
Windows Forms DataGridView Controls.

Prerequisites
Creating the form
To create a master/detail form

1. Create a class that derives from Form and contains two DataGridView controls and two
BindingSource components. The following code provides basic form initialization and includes a
Main method. If you use the Visual Studio designer to create your form, you can use the designer
generated code instead of this code, but be sure to use the names shown in the variable declarations
here.
C#
VB
using
using
using
using

System;
System.Data;
System.Data.SqlClient;
System.Windows.Forms;

public class Form1 : System.Windows.Forms.Form

{
private DataGridView masterDataGridView = new DataGridView();
private BindingSource masterBindingSource = new BindingSource();
private DataGridView detailsDataGridView = new DataGridView();
private BindingSource detailsBindingSource = new BindingSource();
[STAThreadAttribute()]
public static void Main()
{
Application.Run(new Form1());
}

// Initializes the form.

public Form1()
{
masterDataGridView.Dock = DockStyle.Fill;
detailsDataGridView.Dock = DockStyle.Fill;
SplitContainer splitContainer1 = new SplitContainer();
splitContainer1.Dock = DockStyle.Fill;
splitContainer1.Orientation = Orientation.Horizontal;
splitContainer1.Panel1.Controls.Add(masterDataGridView);
splitContainer1.Panel2.Controls.Add(detailsDataGridView);
this.Controls.Add(splitContainer1);
this.Load += new System.EventHandler(Form1_Load);
this.Text = "DataGridView master/detail demo";
}
...
}

2. Implement a method in your form's class definition for handling the detail of connecting to the
database. This example uses a GetData method that populates a DataSet object, adds a DataRelation
object to the data set, and binds the BindingSource components. Be sure to set the connectionString
variable to a value that is appropriate for your database.
Security Note

Storing sensitive information, such as a password, within the connection string can affect the security
of your application. Using Windows Authentication (also known as integrated security) is a more
secure way to control access to a database. For more information, see Protecting Connection
Information (ADO.NET).
C#
private void GetData()
{
try
{
// Specify a connection string. Replace the given value with a
// valid connection string for a Northwind SQL Server sample
// database accessible to your system.
String connectionString =
"Integrated Security=SSPI;Persist Security Info=False;" +
"Initial Catalog=Northwind;Data Source=localhost";
SqlConnection connection = new SqlConnection(connectionString);
// Create a DataSet.
DataSet data = new DataSet();
data.Locale = System.Globalization.CultureInfo.InvariantCulture;
// Add data from the Customers table to the DataSet.
SqlDataAdapter masterDataAdapter = new
SqlDataAdapter("select * from Customers", connection);
masterDataAdapter.Fill(data, "Customers");
// Add data from the Orders table to the DataSet.
SqlDataAdapter detailsDataAdapter = new

SqlDataAdapter("select * from Orders", connection);

detailsDataAdapter.Fill(data, "Orders");
// Establish a relationship between the two tables.
DataRelation relation = new DataRelation("CustomersOrders",
data.Tables["Customers"].Columns["CustomerID"],
data.Tables["Orders"].Columns["CustomerID"]);
data.Relations.Add(relation);
// Bind the master data connector to the Customers table.
masterBindingSource.DataSource = data;
masterBindingSource.DataMember = "Customers";
// Bind the details data connector to the master data connector,
// using the DataRelation name to filter the information in the
// details table based on the current row in the master table.
detailsBindingSource.DataSource = masterBindingSource;
detailsBindingSource.DataMember = "CustomersOrders";
}
catch (SqlException)
{
MessageBox.Show("To run this example, replace the value of the " +
"connectionString variable with a connection string that is " +
"valid for your system.");
}

3. Implement a handler for your form's Load event that binds the DataGridView controls to the
BindingSource components and calls the GetData method. The following example includes code that
resizes DataGridView columns to fit the displayed data.
C#
VB
private void Form1_Load(object sender, System.EventArgs e)
{
// Bind the DataGridView controls to the BindingSource
// components and load the data from the database.
masterDataGridView.DataSource = masterBindingSource;
detailsDataGridView.DataSource = detailsBindingSource;
GetData();
// Resize the master DataGridView columns to fit the newly loaded data.
masterDataGridView.AutoResizeColumns();
// Configure the details DataGridView so that its columns automatically
// adjust their widths when the data changes.
detailsDataGridView.AutoSizeColumnsMode =
DataGridViewAutoSizeColumnsMode.AllCells;
}

Testing the Application

You can now test the form to make sure it behaves as expected.
To test the form

Compile and run the application.

You will see two DataGridView controls, one above the other. On top are the customers from the
Northwind Customers table, and at the bottom are the Orders corresponding to the selected customer.
As you select different rows in the upper DataGridView, the contents of the lower DataGridView
change accordingly.

Next Steps
This application gives you a basic understanding of the DataGridView control's capabilities. You can
customize the appearance and behavior of the DataGridView control in several ways:

Change border and header styles. For more information, see How to: Change the Border and Gridline
Styles in the Windows Forms DataGridView Control.
Enable or restrict user input to the DataGridView control. For more information, see How to: Prevent
Row Addition and Deletion in the Windows Forms DataGridView Control, and How to: Make
Columns Read-Only in the Windows Forms DataGridView Control.

Validate user input to the DataGridView control. For more information, see Walkthrough: Validating
Data in the Windows Forms DataGridView Control.

Handle very large data sets using virtual mode. For more information, see Walkthrough:
Implementing Virtual Mode in the Windows Forms DataGridView Control.

Customize the appearance of cells. For more information, see How to: Customize the Appearance of
Cells in the Windows Forms DataGridView Control and How to: Set Default Cell Styles for the
Windows Forms DataGridView Control.