Displaying Data
So far, we have only touched on form elements that provide the basic framework user navigation, status, commands, and so on. However, the capability to access, display, and edit data from an underlying data store (relational or otherwise) is the real value of an application such as the fictional Contoso CSR application. We touch on the details of working with databases in the next chapter; here, we describe some of the basic controls used to display data in a form.
Hierarchical Data
The TreeView control is ideal for presenting data with hierarchical relationships and is thus a good candidate for housing the list of order records (which can be grouped by different criteria). First, add a SplitContainer control to partition the leftover interior space in the form into two discrete panels. Yet another panel houses the search function for orders; this is docked to the top of the left split panel. A TreeView dock fills the remainder of this leftmost panel, and the right panel houses the data fields (text boxes, labels, radio buttons, and so on) for an individual CSR record.
TreeView controls present data as a list of nodes; each node can serve as a parent for additional nodes. Typically, with applications that front a database, you build the contents of the TreeView by binding to a resultset from the database or by programmatically looping through the resultset and adding to the TreeView’s node list through its application programming interface (API). But you also have control over the TreeView content in the designer by launching the TreeNode Editor.
The TreeNode Editor
The TreeNode Editor (see Figure 20.27) is a dialog box that acts much the same as the Items Collection Editor examined previously. It enables you to add, edit, and remove items from the TreeView control. You launch the editor dialog box by selecting Edit Nodes from the TreeView’s smart tag.
Using the Add Root and Add Child buttons, you can insert new nodes into the tree’s data structure at any given nesting level. Figure 20.27 shows manually inserted nodes with test data so that you can get an idea of what the order list would look like using the company as a parent node and order instances as child nodes under the corresponding company. Each item, or node, in the TreeView consists of two parts: an image and text. The image is optional; if you want to attach an icon to a node, you start by assigning an ImageList control to the TreeView control.
Using an ImageList
ImageList controls function as an image provider for other controls. They maintain a collection of Image objects that are referenced by their ordinal position or key within the collection. Any control that provides an ImageList property can reference an ImageList component and use its images. ListView, ToolStrip, and TreeView are some examples of controls that can leverage the ImageList component.
Microsoft provides a large library of images that you can use with the TreeView or any other control that requires these types of standard graphics, such as toolbars and menus. Search msdn.microsoft.com for “Visual Studio Image Library.”
An ImageList doesn’t have a visual presence on a form; in other words, you can’t see the ImageList itself. Its sole use is as a behind-the-scenes component that feeds images to other controls. Dropping an ImageList onto the designer puts an instance of the component in the component tray. You can then use the Images Collection Editor dialog box to add, edit, and remove the images hosted by the component. Changing the images associated with the image list automatically changes the images used by any controls referencing the ImageList.
Figure 20.28 shows a few images added within the Images Collection Editor. To enable the TreeView to use these images, you have to do two things:
1. Assign the TreeView.ImageList property to point to the instance of the ImageList component (in this case, ImageList1).
2. Set the image associated with a node either programmatically or via the TreeNode Editor dialog box.
With the ImageList component in place and the TreeView dropped in the SplitContainer’s left panel, the form is almost there from a design perspective. The remaining piece is the series of fields that display the data for a record selected in the TreeView control.
You could add this piece just by dragging a bunch of text boxes and labels over into a TableLayoutPanel and then docking the whole mess in the open SplitContainer panel. But because you really want to treat this as one cohesive unit to simplify positioning, eventual data binding, and so on, you instead create a user control for displaying a CSR record.
Tabular Data
The DataGridView control is the premium Visual Studio control for displaying data in a tabular format. It provides a row/column format for displaying data from a variety of data sources. Figure 20.29 shows a DataGridView with its smart tag menu opened; the smart tag menu provides fast access to the column properties of the grid control and enables you to directly bind the DataGridView to a data source.
Data Sources
The DataGridView control supports various possible data sources. For instance, scenarios such as displaying name/value pairs from a collection are supported, in addition to datasets returned from a relational data store. If you select a data source for the grid, a column is added to the grid for every column that appears in the data source, and the row data is automatically provided inside the DataGridView control.
Data can be displayed in the grid control in an “unbound” mode as well; using the grid’s row/column API, you can programmatically define the structure of the grid and add data to it at runtime.
Cell Types
Each cell in a DataGridView functions as if it is an embedded control. Each cell can express the underlying data that it contains in various ways; check boxes, drop-downs, links, buttons, and text boxes are all supported cell types. In addition to the data visualization possibilities, each cell has its own set of events that can be hooked within your code. For example, you can hook the mouse enter and leave events for a specific cell.
We cover this control in depth in Chapter 13, “Working with Databases.”