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

AJAX Tabpanel - Runs slow on IE 7.0 but very fast on FireFox?

Folks,

I am using AJAX.net TabContainer control with 5 tabpanels in it. Each tabpanel has an update panel [update mode is "conditional"] and inside the update panel, I have a gridview control [Editable]. Now, I also have a "Save" button in each of the update panels, that will save the data I enter in the "GridView". The idea is, to update only the "current tab" when I click on "Save"

The problem is that, the code runs very fast on FireFox [meaning, the update is almost instantaneous]. However, on IE7, the update takes thrice as much time as the "FireFox". I think the Javascript runs slow on IE7

Any help or thoughts?

-Thanks

Any one from the AJAX Team?

ive experienced the same thing..very slow for IE rendering..3-4 second pause before the page renders to the screen versus FireFox which just pops up the content without a delay.

I also had the same problem. Actually i had two TabContainers on one page and i not checked firefox but it was very slow in IE and for that reason i removed tabcontainer from my code. Any reason for it being slow and any help in making it fast would be appriciated. Thanks.
Same here. I had to load several text areas into about 9 tabs. This text was really slagging IE. I ended up using a dropdownlist to choose which tabpanel to make visible instead of loading them all at once.

Hehehe... back in the bad old days before AJAX, I made tab-panels from the wizard control with some CSS work. Then when the AJAX extensions came along, I just droped the wizard into an update panel, and it worked great... 10 second job. Then I started converting these to the TabContainer / TabPanel when the AjaxControlToolkit came out. I have pretty much learned that I wasted my time because of the perfomance issues... it is "faster" on FireFox, but still has poor performance. Thank god for backups.

I have a similar sitiuation. I have 4 tabpanels, one tab has a selectable gridview and associated formview wrapped in an update panel. The other three tabs contain editable gridviews wrapped in update panels. One of three gridviews has two dropdownlists as columns with 8000+ selections. When I click on edit on a row using IE the row enters edit mode in around 4 seconds. If I then click on update or cancel it takes over 2 minutes to repaint; using Firefox it repaints in 5 seconds.

If I get rid of the update panels all is well in IE. If I leave the update panels and replace the dropdownlists with textboxes all is well in IE. Big dropdowns in updatepanel wrapped gridview columns seems to be a problem in IE. Firefox handles fine.

Any ideas??? I've Googled and tried things for two days to no avail?