DataGrid
These samples illustrate using the
DataGrid control. These examples use sample data rather than data from a real database. Please see the
Server-Side Data Access section for examples of
DataGrid bound to live data.
Working With DataGrid The DataGrid control displays tabular data and optionally supports selecting, sorting, paging, and editing the data. By default, DataGrid generates a BoundColumn for each field in the data source (AutoGenerateColumns=true). Each field in the data is rendered in a separate column, in the order it occurs in the data. Field names appear in the grid's column headers, and values are rendered in text labels. A default format is applied to non-string values.
The following sample illustrates using a simple DataGrid control.
Defining Columns in DataGrid
You can control the order, behavior, and rendering of individual columns by directly manipulating the grid's Columns collection. The standard column type -- BoundColumn -- renders the values in text labels. The grid also supports other column types that render differently. Any of the column types can be used together with the Columns collection of a DataGrid.
Note that you can use explicitly-declared columns together with auto-generated columns (AutoGenerateColumns=true). When used together, the explicitly-declared columns in the Columns collection are rendered first, and then the auto-generated columns are rendered. The auto-generated columns are not added to the Columns collection.
| Column Name | Description |
| BoundColumn | Lets you control the order and rendering of the columns. |
| HyperLinkColumn | Presents the bound data in HyperLink controls. |
| ButtonColumn | Bubbles a user command from within a row to an event handler on the grid. |
| TemplateColumn | Lets you control which controls are rendered in the column. |
| EditCommandColumn | Displays Edit, Update, and Cancel links in response to changes in the DataGrid control's EditItemIndex property. |
By explicitly creating a BoundColumn in the grid's Columns collection, you can control the order and rendering of each column. The following example shows how to use BoundColumn.
A HyperLinkColumn presents the bound data in HyperLink controls. This is typically used to navigate from an item in the grid to a Details view on another page. In the following example, the value IntegerValue data field is passed as an argument in the URL to another page, and the StringValue data field is used as the display text of the hyperlink.
A ButtonColumn is used to bubble a user command from within a row to an event handler on the grid. In the following example, the "Add To Cart" and "Remove From Cart" commands cause the item from the row where the button was clicked to be added or removed from a simple shopping cart.
With a TemplateColumn, you completely control which controls are rendered in the column, and which data fields are bound to the controls. The following example includes two TemplateColumn objects. The first column renders two LinkButton controls. These bubble commands to the grid's ItemCommand, just as a ButtonColumn does. The last column binds the true/false value to a read-only CheckBox.
The EditCommandColumn is a special column type that supports in-place editing of the data in one row in the grid. EditCommandColumn interacts with another property of the grid: EditItemIndex. By default the value of EditItemIndex is -1, meaning none of the rows (items) in the grid is being edited. If EditItemIndex is -1, an "edit" button is displayed in the EditCommandColumn for each of the rows in the grid.
When the "edit" button is clicked, the grid's EditCommand event is thrown. It's up to you to handle this event in your code. The typical logic sets EditItemIndex to the selected row, and then rebinds the data to the grid.
When EditItemIndex is set to a particular row, the EditCommandColumn displays "update" and "cancel" buttons for that row ("edit" is still displayed for the other rows). These buttons cause the UpdateCommand and CancelCommand event to be thrown, respectively. The following sample demonstrates this functionality.
Editing Data in DataGrid
In the previous example, the EditCommandColumn was used to support in-place editing of a single row of data. When you use EditItemIndex, the grid automatically inserts the values to be edited into TextBox and CheckBox controls.
By using TemplateColumn objects for the fields you want to edit, you can precisely control how the data is edited. In the following example, the Quantity and Gift Wrap fields are editable in all rows. When the "Update Totals" button is clicked, the grid's Items collection is traversed to extract the current values for these fields, and the data source is updated.
Hiding Columns in DataGrid
Each column in the grid has a Visible property. Setting Visible to false hides a column.
Sorting Columns in DataGrid
Data in a grid is commonly sorted by clicking the header of the column you wish to sort. You can enable sorting in DataGrid by setting AllowSorting to true. When enabled, the grid renders LinkButton controls in the header for each column. When the button is clicked, the grid's SortCommand event is thrown. It's up to you to handle this event in your code. Because DataGrid always displays the data in the same order it occurs in the data source, the typical logic sorts the data source, and then rebinds the data to the grid.
The following example shows how to implement simple sorting in DataGrid.
You can customize the grid's sorting behavior by creating the Columns collection and manipulating the SortExpression for each column. (For auto-generated columns, the SortExpression is the same as the data field.) Omitting SortExpression on a column disables sorting by that column.
You can also create an Outlook-style sort button by using a TemplateColumn. Note that the button must also specify the "sort" CommandName. Additionally, it must pass the field by which to sort as a CommandArgument, as shown in the following sample.
Paging in DataGrid
The DataGrid provides the means to display a group of records from the data source (for example, the first 10), and then navigate to the "page" containing the next 10 records, and so on through the data.
You enable paging in DataGrid by setting AllowPaging to true. When enabled, the grid will display page navigation buttons either as "next/previous" buttons or as numeric buttons. When a page navigation button is clicked, the PageIndexChanged event is thrown. It's up to you to handle this event in your code. The most basic logic assigns the CurrentPageIndex to the event argument's NewPageIndex property and then rebinds the data source, as shown in the following example.
The DataGrid has a built-in page navigation control, called the "pager," which displays either as "next/previous" buttons or as a set of numeric page buttons. You can hide the built-in pager user interface and supply your own paging UI.
To change the page, you must set the CurrentPageIndex to the desired page (base 0), and rebind the data source to the grid.
For very large data models, it is expensive to load the entire data source each time the grid is paged. A common alternative is to retrieve the data in page-size chunks, rather than retrieving all of the data and then stepping into the current row.
The DataGrid supports chunking through the AllowCustomPaging and VirtualItemCount properties. If AllowCustomPaging is true, the DataGrid does not calculate a starting display position in the data model based on CurrentPageIndex. Instead, DataGrid displays all of the data in the data model, while its pager reports the current position as page CurrentPageIndex of (VirtualItemCount+PageSize-1)/PageSize. The following example demonstrates this functionality.
Working With DataGrid
RSS Feed (xml)
No comments:
Post a Comment