Saturday, March 24, 2012

Panel within Mutliview scrolls when contents of updatepanel updated??

Here is my page:
< Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication1._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript">var curCount = 0;var timer;var value = 0;function timedCount(){ try { var elem = document.getElementById('Panel1'); if (value == elem.scrollHeight) { } else if(value < elem.scrollHeight) { value = elem.scrollHeight; elem.scrollTop = value; } timer=setTimeout("timedCount()",100) } catch(err) { timer=setTimeout("timedCount()",100) } }function stopTimer(){ clearTimeout(timer);}</script> </head><body onload="timedCount()" onunload="stopTimer()" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <asp:Button ID="change" runat="server" OnClick="change_Click" Text="change" /> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <asp:Panel ID="Panel1" runat="server" Height="166px" ScrollBars="Auto" Width="173px"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Literal ID="Literal1" runat="server"></asp:Literal>  </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </asp:Panel> </asp:View> <asp:View ID="View2" runat="server"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></asp:View> </asp:MultiView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="change" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick1"> </asp:Timer> </form></body></html>
 And here is the code behind:
protected void Button1_Click(object sender, EventArgs e) { Literal1.Text +="test<br>"; }protected void Timer1_Tick1(object sender, EventArgs e) { Random r =new Random();int j = r.Next(5000);if (j % 7 == 0) Literal1.Text +="test2<br>"; }protected void change_Click(object sender, EventArgs e) {if (MultiView1.ActiveViewIndex == 0) MultiView1.ActiveViewIndex = 1;else MultiView1.ActiveViewIndex = 0; } }
 the issue is that if I take Panel1 out of the MultiView it works fine: When dynamically updating Literal1, Panel1 correctly scrolls to the bottom and only when there has been a change in scrollHeight.
If Panel1 is moved to be inside View1, then Panel1 refreshes every second with the timer1.Tick event. What causes this behavior within the multiview, but not when Panel1 is outside of the Multiview?

after further testing, i have found that if I take the Multiview1 completely out of the UpdatePanel2 it works correctly too.

Each time tick probably causes an async postback. Since all your update panels are not set to have UpdateMode="Conditional", then they update on each async event

Thanks! That worked. One other question, i looked over the docs, but i havent been able to find any information on the cost/efficiency of this property. Is it more efficient to set them to "conditional" ?

I think more appropriate is to ask : What do I need :-) I think it is a.) a matter of convenience, and b.) sort of fool-proofing the facility - many ppl get confused when the thing updates all the time, and then others get confused when it doesnt. With "Always", you get refresh on each and all async postbacks on the page, which may be a waste of client-resources if the content does not need updating (the resources being spent on retrieving the control from viewstate, I guess). With Conditional, you are more in control as to when you get a refresh. Do remember than apart from the triggers , you can cause an UpdatePanel to update from your server-side code by calling the NameOfUpdatePanel.Update method.

Also, it gets a bit tricky conceptually when you have nested UpdatePanels - I m still exploring that confusion myself:)

Btw : if satisfied with the answer plz mark it as answered.

No comments:

Post a Comment