An Extensive Examination of the DataGrid Web Control: Part 17

By Scott Mitchell

The 17^th 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.

Read Part 18

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:
	
	
	<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 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.


<asp:datagrid id="dgPopularFAQs" runat="server"
	AutoGenerateColumns="False"
	...>
	
  <Columns>
    <asp:BoundColumn DataField="FAQID" ItemStyle-Width="10%"
			ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" />

    <asp:BoundColumn DataField="CategoryName" HeaderText="Category" />
	    
    <asp:TemplateColumn HeaderText="Question">
      <ItemTemplate>
        <asp:TextBox runat="server" id="txtDescription" Columns="75" 
             Text='<%# Container.DataItem("Description") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>
	    
    <asp:TemplateColumn HeaderText="Submitted By">
      <ItemTemplate>
        <asp:TextBox runat="server" id="txtSubmittedBy"
             Text='<%# Container.DataItem("SubmittedByName") %>' />
      </ItemTemplate>
    </asp:TemplateColumn>

  </Columns>	
</asp:datagrid>

[View a Live Demo!]

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.

Read Part 2!

Article Information
Article Title:	ASP.NET.An Extensive Examination of the DataGrid Web Control: Part 17
Article Author:	Scott Mitchell
Published Date:	December 15, 2004
Article URL:	https://www.4guysfromrolla.com/articles/121504-1.aspx