Ajax UpdatePanels and datalists

I have 2 datalists:

datalist1 (inside UpdatePanel1 with UpdateMode as conditional)

datalist2 (outside UpdatePanel1)

On click of an ImageButton in datalist2, I am executing the datalist2_ItemCommand event handler & adding some data in the database. After which in the same code, I am calling the DataBind() on datalist1 and then calling Update() method on UpdatePanel.

My problem is because of the datalist2_ItemCommand event, a full postback occurs instead of just updating the datalist inside the UpdatePanel1. Is there a way I can just refresh the datalist1 instead of both the datalists getting refreshed?

I read about using Web Service on the net, but have a feeling that I can probably handle the database update in it, but will not be able to access the datalist1 to call its DataBind() event or UpdatePanel1 to call its Update() method in it.

I have already spent a day trying to figure how to make this work...could someone please guide me in the right direction?

Thanks

Hi

I think what is missing is to get Ajax to intecept the postback that is done by datalist2. This is done by adding and asyncpostback trigger for the updatepanel that handles the itemcommand event of datalist2. (how to add an asyncpostpacktrigger is explained herehttp://asp.net/ajax/documentation/live/tutorials/IntroductionUpdatePanel.aspx pretty fare down on the page)

TAG

See this

http://www.asp.net/ajax/documentation/live/tutorials/UsingUpdatePanelControls.aspx

You are right, adding a asyncpostback trigger would help here. However, I have a slightly different issue. Sorry for not mentioning correctly the first time, but I have my 2nd datalist (datalist2) also in a UpdatePanel (UpdatePanel2) & thats when it does not work. If I don't place it in an UpdatePanel, the solution you suggested works.

The reason I need to place the 2nd datalist in an UpdatePanel is because there is another imagebutton called "Delete" in it, which when clicked, deletes the corresponding image in that cell of the datalist2 & refreshes the datalist.

basically, the functionality desired is:

if the main thumbnail image is clicked in the datalist2, then it is added to the list of images displayed in datalist1 (displayed in UpdatePanel1) & if the "Delete" image is clicked, then that thumbnail is removed from datalist2 & so only UpdatePanel2 should be refreshed.

Thanks for you help...

also, the updatemode for UpdatePanel2 is also set to conditional:

Here's how the code looks like:

<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>
<ItemStyle HorizontalAlign="Center" />
<ItemStyle Width="150px" />
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<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>
<ItemStyle HorizontalAlign="Center" />
<ItemStyle Width="150px" />
</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();
}
}

hope this helps...

I think setting the property ChildrenAsTriggers = "false" for UpdatePanel2 solved the problem.

Thanks