asp.ImageButton OnClick function inside GridView within an updatePanel

Question

I have a GridView which is continually rebound using a timer and is within an updatePanel so the page doesn't refresh continually (each row has a countdown sequence so the gridview needs to continually get updated)

Inside the gridview i have an imagebutton with an OnClick method. Previously to get the OnClick method to fire I would make sure the gridView wasn't in an UpdatePanel and that the pageload databinding of the gridview was in an "If Not IsPostBack".

With the Timer though i can't have the gridview binding an an "If Not IsPostBack" and it needs to be in an UpdatePanel.

Is there a way to use an UpdatePanel and "If Not IsPostBack" and still get the OnClick method to be called?

Thanks

Here's some of the code, if my explanation didn't make complete sense:

UpdatePanel/Timer/GridView

<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Timer ID="timerCountDown" runat="server" Interval="1000" OnTick="timerCountDown_Tick"></asp:Timer>
<asp:GridView ID="gridBuildQueue" runat="server" AutoGenerateColumns="False"
                    GridLines="none" ShowFooter="false" ShowHeader="false" Width="100%">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:ImageButton runat="server" ID="cmdCancelBuild" ImageUrl="~/images/cancel.jpg" OnClick="ImageButton_Click"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
        </asp:GridView>
        </ContentTemplate>
</asp:UpdatePanel>

OnTick timer method:

Protected Sub timerCountdown_Tick(ByVal sender As Object, ByVal e As EventArgs)
    Me.gridBuildQueue.DataBind()
End Sub

ImageButton_Click method (which is currently never called):

Protected Sub ImageButton_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
    Dim imageButton As ImageButton = CType(sender, ImageButton)
    Dim row As GridViewRow = CType(imageButton.NamingContainer, GridViewRow)
    Dim button As ImageButton = DirectCast(row.FindControl("cmdCancelBuild"), ImageButton)
etc...
End Sub

Answer 1

You need to use GridView control events especially - RowCommand event.

<asp:UpdatePanel runat="server">
   <ContentTemplate>
    <asp:GridView 
             ID="gridBuildQueue" 
             runat="server" 
             AutoGenerateColumns="False"
             GridLines="none" 
             ShowFooter="false" 
             ShowHeader="false" 
             Width="100%"
             onrowcommand="gridBuildQueue_RowCommand"
             >
               <Columns>
                <asp:TemplateField>
                 <ItemTemplate>
                   <asp:ImageButton 
                             runat="server" 
                             ID="cmdCancelBuild" 
                             ImageUrl="~/images/cancel.jpg" 
                             CommandName="cmd"/>
                  </ItemTemplate>
                 </asp:TemplateField>
               </Columns>
    </asp:GridView>
   </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="gridBuildQueue" EventName="RowCommand" />
        </Triggers>
    </asp:UpdatePanel>

Code behind:

protected Sub gridBuildQueue_RowCommand(ByVal sender As Object,ByVal e as GridViewCommandEventArgs)
  if e.CommandName="cmd"  Then

   ....
  End If
End sub

In addition to RowCommand event, you must have to add AsyncPostBackTrigger entry for RowCommand event. (Set UpdatePanel.Triggers collection).

DEMO:

Markup

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Timer ID="Timer1" runat="server" Interval="1000">
        </asp:Timer>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

Code-Behind

Dim lst As New List(Of String)
    Protected Sub GridView1_RowCommand(sender As Object, e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
        Label1.Text = DateTime.Now
    End Sub

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            If IsNothing(Session("lst")) Then
                Session("lst") = lst
            End If
            GridView1.DataSource = lst
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub Timer1_Tick(sender As Object, e As System.EventArgs) Handles Timer1.Tick
        lst = Session("lst")
        lst.Add(DateTime.Now.ToString())
        GridView1.DataSource = lst
        GridView1.DataBind()
    End Sub