Building the UI and Binding
to the Rowsets
The next challenge is to have VS generate the appropriate
UI elements and data-binding controls for your
new hierarchical TableAdapter objects. The following
steps let you build these controls using drag-and-drop
techniques.
First, return to VS’s Solution Explorer, and select
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 that the TableAdapter
objects (exposed as DataTables in the Customer-
DataSet) are now shown in a hierarchy as specified by
the DataRelation objects that you defined.
If you don’t see the child DataTables in the
hierarchy as shown in Web Figure 2, you’ve done
something wrong. Just remember, VS can’t set up the
correct data bindings unless you drag objects from the
hierarchical diagram in the Data Sources window. But
you’re not ready to do any dragging just yet. Because
you want the Customers part of the UI to display 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.
First, click the parent DataTable GetCustomersBy-
State. If the Form Designer is the top window, clicking
any of these DataTable columns exposes a drop-down
list that lets you select how you want the column to
be exposed on the form (within limits). The default
behavior is to lay out the columns in a DataGridView
control. To use individual controls, select Details from
the drop-down list.
Let’s say you also want to hide the TimeStamp
column from the user. Because you selected the Details
option, you can do so from the Data Sources window.
Just click the TimeStamp column and select None
from the list if it isn’t the default.
In this example, you also want to expose the Photo
column. Select PictureBox from the drop-down menu for
this column, which will change the icon next to the Photo
column to match your selection. You can also create a
custom UI control and select it from this dialog box.
You’re now ready to drag the GetCustomersBy-
State DataTable to the form. Click, drag, and drop
the DataTable to the upper left corner of the form,
but leave some room for the BindingNavigator and
FillToolStrip that will be generated. So far, VS hasn’t
added any of the TableAdapter classes to the form, only to the project. However, dragging the DataTable
to the form generates five new controls and classes and
adds them to the form, as Web Figure 3 shows. These
added elements include
- The CustomerDataSet, which is a strongly typed
DataSet containing DataTable objects that instantiate
instances of the TableAdapter classes that VS
generates from the Select queries
- The GetCustomersByStateTableAdapter, which is
drawn from the DataSources TableAdapter
- The GetCustomersByStateBindingSource, which
maps the DataSource and the GetCustomersBy-
StateTableAdapter to the bound controls
- The GetCustomersbyStateBindingNavigator, which
exposes a UI element that lets users scroll through
the rowset returned by the Select query; included
in this toolbar are additional controls that can be
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
to invoke the Fill method, which executes the Select
query
Now, you can add the first child DataTable to the
form. In this case, you want to expose the child DataTable
in a DataGridView control, so you don’t have to
change anything on the DataTable drop-down list.
Now comes the tricky part—dragging the GetOrdersByCustomer
child DataTable from the Data Sources
window. Just make sure 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.
Dragging the child DataTable to the
form adds another group of controls and classes to the
form, including another BindingSource, TableAdapter,
BindingNavigator, and FillToolStrip.
Repeat the drag-and-drop process for the GetItems-
ByCustomerOrder DataTable—again, be sure to drag
from the hierarchical DataTable directly beneath its
parent, which is the GetOrdersByCustomer DataTable.
Because this example doesn’t need the Orders or Items
FillToolStrip controls, delete them from the form.
Now, you need to make some changes to the
DataGridView controls because they don’t observe
the “do not show” settings. If you don’t change the
DataGridView controls, the TimeStamp columns will
appear in the UI and cause problems as the grid code
tries to render the binary value that the user shouldn’t
see in the first place. Right-click the Orders DataGrid-
View control, and click Edit columns. Select the Time-
Stamp column in the left-hand list, and set the Visible
property to False in the right-hand dialog box. Repeat
this process for the Items data grid. Note that you can
use this dialog box to reorder columns and set custom
formatting and special behaviors.
You need to make another
subtle but important change
to the generated controls
to help handle the primary
key–foreign key relationships
and the default behavior
of the data-binding mechanism.
Select the GetOrders-
ByCustomerTableAdapter
and GetItemsByCustomer-
OrderTableAdapter, and use
the Properties dialog box
to set the ClearBeforeFill
property to False. However,
leave the GetCustomersBy-
StateTableAdapter object’s
ClearBeforeFill property 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 similar to the one that
Figure 3 shows. However, I tuned the form in Figure 3 to make it easier to read and added a few other features
that I discuss in a moment.
Prev. page
1
2
[3]
4
next page 
