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 Timer/UpdatePanel problem

Hi,

I have a page with 2 updatepanels and a Timer inside one of them. One is set to have children as Triggers (the one containing the timer); the other I update using the updatePanel.update() function inside the timer tick event. For some reason, the entire page is being reloaded on each tick (ie: the page_load event fires). This has just started happening - it was working perfectly before.

Can anyone offer any help?

Here is some code: ;)

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" Visible="False">
<ContentTemplate>
<asp:Timer id="Timer1" runat="server" OnTick="Timer1_Tick" Interval="6000" Enabled="False">
</asp:Timer>
<BR />
<!--content here -->
</ContentTemplate>
</asp:UpdatePanel>

...

<asp:UpdatePanel ID="SummaryDataUpdatePanel" runat="server" Visible="False" UpdateMode="Conditional" ChildrenAsTriggers="False"></asp:UpdatePanel>

Thanks,
kreid

Problem solved:

http://weblogs.asp.net/scottgu/archive/2006/12/10/gotcha-don-t-use-xhtmlconformance-mode-legacy-with-asp-net-ajax.aspx

AJAX timeout

Hi,

Iam having 3 updatepanels.2 updatepanels consists of 2 treeview.One updatepanel consists of reportviewer .If i leave page for 5 min .Thnx i try toAJAX TimeOut.Can any1 tell how to increase timeout option r else remove this timeout

Hi ,

Omar has very good explanation of this issue.

http://www.codeproject.com/Ajax/aspnetajaxtips.asp

Hi ,

Can u plz tell me Wht changes shud be done @. Web.config .r else is there any necessity for javascript for increase time options .Plz tell me

Hi ,

Can u plz tell me Wht changes shud be done @. Web.config .r else is there any necessity for javascript for increase time options .Plz tell me

You should just be able to set the AsyncPostBackTimeout property on your ScriptManager. For example, to set the timeout to five minutes (300 seconds), use:

<asp:ScriptManager ID="sm" runat="server" AsyncPostBackTimeout="300" />

Hi,

I dont wanna give timeout option .It shud run for max Amount time bcoz i trying to run reports in Updatepanel ,which takes more time.Plz tell me How to solve this issue

AJAX TabContiners and UpdatePanels

Hi,

I have a page where I have an AJAX TabContainer stored within an UpdatePanel. When I view the page in either IE or FireFox the TabContainer's TabPanels aren't rendering correctly in that there is no clickable panel header or outline of the TabContainer. The controls I have placed in the tab panel appear okay however.

When I move the TabContainer out of the UpdatePanel everything is okay, however I need it to be in the UpdatePanel.

Has anyone else encountered this problem and if so is there a solution or should I just forget about using the TabContainer?

Thanks in advance.

Can you post the markup that you are using to do this.

I've used the same layout you mentioned before with no problem. I've used an updatepanel containing a tab container with tabs with no problem.

Hi

I have adapted the code in the attached blog by Shawn Burke which does demonstrate that a Tabcontainer in an update panel works and works well. Thanks to Shawn.

http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

However, I do have another problem with the Tabcontainer and update panel using the methodology described in the blog. I can get the tabcontainer to work with formview but when I try a reportviewer with parameters I get Javascript errors. I created a test page without the javascript (parameters in onload event) and the reportviewer works fine.

The errors are:

'this.m_clientController' is null or not an object

and

'ClientControllerctl00_ContentPlaceHolder1_TabContainer1_...' is null or not an object

Appreciate any help with this.

Thankyou

Michael

Hi,

Here's my markup:

<asp:UpdatePanel id="updMaster" runat="server">
<ContentTemplate>
<div id="meEdit">
<asp:Panel ID="pnlME" runat="server" CssClass="ME">
<div class="meContainer" style="width:750px;">
<asp:UpdatePanel id="upMain" runat="server" >
<ContentTemplate>
<div class="meSelection" style="float:left; width: 100%; margin-left: 0px; margin-top: 0px; padding: 3px;">

<ajaxToolkit:TabContainer ID="tcVehicles" runat="server">

<ajaxToolkit:TabPanel ID="tpD" runat="server" >
<ContentTemplate>
<asp:Label ID="lblDV" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlDV" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel ID="tpA" runat="server">
<ContentTemplate>
<asp:Label ID="lblAnalogueVehicles" runat="server"></asp:Label>
<br />
<asp:DropDownList ID="ddlAnalogueVehicles" runat="server" />
<br />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel id="updMaster" runat="server">

Depending on the content of a session variable I will either show either both the tab panels or only one of them but the code that does this is executed after Page_Load.

Thanks for your help.

Hmm, I've dumped my markup into a separate project and it's fine.

Looking at what I've got in place I think the problem may be due to my hiding the panel which contains the tab container at page_load and then showing it from a button click.