Editing a DataGrid Control

Written on: Mar, 6th 2002.

Introduction

Modifying and editing records in a table is as simple as that with the help of editable DataGrid. In this article we will see what we need to create an editable DataGrid. Let us start with the DataGrid declaration.

Declaring a Datagrid Server Control
<ASP:DataGrid id="MyDataGrid" runat="server"
ShowFooter="false"
OnCancelCommand="MyDataGrid_Cancel"
OnUpdateCommand="MyDataGrid_Update"
OnDeleteCommand="MyDataGrid_Delete"
OnEditCommand="MyDataGrid_Edit"
AutoGenerateColumns="false">
<Columns>
<asp:editcommandcolumn edittext="Edit" canceltext="Cancel" updatetext="Update" />
<asp:buttoncolumn text="Delete" commandname="Delete" />
<asp:TemplateColumn HeaderText="FieldName1">
<ItemTemplate>
<asp:Label ID="lblField1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" id="txtField1" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>'/>
</EditItemTemplate>
</asp:TemplateColumn>
</Columns>
</ASP:DataGrid>

What are OnCancelCommand, OnUpdateCommand, OnDeleteCommand and OnEditCommand?

Well, we have a DataGrid control and we will go through the above declaration carefully. We have declared four events in the above DataGrid control such as OnCancelCommand, OnUpdateCommand, OnDeleteCommand and OnEditCommand. You can also see that we invoke a method for each event. For example, for the "OnCancel" event we are invoking a server side method called "MyDataGrid_Cancel." We will look into these methods later.

Creating the Cancel, Edit Update and Delete buttons

Just after the <Column> tag, we need to first create the buttons, such as Edit, Cancel, Update, and Delete. These buttons are very common for any database operation. To declare the Edit, Cancel, and Update button you need to have a EditCommandColumn tag, such as

<asp:editcommandcolumn edittext="Edit" canceltext="Cancel" updatetext="Update" />

And for the Delete button, we need to declare a button and use the property commandname to specify the Delete command.

<asp:buttoncolumn text="Delete" commandname="Delete" />

What should be done when a user clicks the Edit button?

When the user clicks the "Edit" button, the corresponding items in the row should show text boxes in order to accept input from user. The tag, EditItemTemplate, should be used to declare the control (typically a TextBox, ListBox, RadioButton, CheckBox, etc). We are going to declare a TextBox that will be showed when the user clicks the Edit button.

<EditItemTemplate>
    <asp:TextBox runat="server" id="txtField1" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>'/>
</EditItemTemplate>

So we have a EditItemTemplate tag that will be showed only if the user clicks the Edit button/link. It is to be noted that we have a DataBinder for this textbox that will be filled with the value for the corresponding row that was selected by the user. It is this EditItemTemplate which is vital for an Editable DataGrid.

The Edit Event

Sub MyDataGrid_Edit(Sender As Object, E As DataGridCommandEventArgs)
    MyDataGrid.EditItemIndex = CInt(E.Item.ItemIndex)
End Sub

This event will be invoked when user clicks the Edit button/link. We have only one statement in this event. The primary goal of this event is to change the selected row to an editable row, which is done by setting the EditItemIndex property.

The Cancel Event

Public Sub MyDataGrid_Cancel(sender As Object, e As DataGridCommandEventArgs)
    MyDataGrid.EditItemIndex = -1
End Sub

When we click the Edit button, all items in the corresponding row will be changed to be editable. At this time, the Edit button will be replaced with the Cancel and Update buttons. These are two new buttons that will be shown when the user clicks the Edit button. When the user clicks the Cancel button, we want to remove the editable columns. This is achieved by setting the EditItemIndex to -1.

The Update Event

Public Sub MyDataGrid_Update(sender As Object, e As DataGridCommandEventArgs)
    Dim strDestination As String = CType(e.Item.FindControl("txtField1"), TextBox).Text
...................
.........
...
End Sub

When the user clicks the Edit button, the selected row will be changed to an editable item. Then we can enter the new values for the editable columns. The values entered are retrieved using the statement
CType(e.Item.FindControl("txtField1"), TextBox).Text.

Here we use the FindControl method which retrieves the value for the control name passed. Then we can have any statement inside this update event. We can invoke a stored procedure or invoke an inline query. It is all up to us.

Sample Code

Finally, here is a sample aspx page which talks about the editable DataGrid. Click here to download the sample code In this example I have a DataGrid with two columns. Both columns are editable. You can also see that I have used a hidden field to store the original values for the column. If you have any questions about this, please let me know.

Links

DataGrid and Checkboxes
How to capture a Double Click event in DataGrid?
Checkbox Web Server Control
Retrieving Images from SqlServer in ASP .NET
Retrieving Images from SqlServer and displaying it in DataGrid

Send your comments to das@aspalliance.com