Walkthrough: Creating a Master/Detail Form Using Two Windows Forms DataGridView Controls
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.
To create a master/detail form
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.
Imports System Imports System.Data Imports System.Data.SqlClient Imports System.Windows.Forms Public Class Form1 Inherits System.Windows.Forms.Form Private masterDataGridView As New DataGridView() Private masterBindingSource As New BindingSource() Private detailsDataGridView As New DataGridView() Private detailsBindingSource As New BindingSource() <STAThreadAttribute()> _ Public Shared Sub Main() Application.Run(New Form1()) End Sub ' Initializes the form. Public Sub New() masterDataGridView.Dock = DockStyle.Fill detailsDataGridView.Dock = DockStyle.Fill Dim splitContainer1 As New SplitContainer() splitContainer1.Dock = DockStyle.Fill splitContainer1.Orientation = Orientation.Horizontal splitContainer1.Panel1.Controls.Add(masterDataGridView) splitContainer1.Panel2.Controls.Add(detailsDataGridView) Me.Controls.Add(splitContainer1) Me.Text = "DataGridView master/detail demo" End Sub ... End Class
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.
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).
Private Sub 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. Dim connectionString As String = _ "Integrated Security=SSPI;Persist Security Info=False;" & _ "Initial Catalog=Northwind;Data Source=localhost" Dim connection As New SqlConnection(connectionString) ' Create a DataSet. Dim data As New DataSet() data.Locale = System.Globalization.CultureInfo.InvariantCulture ' Add data from the Customers table to the DataSet. Dim masterDataAdapter As _ New SqlDataAdapter("select * from Customers", connection) masterDataAdapter.Fill(data, "Customers") ' Add data from the Orders table to the DataSet. Dim detailsDataAdapter As _ New SqlDataAdapter("select * from Orders", connection) detailsDataAdapter.Fill(data, "Orders") ' Establish a relationship between the two tables. Dim relation As 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 ex As SqlException MessageBox.Show("To run this example, replace the value of the " & _ "connectionString variable with a connection string that is " & _ "valid for your system.") End Try End Sub
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.
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load ' 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 End Sub
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.
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.