Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 21637
  • Last Modified:

HowTo: Trigger UpdatePanel from a GridView TemplateColumn Click

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">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Column1") %>' OnClick="SetTheImage" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <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:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="AvatarGrid" />
    </Triggers>
</asp:UpdatePanel>
0
AaronNance
Asked:
AaronNance
1 Solution
 
nisarkhanCommented:
add your  ImageButton1 into

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

example here... i'm using in my project something similar...
  <Triggers>
 
                                    <asp:AsyncPostBackTrigger ControlID="btnShowVisitors" EventName="Click" />
                                                                     
                                </Triggers>
0
 
AaronNanceAuthor Commented:
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).
0
 
AaronNanceAuthor Commented:
Managed to work around the issue. Thanks for the help.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
KetakiPCommented:
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.
Thanks,
Ketaki
0
 
serutanCommented:
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">
0
 
boda_mithunCommented:
Hello AaronNance:

How did you solve your problem,I am facing the same problem,what work around solution did you come to. Please advise.
0
 
maxlebCommented:
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.!!

Cheers
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now