Datacentric Focus: Adding a Second Grid and Navigation Control

Datacentric Focus: Adding a Second Grid and Navigation Control

To provide your users with a data-rich user interface containing multiple database tables, you should consider adding a second data grid view object to your form. After you have established a dataset in the Data Sources window, it is relatively straightforward to add an additional DataGridView control bound to a second table within the dataset. The only tricky part is learning how to add a second navigation bar and setting its BindingSource property to the underlying binding source object. You'll give it a try in the following exercise.

Bind a second DataGridView control to the Classes table

1. Open the Data Sources window, if it is not currently visible.

2. Drag the Classes table from the Data Sources window to the right side of the form.

   Visual Studio creates a second data grid view object named ClassesDataGridView on the form.

3. Right-click the ClassesDataGridView object, and then click the Edit Columns command.

   The Edit Columns dialog box opens.

4. Select and remove the ClassID, SectionNumber, Term, Units, Year, Location, and Notes columns.

   The form is not large enough to display all the columns in the table, so for this example I want you to pare down the list. When you're finished, the ClassName, Department, Prof, and DaysAndTimes columns are left, as shown in the following illustration:

   

5. Click OK to close the Edit Columns dialog box.

6. Move and resize the ClassesDataGridView object on the form so that all four rows are displayed at once. You might need to move and resize the form, and possibly also the InstructorsDataGridView object, to be able to display all four rows.

7. Change the form's Text property to “The Instructors and Classes Tables”.

   Your form looks something like the following illustration. (Because I am running Visual Studio at a screen resolution of 800 x 600, I needed to hide many of the Visual Studio tool windows to show the form.)

   

   Notice that Visual Studio has also added two new objects to the component tray: a ClassesBindingSource object and a ClassesTableAdapter object. These two items are intermediary components that move data between the ClassesDataGridView object, the StudentsDataSet dataset, and the Classes table in the underlying Students database.

Now you'll add a second navigation bar to the form to provide navigation services and properties related to the Classes table and the second grid. The second bar is necessary because the first (InstructorsBindingNavigator) is bound only to the InstructorsDataGridView object.

Link a BindingNavigator control to the ClassesDataGridView object

1. Double-click the BindingNavigator control on the Data tab of the Toolbox.

   Visual Studio adds a binding navigator object named BindingNavigator1 to the component tray, and adds a second navigation bar to the top of your form.

2. In the Properties window, change the Name property of the new BindingNavigator1 object to “ClassesBindingNavigator”.

   Using this name will make it clearer which binding source and table adapter your new navigation bar is linked to.

3. Change the BindingSource property of the ClassesBindingNavigator object to ClassesBindingSource.

   If you click the BindingSource arrow, the Properties window shows the names of the two valid binding sources in the program, as shown in the following illustration:

   

   Now that a link has been established between the second navigation bar and the binding source object representing the Classes table, your program is ready to run.

4. Click the Save All button to save your changes.

5. Click the Start Debugging button on the toolbar.

   Visual Studio runs the DataGridView Sample program in the IDE. You see two grids and two navigation bars, as shown in the following illustration:

   

6. Click the Move Last button on the navigation bar that contains 15 records.

   The last class name in the Classes table, Deviant Behavior (Psychology), is highlighted. Your new navigation bar works, and you have complete access to the columns you selected in the Classes table.

7. Use both navigation bars in tandem to highlight different records in the two database tables.

   The two data grid view objects work independently, providing you access to exactly the database records that you want to see. You can appreciate how useful this access might be for a user who needs to compare longer tables containing sets of information that are closely related. If the data is further filtered by SQL SELECT statements, the application quickly becomes quite powerful.

8. When you're finished experimenting with the two tables and navigation bars, click the Close button to close the DataGridView Sample application.