DataGrid
Working With DataGrid
Defining Columns in DataGrid
Editing Data in DataGrid
Hiding Columns in DataGrid
Sorting Columns in DataGrid
Paging in DataGrid
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.
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. 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.
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.
Each column in the grid has a Visible property. Setting Visible to false hides a column.
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.
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
VB DataGrid1.aspx
[Run Sample] |
[View Source]
Defining Columns in DataGrid
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.
VB DataGrid2.aspx
[Run Sample] |
[View Source]
VB DataGrid3.aspx
[Run Sample] |
[View Source]
VB DataGrid4.aspx
[Run Sample] |
[View Source]
VB DataGrid5.aspx
[Run Sample] |
[View Source]
VB DataGrid6.aspx
[Run Sample] |
[View Source]
Editing Data in DataGrid
VB DataGrid13.aspx
[Run Sample] |
[View Source]
Hiding Columns in DataGrid
VB DataGrid7.aspx
[Run Sample] |
[View Source]
Sorting Columns in DataGrid
VB DataGrid8.aspx
[Run Sample] |
[View Source]
VB DataGrid9.aspx
[Run Sample] |
[View Source]
Paging in DataGrid
VB DataGrid10.aspx
[Run Sample] |
[View Source]
VB DataGrid11.aspx
[Run Sample] |
[View Source]
(VirtualItemCount+PageSize-1)/PageSize. The following example demonstrates this functionality.
VB DataGrid12.aspx
[Run Sample] |
[View Source]