How to: Bind GridControl to Database and Implement Master-Detail Mode at Design Time

• Mar 14, 2021
• 6 minutes to read

This example demonstrates how to bind a data-aware control (XtraGrid, XtraPivotGrid, XtraVerticalGrid, etc.) to a database at design time within Microsoft Visual Studio. Note that specific controls may need additional customization after the control is bound to a data source. For more information, refer to the documentation of the corresponding control.

In this example, a GridControl is bound to a database to represent master-detail relationships.

---

Microsoft Visual Studio introduces a BindingSource component, which simplifies the binding of data-aware controls to data. For information on this component, please refer to the BindingSource component topic in MSDN.

This topic shows how to use a BindingSource component to bind a Grid Control to the “Orders” and “Order Details” tables in the NorthWind database (the nwind.mdb file that ships with the installation of DevExpress controls). These tables are linked by a one-to-many relationship (a single row in the first table can be related to one or more rows in the second table, but a row in the second table can only be related to one row in the first table). In the example below, the grid will represent these tables as master and detail levels (Views).

After you perform the steps in this example, the result will be similar to the following.

Steps 1-8. Binding Grid to Data

1. Start Visual Studio and create a new Windows Forms Application. Drop a Grid Control on the form.

2. Open the Grid Control Tasks pane by clicking the Grid’s smart tag button.

3. Expand the Choose Data Source popup panel and click the Add Project Data Source… link.

4. Select Database and click Next.

5. Select Dataset and click Next.

6. Specify the path and connection settings to the NorthWind database (the nwind.mdb file) using subsequent dialogs.

7. The next page allows you to choose which tables need to be obtained from the database. Select the ‘Orders’ and ‘Order Details’ tables, and then click Finish.

8. The Grid Control should display the ‘Order’ table as the master data table. To bind to this table, click ‘Orders’ in the Choose Data Source popup panel.

If you run your application now, you will notice inactive row expansion buttons, since the ‘Order Details’ table is empty.

The next section will show you how to populate the ‘Order Details’ table data.

Steps 9-11. Populating the Grid with Detail Data.

As you can see, Visual Studio has generated a set of classes that support the ADO.NET architecture.

• nwindDataSet - a DataSet object (a collection of tables that can be related to each other). This generated DataSet contains the OrdersDataTable and Order_DetailsDataTable tables, and specifies a one-to-many relationship between them.
• ordersBindingSource - a BindingSource object that binds the ‘Orders’ table stored in the nwindDataSet to the Grid. This data is displayed as a master View.
• ordersTableAdapter - a TableAdapter object that can communicate with the ‘Orders’ table in the NorthWind database. A TableAdapter object contains methods for getting data from and posting data to a corresponding table in the database.

To populate ‘Order Details’ table data, create another TableAdapter that will communicate with this table.

1. Open the Visual Studio Toolbox window and add the Order_DetailTableAdapter object onto your application form (the solution needs to be built beforehand).

2. Shift to application code view by pressing the F7 key. Notice that the following code already exists.

3. Run the solution. Master rows can now be expanded to view detail rows.

Steps 12-13. Customizing the Grid

1. Hiding Columns

2. Creating a Detail View

3. Other Tasks

Step 16. Posting Data Back to the Database

1. You can run the project and begin editing data. The changes will be saved in the underlying DataTable objects, but they will not be saved in the database. To complete the example, write the code that posts the changes in the OrdersDataTable and Order_DetailsDataTable tables back to the database. The FormClosing event is handled for this purpose.

Result

The following image illustrates the resulting grid at runtime.