ASP.NET utilising click event of imagebutton within datagrid template column

Ok, the easiest way to do this when dropping in a button, ImageButton, or even a combo box for a row?

Ignore the row command approach, and use a regular click event for the given control.

The only "trick" here is that because the control is nested (in a repeater, Listview, GridView, DataGrid etc.), then you don’t have a property sheet for the given control, and thus can’t use the property sheet (or a double click) on the control to create the click event.

However, you are 100% free to add, use and enjoy a click event by typing in markup directly. (and intel-sense will still help you).

I should also point out that a DataGrid is the perhaps the oldest control, and in fact you often not see DataGrid in the tool box.

So, I suggest in most cases to use a GridView. (they are very similar).

And if you "grid" of data has more then a few custom controls, then I suggest using a ListView, as it is far more markup friendly. No worry, and using DataGrid is still ok despite being an older control.

So, so say we have a simple DataGrid like this:

(and note the 2 image buttons).

So, then this:

  <asp:DataGrid ID="GHotels" runat="server" AutoGenerateColumns="false"
     DataKeyField="ID" CssClass="table table-hover" Width="45%" >

      <Columns>
        <asp:BoundColumn HeaderText="First" DataField="FirstName" runat="server" />
        <asp:BoundColumn HeaderText="Last" DataField="LastName" runat="server" />
        <asp:BoundColumn HeaderText="City" DataField="City" runat="server" />
        <asp:BoundColumn HeaderText="HotelName" DataField="HotelName" runat="server" />
        <asp:BoundColumn HeaderText="Description" DataField="Description" runat="server" />

        <asp:TemplateColumn HeaderText="Edit">
            <ItemTemplate>
                <asp:ImageButton ID="cmdEdit" runat="server"
                    ImageUrl="~/Content/edit2.png" Width="48"
                    />
            </ItemTemplate>
        </asp:TemplateColumn>

        <asp:TemplateColumn HeaderText="Delete">
            <ItemTemplate>
                <asp:ImageButton ID="cmdDelete" runat="server"
                    ImageUrl="~/Content/trashcan1.png" width="48"
                    OnClick="cmdDelete_Click"

                    />

            </ItemTemplate>
        </asp:TemplateColumn>

      </Columns>
  </asp:DataGrid>

And code to load the grid looks like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If IsPostBack = False Then
        LoadGrid()
    End If


End Sub

Sub LoadGrid()

    Dim strSQL As String =
        "SELECT * FROM tblHotelsA
        ORDER BY HotelName"

    GHotels.DataSource = MyRst(strSQL)
    GHotels.DataBind()

End Sub

And the result is this:

Ok, so let’s add a delete click event to the image delete button in above.

So, it looks like this from the editor:

So, as above shows, we are allowed and can with ease use standard click events (or other events) for that given control. This means VERY little reason exists to bother with and trying to use the row command. And bonus is we thus have a separate click event for each control and they are not all mumbled up into one event with a bunch of case statements.

In the code behind, we can then pick up the row information like this:

Protected Sub cmdDelete_Click(sender As Object, e As ImageClickEventArgs)

    Dim cmdDel As ImageButton = sender
    Dim gRow As DataGridItem = cmdDel.NamingContainer

    Dim PK As Integer = GHotels.DataKeys(gRow.ItemIndex)

    Dim strSQL As String =
        "DELETE FROM tblHotelsA WHERE ID = @ID"

    Dim cmdSQL As New SqlCommand(strSQL)
    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = PK
    ' MyRstPE(cmdSQL)

    Debug.Print($"Row index click = {gRow.ItemIndex}")
    Debug.Print($"Database PK for row = {PK}")

End Sub

In above, I show how you get the current row (DataGridItem).

In above, I show how you get the database PK value.

In above, I show how you get the row index.

Note the use of "naming" container. This is supported for ALL data bound controls, and returns the current row item.

So, when I click on a given row button, then I have this in the output/debug window:

So, you are free to use regular click events for controls placed in a GridView, ListView, DataGrid etc.

And the above advice also extends to say dropping in a combo box, or other controls. Their events can also be used, but you have to "type in" the event setting directly into the markup since the control is nested, and thus no property sheet is available.

And for completeness, it fast becomes tiring to type code over and over to pull a data table with supplied SQL, so I have some helper routines I used in above, and use throughout the application.

Public Function MyRst(strSQL As String, ByVal Optional strCon As String = "") As DataTable

    If strCon = "" Then
        strCon = My.Settings.TEST4
    End If

    Dim rstData As New DataTable
    Using conn As New SqlConnection(strCon)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
            rstData.TableName = strSQL
        End Using
    End Using
    Return rstData
End Function

Public Function MyRstP(cmdSQL As SqlCommand, ByVal Optional strCon As String = "") As DataTable

    If strCon = "" Then
        strCon = My.Settings.TEST4
    End If

    Dim rstData As New DataTable
    Using conn As New SqlConnection(strCon)
        Using (cmdSQL)
            cmdSQL.Connection = conn
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
        End Using
    End Using

    Return rstData

End Function

Public Sub MyRstPE(cmdSQL As SqlCommand, ByVal Optional strCon As String = "")

    If strCon = "" Then
        strCon = My.Settings.TEST4
    End If

    Dim rstData As New DataTable
    Using conn As New SqlConnection(strCon)
        Using (cmdSQL)
            cmdSQL.Connection = conn
            conn.Open()
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using

End Sub