An Extensive Examination of the DataGrid Web Control: Part 17
By 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 onclick event.
In Part 9 we examined how to enhance the DataGrid's editing
interface by having the editing interface's TextBox receive focus when the page is loaded.
In Part 10 we looked at how to (automatically) add filtering
buttons so that one can filter the data in a DataGrid. In Part 11
we examined how to create a DataGrid Web control with a column of related radio buttons.
In Part 12 we examined how to create a sortable DataGrid
that can be sorted in ascending and descending order. Part 13
examined how to sum up a DataGrid column and have the sum displayed in the footer. Part
14 looked at how to build a master/detail DataGrid. Part 15 looked at
adding paging support to a DataGrid. Part 16 examined how to create an editable
DataGrid with two data-dependent DropDownLists. This 17th part looks at how to create a fully-editable DataGrid.
ASP.NET Data Web Controls Kick Start is author Scott
Mitchell's most recent book, which thoroughly examines three of the most commonly
used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls
can be difficult to master due to their numerous features and capabilities. With this book, you'll
quickly become an expert, learning the gritty details and true capabilities of each.
This 400+ page book explores the topics in this article series in much greater depth, along with
examining various topics and techniques not covered here.
Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination
of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET
books.
Introduction
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 <ItemTemplate>s for each TemplateColumn, and
Creating an "Update All Records" Button Web control that, when clicked, iterates through the DataGrid's items,
sending an UPDATE statement to the database for each record.
In this 17th installment of the article series, we'll step through the process of creating a fully-editable DataGrid. Read on
to learn more!
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:
BoundColumns can also be added implicitly. If you do not set the DataGrid's AutoGenerateColumns property
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 Text property 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.
A row in the DataGrid is marked as editable only if its index matches up to the DataGrid's EditItemIndex property.
When creating an editable DataGrid - one that's editable one row at a time - you typically create an event handler for the
DataGrid's EditCommand event, which fires when the user clicks the Edit button for a particular row. In this
event handler, you'll update the DataGrid's EditItemIndex property 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 <EditItemTemplate>
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 <ItemTemplate>s.
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.
