Making a DataGrid Row Editable

DataGrid entries may be edited within the row or by taking the user to a page with a form. By adding commands for the edit functions rows can be made editable.

In row editing of Datagrid entries is best for modifying a few parameters. Too many and the row can become cumbersome.

Enabling the editing of a row adds the form input items into the row populated with the current values. For example the label used for a product name is replaced with a textbox populated with the product name.

Within the DataGrid definition declarations are made for the edit actions of: edit, update, delete and cancel.

<asp:DataGrid id="dtgFruits" runat="Server"
    DataKeyField="FruitID"
    OnEditCommand="mEdit"
    OnUpdateCommand="mUpdate"
    OnCancelCommand="mCancel"
    OnDeleteCommand="mDelete"
    AutoGenerateColumns="False">
</asp:DataGrid>

For each column which is to be editable a display mode and an edit mode is configured.

The code below illustrates a column for the entry name.

<asp:TemplateField  HeaderText="Name" ItemStyle-Width="30%">
  <ItemTemplate>
    <asp:label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Name") %>' Height="50" />
  </ItemTemplate>
  <EditItemTemplate>
    <asp:textbox ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Name") %>' />
  </EditItemTemplate>
</asp:TemplateField>

For the row configuration an EditCommandColumn is used. It is within this column that the edit links will appear, as appropriate according to the edit status of the row. I’ve tucked the entry reference in this column, although it could be included in another of the columns.

</asp:EditCommandColumn>
<asp:TemplateField HeaderText="Action" ItemStyle-Width="10%">
  <ItemTemplate>
    <asp:Label runat="server" Visible="false" Text='<%# DataBinder.Eval(Container, "DataItem.EntryID") %>' ID="EntryID" />
    <asp:LinkButton ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" />
    <asp:LinkButton ID="btnDelete" Text="Delete" runat="server" CommandName="Delete" />
  </ItemTemplate>
  <EditItemTemplate>
    <asp:Label runat="server" Visible="false" Text='<%# DataBinder.Eval(Container, "DataItem.EntryID") %>' ID="EntryID" />
    <asp:LinkButton ID="btnUpdate" Text="Update" runat="server" CommandName="Update" />
    <asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
    </EditItemTemplate>
</asp:TemplateColumn>

To handle the row editing in the code behind page, functions are included associated with each of the edit options. In the functions below BindDtgFruits() is a function which gets the data from the database, for the given page and binds the DataGrid.

Edit DataGrid Row Entry (mEdit)

Clicking on the Edit link runs this function. The function sets the active edit row and rebinds the DataGrid.

Sub mEdit(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
  Try
    dtgFruits.EditItemIndex = e.Item.ItemIndex
    BindDtgFruits()
  Catch
    'lblMessage.Text = "Error in update"
  End Try
End Sub 'mEdit

Cancel DataGrid Row Entry (mCancel)

To revert back to the normal view of the DataGrid. The edit row is reset and again the DataGrid is re-populated.

Sub mCancel (ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
  dtgFruits.EditItemIndex = -1
  BindDtgFruits()
End Sub 'mCancel

Update DataGrid Row Entry (mUpdate)

Causes the row to be updated and returns the DataGrid back to normal in its presentation

Sub mUpdate(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
Try
  If e.CommandName = "Update" Then
    Dim FruitId As Integer = e.Item.Cells(0).Text
    Dim intPrice As String = CType(e.Item.FindControl("Price"), TextBox).Text
    Dim myConnection As SqlConnection
    Dim myCommand As SqlCommand
    Dim myDataReader As SqlDataReader
    Dim strSQL As String strSQL = "
    strSQL = "UPDATE Fruits SET Price = '" & intPrice & "' WHERE FruitId = " & FruitId
    myConnection = New SqlConnection(ConfigurationSettings.AppSettings("MyDSN"))
    myCommand = New SqlCommand(strSQL, myConnection)
    Dim myDataSet As DataSet myConnection.Open()
    myDataReader = myCommand.ExecuteReader()
    myConnection.Close() 'Rebind the DataGrid
    dtgFruits.EditItemIndex = -1
    BindDtgFruits()
  End If
Catch
  'lblMessage.Text = "Error in update"
End Try
End Sub 'mUpdate

Delete DataGrid Row Entry (mDelete)

Deletes the row of data from the database.

Sub mDelete(ByVal sender As Object, ByVal e As DataGridCommandEventArgs)
Try
  dtgFruits.EditItemIndex = -1
  If e.CommandName = "Delete" Then
    '
    'Delete row from DataGrid
    '
  End If
  BindDtgFruits()
Catch
  'lblMessage.Text = "Error"
End Try
End Sub 'mDelete