An Extensive Examination of the DataGrid Web Control: Part 17By Scott Mitchell
|The 17th Part in a Multi-Part Series|
This article is the seventeenth piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In Part 8
we looked at how to add client-side code to a ButtonColumn's client-side |
Along with sorting and paging features, the DataGrid control provides functionality for editing its data, one row at a time. (See Part 6 of this article series for more on the DataGrid's editing capabilities.) While the editing features of the DataGrid are relatively easy to implement, the fact that it constrains the user to editing one row at a time can lead to excessive clicks for scenarios where the user needs to update large amounts of data on the DataGrid. That is, if a user needs to make numerous changes, having to click the Edit button, change the values, and then click Update for each row that needs to be updated can be tedious and time consuming. A better approach for such situations would be to make the entire DataGrid editable, with a single Button at the bottom that, when clicked, would update the entire contents of the DataGrid.
Making an entire DataGrid editable is not exceptionally difficult, especially if you're already familiar with how to customize the editing interface through TemplateColumns, a technique discussed in Part 7 of this article series. Crafting a fully-editable DataGrid merely requires two steps:
- Using a TemplateColumn for each editable DataGrid column and adding
the editable user interface in the
s for each TemplateColumn, and
- Creating an "Update All Records" Button Web control that, when clicked, iterates through the DataGrid's items,
UPDATEstatement to the database for each record.
Making the Entire DataGrid Editable
The first step in creating a fully-editable DataGrid is having the DataGrid render all of its rows as editable. When a DataGrid is rendered in HTML markup each row in the DataGrid has its columns rendered depending on what type of DataGridColumn specified:
- For BoundColumns, the output is simply the value of the specified DataSource field. BoundColumns can be specified
in one of two ways: explicitly or implicitly. Explicitly specified BoundColumns are ones added in the
<Columns>section of the DataGrid's declarative syntax, like:
<asp:DataGrid runat="server" AutoGenerateColumns="False" ...> <Columns> <asp:BoundColumn DataField="DataSourceFieldName ... /> ... <Columns> </asp:DataGrid>
BoundColumns can also be added implicitly. If you do not set the DataGrid's
AutoGenerateColumnsproperty to False, then for each field in the DataGrid's DataSource, there will be a corresponding BoundColumn.
If a particular DataGrid record is marked as editable, then a BoundColumn is rendered as a TextBox Web control with the DataSource's value as the
Textproperty of the TextBox.
- For TemplateColumns, the content in the
<ItemTemplate>is rendered for non-editable rows; for the editable row, the
<EditItemTemplate>(if provided) is used instead. TemplateColumns can only be added explicitly.
EditItemIndexproperty. When creating an editable DataGrid - one that's editable one row at a time - you typically create an event handler for the DataGrid's
EditCommandevent, which fires when the user clicks the Edit button for a particular row. In this event handler, you'll update the DataGrid's
EditItemIndexproperty to the index of the row whose Edit button was clicked. (Refer back to Part 6 for more information on creating an editable DataGrid.)
When creating a fully-editable DataGrid, we need all records to be editable. Rather than use the DataGrid's default
editing capabilities, we need to make each record display its editable interface. We can accomplish this by making each editable
column in the DataGrid a TemplateColumn, defining the editable interface in the
<ItemTemplate>. That is,
in a DataGrid that utilizes the standard editing technique, whatever markup you'd put in a TemplateColumn's
should instead be placed in the
<ItemTemplate> for our fully-editable DataGrid.
The following code and live demo illustrates how to accomplish the task of creating
a fully-editable DataGrid user interface. The DataGrid shown here displays data from the ASPFAQs.com database, and includes
information about the first several FAQs. It lists each of these FAQ's ID, Category, Question, and who submitted the question/answer.
Note that the ID and category here are created as BoundColumns, thereby making them read-only. The Question and Submitted By
columns, however, are editable for each record since they are implemented as TemplateColumns with the appropriate editing interface
defined in their
At this point we've seen how to create a DataGrid that, when displayed, has all rows in a specified column rendered as editable columns. All that remains is providing the user with a means to save their changes en masse. We'll see how to accomplish this in Part 2 of this article.