Introduction

Modifying / Editing records in a table is as simple as that with the help of editable datagrid. In this article, we will see, what should we need to create an editable datagrid. Let us start with the datagrid declaration.

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 event "OnCancel", 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 button Delet, we need to declare a button and use the property commandname to specify that, the command Delete.

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

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

When the user clicks the button "Edit", then the corresponding items in the row should show text boxes inorder to accept input from user. The tag, <EditItemTemplate> should be used to declare the control (typically textbox, listbox, radio button, checkbox etc). We are going to declare a textbox which will be showed while 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, which will be showed only, if the user clicks edit button/link. It is to be noted that, we have a DataBinder for this textbox, which will be filled with the value for the corresponding row which 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 a editable row, which is done by setting the property EditItemIndex.

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 an editable item. At this time, the edit button will be replaced with the Cancel and Update button. These are two new buttons which 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 as -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

Well, 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 is 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 a 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 doubts in 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        Back to Article list