asked on

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>

ASKER CERTIFIED SOLUTION

nisarkhan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AaronNance

ASKER

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).

AaronNance

ASKER

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

KetakiP

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

serutan

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">

boda_mithun

Hello AaronNance:

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

maxleb

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