An Extensive Examination of the DataGrid Web Control: Part 6

By Scott Mitchell

In Part 1 of this article we examined how to display the data from the Products database table into a DataGrid. In this part we'll look at how to add the functionality to allow the user to edit a particular row in the DataGrid.

- continued -

Allowing the End User to Edit a Row in the DataGrid

To allow the user to edit a row in the DataGrid, we need to provide some means for the user to specify what row they wish to edit. As we saw in Part 3 of this article series, one can use ButtonColumn controls to tie a clickable button to each row of a DataGrid. While we could use this approach to enable editing, it would likely be messy, at best. Fortunately the DataGrid provides a specific control for this functionality, the EditCommandColumn control.

The EditCommandColumn control adds a new column to the DataGrid, placing an Edit button next to each row. The button, when clicked, causes a postback and the EditCommand event to be fired. As we will shortly see, we'll need to write some code for this event handler. For now, though, let's just examine how to add an Edit button to the DataGrid using the EditCommandColumn control. As you can see in the code below, you simply add the EditCommandColumn control like you would a BoundColumn or ButtonColumn control:

<asp:DataGrid id="dgProducts" runat="server" AutoGenerateColumns="False" CellPadding="4" HeaderStyle-BackColor="Black" HeaderStyle-ForeColor="White" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True"> <Columns> <asp:EditCommandColumn EditText="Edit Info" ButtonType="PushButton" UpdateText="Update" CancelText="Cancel" /> <asp:BoundColumn HeaderText="Product ID" DataField="ProductID" ReadOnly="True" /> <asp:BoundColumn HeaderText="Price" DataField="UnitPrice" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:$#,###.##}" /> <asp:BoundColumn HeaderText="Name" DataField="ProductName" /> <asp:BoundColumn HeaderText="Description" DataField="ProductDescription" /> </Columns> </asp:DataGrid>

The EditCommandColumn control has a number of optional properties, such as: ButtonType, which specifies if a hyperlink (LinkButton, the default) or push button (PushButton) should be used; the text for the Edit, Update, and Cancel buttons, EditText, UpdateText, and CancelText; and other miscellaneous display properties, like HeaderText, ItemStyle, etc.

If you read the last paragraph closely you may be a bit surprised that the EditCommandColumn control has UpdateText and CancelText properties - after all, I had only mentioned that the EditCommandColumn control provides an Edit button. More accurately, the EditCommandColumn control provides an Edit button for each row except for the row that is being currently edited. For that row, the EditCommandColumn control shows two buttons, an "Update" and "Cancel" button.

Selecting a Row to be Edited

The DataGrid contains a property called EditItemIndex, which specifies what row of the DataGrid is the row being edited. The DataGrid numbers its rows starting at 0. By default, the DataGrid is not editing any row, so the EditItemIndex, by default, has a value of -1. Since we want to mark a row for editing when its "Edit" button is clicked, we simply need to write some code in the EditCommand event handler, which is the DataGrid event handler that is fired when the EditCommandColumn control's "Edit" button is clicked. This event handler simply needs to set the EditItemIndex property to the row whose "Edit" button was clicked and then rebind the DataGrid data (by calling BindData()). The code for this event handler can be seen below:

Sub dgProducts_Edit(sender As Object, e As DataGridCommandEventArgs) dgProducts.EditItemIndex = e.Item.ItemIndex BindData() End Sub

To wire this event handler up to the EditCommand event, simply specify this in your DataGrid control, like so:

<asp:DataGrid id="dgProducts" runat="server" ... OnEditCommand="dgProducts_Edit" ... > <Columns> ... </Columns> </asp:DataGrid>

Note that with this code when the user clicks the "Edit" button the Web page will be posted back and the DataGrid row whose "Edit" button was clicked will have, in place of the "Edit" button, an "Update" and "Cancel" button. Furthermore, the data values in the cells in the DataGrid for the edited row have automatically changed from a textual value to a value in an editable textbox, as can be seen in the screenshot to the left.

If you are trying this example on your own you may see two discrepancies between the screenshot and what you are seeing on your computer. The first difference you may have noted was that in your example, all of the columns in the row being edited were turned into a textbox, while in the screenshot the ProductID column is not a textbox, thereby making it un-editable. Clearly there are situations where you want to make certain parts of the data un-editable, as with the ProductID, which is a primary key in the Products database table. To make a particular column in your DataGrid un-editable, simply set the ReadOnly property to True for the particular BoundColumn control. That is, the code for the DataGrid in the screenshot contains the following DataGrid definition:

<asp:DataGrid id="dgProducts" runat="server" ... > <Columns> <asp:BoundColumn HeaderText="Product ID" DataField="ProductID" ReadOnly="True" /> ... </Columns> </asp:DataGrid>

You may have also noticed in the screenshot that the row being edited is shaded a different color than the rest. You can specify all sorts of different stylistic features for the row being edited by using the EditItemStyle property of the DataGrid. Simply set this property in the DataGrid control like you would for the HeaderStyle or ItemStyle, that is:

<asp:DataGrid id="dgProducts" runat="server" ... EditItemStyle-BackColor="#eeeeee" ... > <Columns> ... </Columns> </asp:DataGrid>

Now that we've examined how to select a particular row for editing, all that remains is to specify the code that should execute when the user opts to update the edited row or to cancel. We'll examine how to accomplish these two tasks in Part 3 of this article.

Read Part 3!