Understanding the GridView Control
Understanding the GridView Control
The GridView control is used on Web form applications to display data in a tabular, rows-and-columns format. The GridView renders in the browser as an HTML table. Earlier grid controls were difficult to customize without having to dive deep into HTML and JavaScript, but the GridView greatly simplifies most customization tasks. The GridView even makes it easy to configure features such as paging, sorting, and editing without having to write much code, if any.
The basic structure of the GridView is similar to that of the DataGridView and is shown in Figure 8-1. The GridView object consists of a collection of rows and columns. The Rows property consists of a collection of GridViewRow objects. Each GridViewRow object inherits from the TableRow object, which contains a Cells collection. The Cells collection that the GridViewRow inherits is a collection of objects that derive from the DataControlFieldCell class. The Columns property consists of a collection of objects that inherit from the DataControlField class. Although the GridViewRow object holds the collection of cells, each DataControlField object provides the behavior to initialize cells of a specific type in its InitializeCell method. Inherited classes override the InitializeCell method. The GridView object has an InitializeRow method that makes calls to the overridden InitializeCell method when the row is being created.
Figure 8-1: The basic structure of the GridView consists of a collection of rows and columns.
The DataControlField class hierarchy is shown in Figure 8-2. The derived classes are used to create a DataControlFieldCell with the proper contents. Remember that you don't define cell types for your GridView object, you define column types and your column object supplies a cell object to the row using the InitializeCell method.
Figure 8-2: The DataControlField class hierarchy shows the different column types that are available in a GridView object.
Formatting with Styles
You use styles to format the GridView object the same way as discussed in the previous chapter for the DataGridView object. Figure 8-3 shows the style hierarchy.
Figure 8-3: The GridView object style hierarchy
You can use the RowCreated and RowDataBound events to control the style programmatically. You can access the Cells collection on the newly created row to apply a style to a single cell in the row. The RowCreated event takes place first, but the data is not available at this time. Use the RowDataBound event when you need to apply a different style to a cell based on the data in the cell. These events fire after the styles have been applied, which means you can override any existing styles. Applying a different style to a cell based on the data in the cell allows you to apply business rules to determine whether a cell should stand out from other cells (such as making a negative "quantity on hand" number red, but only when the item sells more than one per month).
Binding to a Data Source
The GridView can be easily bound to a data source at design time. Microsoft Visual Studio reads your data source and populates the columns collection. You can select or create the data source by dragging a GridView object to the Web form and then clicking the smart tag arrow on the top right of the GridView object to reveal the GridView Tasks window (Figure 8-4). From the Choose Data Source drop-down list, you can select the New Data Source item.
Figure 8-4: The GridView Tasks window, where you can create a new data source that will bind to the GridView object
