I have 2 UpdatePanels each with a Datalist in them. Here is my code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DataList2" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="Ods1"BorderStyle="Solid" GridLines="Both" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage1" runat="server"ImageUrl='<imagepath...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:DataList ID="DataList2" runat="server" RepeatColumns="4"DataSourceID="Ods2" BorderStyle="Solid" GridLines="Both"RepeatDirection="Horizontal" OnItemCommand="DataList2_ItemCommand"CellPadding="5">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage2" runat="server"ImageUrl='<imagepath...>' CommandName="ThumbImage"CommandArgument='<passing the id...>' />
<br />
<asp:ImageButton ID="DeleteImage" runat="server"ImageUrl="images/delete.gif" CommandName="DeleteImage"CommandArgument='<passing the id...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
and the code in DataList2_ItemCommand is as follows:
protected void DataList2_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "DeleteImage")
{
//code to delete the image from database
...
this.DataList2.DataBind();
this.UpdatePanel2.Update();
}
else if (e.CommandName == "ThumbImage2")
{
//code to add the thumb image to the table attached to datalist1.
...
...
this.Datalist1.DataBind();
this.UpdatePanel1.Update();
}
}
As you can see in the above code, I want to update the UpdatePanel1 only when the imagebutton "ThumbImage2" is clicked and NOT when the imagebutton "DeleteImage" is clicked in Datalist2. But because Datalist2 is the cause of the AsyncPostBackTrigger for UpdatePanel1, it is updated when either one of the imagebuttons are clicked. Is there a way to change this?
Please help.
You don't want to set the datalist as the trigger, you want to set the individual ImageButtons as the triggers. Remove the triggers from UpdatePanel1, as well as the UpdateMode="Conditional".
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>
Then in the DataList2_ItemDatabound event, add the following:
ProtectedSub DataList2_ItemDataBound(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.DataListItemEventArgs)Handles DataList2.ItemDataBound
Dim ibtnAs ImageButton =CType(e.Item.FindControl("ThumbImage2"), ImageButton)
Dim trggrAsNew AsyncPostBackTrigger
trggr.ControlID = ibtn.ClientID
trggr.EventName ="Click"
UpdatePanel1.Triggers.Add(trggr)
EndSub
In the ItemCommand event, I am executing some server side code for the imagebutton that was clicked in that specific row of datalist based on its id (which I retrieve using e.CommandArgument).
If I use the approach that you mentioned above, how do i retrieve the database id of the image clicked?
Thanks
DataList2.DataKeys.Item(e.Item.ItemIndex)
The solution you suggested works like a charm. I removed the datalist as the trigger & added the imagebutton as trigger in ItemDataBound event. Also, I still execute the server side code in ItemCommand event based on the which button clicked & everything works fine.
Thanks a ton.
