HowTo: Trigger UpdatePanel from a GridView TemplateColumn Click

Posted on 2007-10-19
Last Modified: 2010-10-01
How do I trigger my AJAX UpdatePanel when the user clicks an ImageButton(ImageButton1) thats embedded in my GridView as a TemplateColumn? The code pasted below seems to work as expected the first time the User clicks an image, only refreshing the contents of the UpdatePanel. But every time the User clicks an image after the first, it does a full page postback.

<asp:GridView ID="AvatarGrid" runat="server" Height="300px" Style="z-index: 100; left: 0px;
    position: absolute; top: 0px" AutoGenerateColumns="False">
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Column1") %>' OnClick="SetTheImage" />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <asp:Panel ID="AvatarPanel" runat="server" Height="148px" Style="z-index: 121; left: 8px;
            position: absolute; top: 212px" Width="324px">
            <asp:Label ID="Label12" runat="server" Font-Bold="True" Style="z-index: 100; left: 0px;
                position: absolute; top: 0px" Width="144px">Your Profile Avatar:</asp:Label>
            <asp:Label ID="lblAvatarName" runat="server" Font-Bold="True" Style="z-index: 101; left: 148px;
                position: absolute; top: 0px" Width="176px"></asp:Label>
            <asp:Image ID="imgAvatar" runat="server" Style="z-index: 102; left: 0px; position: absolute; top: 20px" />
        <asp:PostBackTrigger ControlID="AvatarGrid" />
Question by:AaronNance
    LVL 7

    Accepted Solution

    add your  ImageButton1 into

            <asp:PostBackTrigger ControlID="AvatarGrid" />
            <asp:PostBackTrigger ControlID="ImageButton1" />

    example here... i'm using in my project something similar...
                                        <asp:AsyncPostBackTrigger ControlID="btnShowVisitors" EventName="Click" />
    LVL 1

    Author Comment

    Adding ImageButton1 to the Triggers generates the following error....

    A control with ID 'ImageButton1' could not be found for the trigger in UpdatePanel 'UpdatePanel2'.

    It's my understanding that this is because ImageButton1 is rendered with a different name/id since it is part of the GridView and is created at run-time for each row of data that the GridView needs (allowing each control in the GridView to have a unique id).
    LVL 1

    Author Comment

    Managed to work around the issue. Thanks for the help.

    Expert Comment

    Even i want to avoid postback once i click inside the textbox which is part of the template column of the gridview.
    So if you share the solution then it would be nice.

    Expert Comment

    Regarding the solution. I believe that since the trigger is outside of the UpdatePanel, the UpdatePanel must have  UpdateMode="Conditional".

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

    Expert Comment

    Hello AaronNance:

    How did you solve your problem,I am facing the same problem,what work around solution did you come to. Please advise.

    Expert Comment

    If that could help, you only have to trigger the GridView itself and then link button or image button within the gridview  will trigger in the right updatepanel.!!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now