Hierarchical TableAdapters 301
Building the User Interface and Binding to the Rowsets
The next challenge is to take your new Hierarchical TableAdapter objects and get Visual Studio to generate the appropriate UI elements and data binding controls for them. The following steps build these controls using drag-and-drop techniques.
- Return to the Solution Explorer and choose the Form1 designer. Increase the size of the Form to accommodate several large elements. I won't lead you through the process of refining the Form because I'm sure you know how to do that by now.
- Open the Data Sources window and note there is an important difference—the TableAdapter objects (as exposed as DataTables in the CustomerDataSet) are now shown in a hierarchy as defined by the DataRelation objects that were just created. Figure 6 shows this hierarchy.
- If you don't see the child DataTables in the hierarchy as shown, you've done something wrong. Just remember, when you drag from the Data Sources window, Visual Studio won't be able to set up the correct data bindings unless you drag from the hierarchical diagram.
Because you want the Customers part of the UI to be displayed as individual controls, you need to make some adjustments to the TableAdapter as exposed by the Data Sources window—before you drag it to the Form.
- Click the parent DataTable "GetCustomersByState". If the Form designer is topped, clicking any of these DataTable columns exposes a drop-down list that permits you to choose how you want the column exposed on the form (well, within limits). The default behavior is to lay the columns out in a DataGridView control. To use individual controls, choose "Details" from the dropdown list.
- Because you want to expose the Photo column, choose "PictureBox" from the dropdown menu for this column. This should change the icon next to the Photo column to match this selection.
- You're ready to drag the GetCustomersByState DataTable to the Form. Click, drag, and drop the DataTable to the upper left corner of the form—but leave a bit of room for the BindingNavigator and FillToolStrip that are generated. Note that this generates five new controls and classes and adds them to the Form (as shown in Figure 7). Up to this point, Visual Studio has not added any of the TableAdapter classes to the Form—just to the project. These added elements include:
- The CustomerDataSet, which is a strongly typed DataSet that contains DataTable objects that instantiate instances of the TableAdapter classes generated by Visual Studio from the select queries.
- The GetCustomersByStateTableAdapter, which is drawn from the Data Sources TableAdapter.
- The GetCustomersByStateBindingSource, which maps the Data Source and the GetCustomersByState TableAdapter to the bound controls.
- The GetCustomersbyStateBindingNavigator, which exposes a UI element that permits the user to scroll through the rowset returned by the select query. Included in this toolbar are additional controls used to add, delete and update rows in the bound rowsets.
- The FillToolStrip control, which provides UI elements to capture the input parameters and a button used to invoke the Fill method (which executes the select query).
Figure 7: The Form UI is populated by the drag-and-drop operation.
Your Form should now look something like Figure 8. Sure, I tuned it up somewhat to make it a bit easier to read.
Figure 8: The Form UI after the drag-and-drop operations.
Page 3 of 5