January 27, 2021
Hot Topics:

Hierarchical TableAdapters 301

  • By William R. Vaughn
  • Send Email »
  • More Articles »

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.

  1. 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.
  2. 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.
  3. Figure 6: The TableAdapter objects shown in a hierarchy.

  4. 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.

  5. 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.
  6. 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.
  7. 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).

    • Click here for a larger image.

      Figure 7: The Form UI is populated by the drag-and-drop operation.

  8. Okay, now you're ready to add the first child DataTable to the form. In this case, you want to expose the child data table in a DataGridView control so you don't have to change anything on the DataTable dropdown list.
  9. Now, here's the tricky part—drag the GetOrdersByCustomer child DataTable from the Data Sources window. But, make sure that you drag the DataTable that's shown in the top hierarchy—not the one from the bottom of the list of DataTable objects in the CustomerDataSet. As before, another group of controls and classes are added to the form including another BindingSource, TableAdapter, BindingNavigator, and FillToolStrip. The new BindingNavigator is wedged in at the top of the form.
  10. Repeat the drag-and-drop process for the GetItemsByCustomerOrder DataTable—again, be sure to drag from the hierarchical DataTable directly beneath its parent—the GetOrdersByCustomer DataTable.
  11. Because this example's UI does not need the Orders or Items FillToolStrip controls, delete them from the Form.
  12. Next, you need to make some changes to the DataGridView controls because they don't observe the "do not show" settings (for some reason). Right-click the Orders DataGridView control and click "Edit columns". Select the TimeStamp column in the left-hand list and set the Visible property to "False" in the right-hand dialog. Repeat this for the Items data grid as well.
  13. You need to make another subtle but very important change to the generated controls to help deal with the PK/FK relationships and the default behavior of the data binding mechanism. Select the GetOrdersByCustomerTableAdapter and GetItemsByCustomerOrderTableAdapter and use the Properties dialog to set the ClearBeforeFill property to False. You leave the GetCustomersByStateTableAdapter object's ClearBeforeFill set to True because you want it emptied of all previous rows whenever the user clicks the Fill button in the FillToolStrip.

Your Form should now look something like Figure 8. Sure, I tuned it up somewhat to make it a bit easier to read.

Click here for a larger image.

Figure 8: The Form UI after the drag-and-drop operations.

Page 3 of 5

This article was originally published on August 8, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date