Add a Delete Button to a GridView Row

An ImageButton can be added to a GridView row, with an associated function to delete the selected entry from the database.

The added delete button requires supporting code in the associated VB code page and the delete button with a confirmation alert on the html .ascx page.

GridView Delete Button

The button is added to each row, as a part of the TemplateField. The TemplateField defines a column of the GridViewOne or more items are included within the TemplateField. These can be hidden providing information to be used within the row creation function and the function supporting the clicking of the delete button.

In the code below the image source and size are set. The parameters CommandArgument and CommandName are used to pass information related to which type of button has been clicked and an entry reference.

<asp:TemplateField ItemStyle-Width="60" ItemStyle-Wrap="false">
  <ItemTemplate>
    <asp:ImageButton runat="server" ImageUrl='~/DesktopModules/VNTweb/Fruit/images/icon_delete.gif' Height="24" ID="imgDelete" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.FruitId").ToString %>' CommandName="DeleteFruit" Tooltip="Delete this item" />
  </ItemTemplate>
</asp:TemplateField>

CommandArgument

CommandArgument provides a unique value reference for the row, often this is the unique identifier for the database entry. This can then be used within the function performing the deletion.

In the example above the unique reference for the database table FruitId is used.

CommandName

The CommandName is used subsequently to confirm that the button clicked was denoted as delete.

GridView Header

The additional code for the delete button is to specify the functions to be used to handle the clicking of the delete button and to a confirmation pop-up. The functions added are OnDeleteCommand and OnItemCreated respectively.

The GridView header looks like:

<asp:GridView ID="gdvFruit" runat="server"
  AllowPaging="false"
  AllowSorting="true"
  AutoGenerateColumns="false"
  GridLines="none"
  Width="100%"
  border="0"
>

OnItemCreated Event Handling

This function is run each time a row is created.

With the function, items within the row can be modified and adapted as the row is prepared. Making use of database data hidden within the row.

I have used the function for the addition of a confirmation trap to the delete button, ensuring that accidental clicking on the button doesn’t action the delete and remove that row of information.

Public Sub dtgFruit_ItemDataBound(ByVal sender As Object, ByVal e As GridViewItemEventArgs)
  If Row.RowType = ListItemType Then
    CType(e.Item.FindControl("Delete"), LinkButton).Attributes.Add("onclick", "return confirm('Are you sure you want to delete this record?');")
 End If
End Sub 'gdvFruit_ItemDataBound

To ensure that the ItemDataBound function only acts on item rows, not the header or footer, a clause is added, testing to ensure that the row is of type ListItemType.

If the ItemDataBound function is already included the extra row can be supplemented. in which case you simply need to add the extra line of code.

Delete Function

The function gdvFruit_ActionFruit below handles the clicking of the action buttons. In this example only the delete button is shown.

In the example given a test is made on the CommandName to see whether it was the delete button which was clicked. This allows more than one action button in the row, edit perhaps.

The connection is prepared with the database and using the passed unique entry reference the the row is deleted.

Lastly the index is reset and the GridView re-bound.

Resetting the index avoids attempting to access a page outside those available. Alternatively the page should be calculated.

Sub gdvFruit_ActionFruit(ByVal sender As Object, ByVal e As GridViewCommandEventArgs) Handles gdvFruit.RowCommand
  Try
    Dim FruitId as integer
    FruitId = Convert.ToInt32(e.CommandArgument)    

    If e.CommandName = "DeleteFruit" Then
      Dim mytable_id As Integer = e.Item.Cells(0).Text
      Dim myConnection As SqlConnection
      Dim myCommand As SqlCommand
      Dim myDataReader As SqlDataReader
      Dim strSQL As String
      strSQL = "DELETE FROM tblfruit WHERE ID=" & FruitId
      myConnection = New SqlConnection(ConfigurationSettings.AppSettings("MyDSN"))
      myCommand = New SqlCommand(strSQL, myConnection)
      Dim myDataSet As DataSet
      myConnection.Open()
      myDataReader = myCommand.ExecuteReader()
      myConnection.Close()
    End If

    gdvFruit.EditItemIndex = -1
    BindFruit()
  Catch
    msgGdvFruit.Text = "Error"
  End Try
End Sub 'gdvFruit_Delete