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

KV Prajapati · Accepted Answer · 2011-11-22T04:11:34.117

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

ok, i've just changed to using the rowCommand instead of OnClick but the same thing is happening, the gridBuildQueue_RowCommand method is never being called. Will the updatePanel be interfering with this? thanks for your help — jdtaylor, Nov 22 '11 at 02:31
@jdtaylor - You need to set "triggers" collection of update panel. — KV Prajapati, Nov 22 '11 at 02:48
Thanks, I've added the trigger and that allows the rowCommand to be called now, but because I don't have an "If Not IsPostBack" around my first DataBind() of the gridview i'm receiving an invalid postback/callback error (error is copied below). If i add the "If Not IsPostBack" then the error page doesnt appear, but the gridview never gets rebound by the timer. any ideas? thanks! — jdtaylor, Nov 22 '11 at 03:36
@jdtaylor - You have to add OnTick event of timer into the Triggers collection. — KV Prajapati, Nov 22 '11 at 03:50
hmm, doesn't seem to be working. I've added "" and "" for the triggers, adding the timer one hasn't made any difference and the gridview still doesn't get rebound when "If Not IsPostBack" is in. The error that appears when i take the "If Not IsPostBack" out is: "Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page." — jdtaylor, Nov 22 '11 at 04:04
@jdtaylor - I've added a working sample markup and code behind in my post. — KV Prajapati, Nov 22 '11 at 04:12

asp.ImageButton OnClick function inside GridView within an updatePanel

1 Answers1