Add an Edit Button to a DataGrid

The DataGrid configuration includes an editColumn, allowing inline editing of the row.

An edit button can be added to a DataGrid using the editColumn feature.

With the addition of the edit column, links are added to handle the usual actions of edit, update and delete.

Associated with the editColumn components are event handlers in the code behind to handle these actions.

When the DataGrid row is in the default mode the column item shows the word (or button dependant upon link type) Edit.

Clicking on the edit link changes the row into edit mode. Converting items into text boxes and changing the link edit to the two links Update and Delete.

To add an edit Button to a DataGrid add code to the following:.

• In the DataGrid header
• In the column definitions of the DataGrid add another column
• In the code behind add an event handler for the edit button
• In the code behind add an event handler for the update button
• In the code behind add an event handler for the cancel button
• Ensure that the postback is handled correctly

DataGrid Header

To handle the additional edit events details are added to the DataGrid header.

<asp:datagrid id="grdTeam"
AllowPaging="False"
AutoGenerateColumns="False"
runat="server"
OnUpdateCommand="OnUpdateCommand" 
OnEditCommand="OnEditCommand" 
OnCancelCommand="OnCancelCommand" 
OnDeleteCommand="OnDeleteCommand
">
<Columns>
...
...

Shown below are the column definitions of the DataGrid:

<asp:EditCommandColumn buttontype=”LinkButton” UpdateText=”Update” cancelText=Cancel” EditText=”Edit”></asp:EditCommandColumn>

<asp:datagrid id="grdTeam" Visible="False" GridLines="None" runat="server" AutoGenerateColumns="False"
    cellpadding="4" Borderwidth="0" bordercolor="transparent" width="400px" AllowPaging="True"
    OnUpdateCommand="OnUpdateCommand" 
    OnEditCommand="OnEditCommand" 
    OnCancelCommand="OnCancelCommand" 
    OnDeleteCommand="OnDeleteCommand">
    <EditItemStyle BackColor="#eeeeee" />
    <AlternatingItemStyle BackColor="#cccccc" />
    <ItemStyle Font-Size="10px" Font-Names="Verdana" HorizontalAlign="Left" BackColor="WhiteSmoke" />
    <HeaderStyle CssClass="datagridheader" />
    <PagerStyle CssClass="datagridPage" Mode="NumericPages" />
    <Columns>
        <asp:TemplateColumn HeaderText="Name">
            <ItemTemplate>
                <asp:Label runat="server" Visible="true" Text='<%# DataBinder.Eval(Container, "DataItem.name") %>' ID="Name" />
                <asp:Label runat="server" Visible="false" Text='<%# DataBinder.Eval(Container, "DataItem.TeamId") %>' ID="TeamId" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" Columns="15" Text='<%# DataBinder.Eval(Container, "DataItem.Name") %>' ID="Name" />
                <asp:Label runat="server" Visible="false" Text='<%# DataBinder.Eval(Container, "DataItem.TeamId") %>' ID="TeamId" />
            </EditItemTemplate>
        </asp:TemplateColumn>
        <asp:EditCommandColumn Visible="True" ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel" EditText="Edit" />
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="Delete" Text="Delete" CommandName="Delete" CausesValidation="false" Visible="true" />
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:datagrid>

Edit button event handler

When the edit button is clicked the row is to change to show the update and cancel options.

The row has an index value given by e.Item.ItemIndex.

The index value is assigned to the DataGrid parameter EditItemIndex.

Having set the index for the edit item the DataGrid is bound once more. This time the selected row will be in edit mode, displaying the update and cancel buttons.

Shown below is the subroutine MyDataGridEdit which is handling these actions.

Sub onEditCommand(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
 Try
	grdTeam.EditItemIndex = e.Item.ItemIndex
BindData()
 Catch exc As Exception 'Module failed to load
	ProcessModuleLoadException(Me, exc)
 End Try
End Sub 'doEditCommand

Delete button event handler

To delete an entry the index reference for the row is passed to a subroutine.

Within the delete subroutine the entry reference ID (TeamId) is obtained from a hidden element within the row.

As can be seen there is a test to ensure that the row isn’t in edit mode.

Sub onDeleteCommand(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
 Try
	If grdTeam.EditItemIndex = -1 Then
	   Dim objITeam As New TeamInfo
	   Dim objCTeam As New TeamController
	   objCTeam.DeleteTeam( CType(e.Item.FindControl("TeamId"), Label).Text)
	End If
	BindData()
 Catch exc As Exception 'Module failed to load
	ProcessModuleLoadException(Me, exc)
 End Try
End Sub

Cancel button event handler

If the cancel button is clicked the DataGrid is to revert to the normal view.

In this example the EditItemIndex is effectively unset and the DataGrid once again is rebound using the subroutine BindDataGrid.

Sub onCancelCommand(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
 Try
	grdTeam.EditItemIndex = -1
	BindData()
 Catch exc As Exception 'Module failed to load
	ProcessModuleLoadException(Me, exc)
 End Try
End Sub 'doCancelCommand

Code behind update button event handler

If we are in edit mode and the update button is clicked then this entry is to be updated.

The update subroutine is called, in this instance myDataGridUpdate.

In this example the reference id for the data entry has been stored as a hidden entry in the row. The first table cell has been used.

Sub onUpdateCommand(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
 Try
	If e.CommandName = "Update" Then
	   Dim objITeam As New TeamInfo
	   Dim objCTeam As New TeamController
	   objITeam.Name = CType(e.Item.FindControl("Name"), TextBox).Text
	   objITeam.TeamId = CType(e.Item.FindControl("TeamId"), Label).Text
	   objCTeam.UpdateTeam(objITeam)
	End If
	grdTeam.EditItemIndex = -1
	BindData()
 Catch exc As Exception 'Module failed to load
	ProcessModuleLoadException(Me, exc)
 End Try
End Sub

Below I include

Private Sub BindData()
 Try
	Dim objITeam As New TeamInfo
	Dim objCTeam As New TeamController
	grdTeam.DataSource = objCTeam.GetTeamList(ModuleId, PortalId)
	grdTeam.DataBind()
	grdTeam.Visible = True
 Catch exc As Exception 'Module failed to load
	ProcessModuleLoadException(Me, exc)
 End Try
End Sub