Performance issues when used in UpdatePanel with ModalPopupExtender

6 posts, 0 answers
  1. David
    David avatar
    3 posts
    Member since:
    Nov 2008

    Posted 11 Dec 2008 Link to this post

    Hi,

    I am attempting to implement a calendar in a modal popup using an update panel and the AjaxToolkit ModalPopUpExtender.  The calendar has been configured to use 3 columns and 2 rows (multiviewrows=2, multiviewcolumns=3).  Unfortunately when viewed in IE6 the performance of the control is appalling.  The calendar view takes ages to update after clicking on a navigation button.  The calendar control is configured to use auto postback. 

    Is there a better way of implementing the control in a modal popup?

    Any help would be much appreciated.

    Regards

    Myles

     

     

  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 15 Dec 2008 Link to this post

    Hi David,

    Is it possible for you to provide a live url where this performance issue can be observed under IE 6 and compared to other browsers? Additionally, I will appreciate if you can inspect the traffic between the client and the server using the Fiddler tool or FireBug and share the results with us. Thus we will do our best to provide straight-to-the-point answer/solution.

    Best regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. David
    David avatar
    3 posts
    Member since:
    Nov 2008

    Posted 17 Dec 2008 Link to this post

    Sebastian,

    I can't provide a live URL.  I've since discovered that the performance is related to whether the calander control is within a container within the Update panel e.g.  The following code performs very poorly within IE6:

    <asp:UpdatePanel ID="updTelerik" runat="server" UpdateMode="Conditional">

    <ContentTemplate>
    <asp:Panel ID="Panel2" runat="server" Style="display: none; margin: 0px;">
     

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Vista" MultiPageID="RadMultiPage1"

    SelectedIndex="0" Align="Justify" ReorderTabsOnSelect="true" Width="347px" >
     

    <Tabs>
     

    <telerik:RadTab Text="Calander View">

    </telerik:RadTab>

     

    <telerik:RadTab Text="Recurrence">

    </telerik:RadTab>
     

    </Tabs>
     

    </telerik:RadTabStrip>
     

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView" Width="345px">
     

    <telerik:RadPageView ID="RadPageView1" runat="server" >
     

    <telerik:RadCalendar ID="RadCalendar1" runat="server" Font-Names="Arial, Verdana, Tahoma"

    ForeColor="Black" Style="border-color: #ececec" MultiViewColumns="3" EnableViewSelector="True"
    MultiViewRows="1" OnDefaultViewChanged="RadCalendar1_OnDefaultViewChanged" AutoPostBack="true"
    Visible="true" OnSelectionChanged="RadCalendar1_OnSelectionChanged" EnableNavigationAnimation="false">
    </telerik:RadCalendar>

     

    </telerik:RadPageView>
     

    <telerik:RadPageView ID="RadPageView2" runat="server">

    <div id="divMainRecurrence" runat="server" visible="true">

    </div>
     

    </telerik:RadPageView>
     

    </telerik:RadMultiPage>

     

    </asp:Panel>

    <asp:HyperLink ID="lnkHiddenPopup" runat="server" Style="display: none;">Hidden Popup</asp:HyperLink>

    <ajaxToolkit:ModalPopupExtender ID="mpeCalendar" runat="server" PopupControlID="Panel2"

    TargetControlID="lnkHiddenPopup">

    </ajaxToolkit:ModalPopupExtender>
     

    <asp:Button ID="btnTest" runat="server" Text="Test2" OnClick="btnTest_Click" />
     

    </ContentTemplate>
    </asp:UpdatePanel>

     
    If I take the calander control out of the tab strip then the performance improves e.g :

    <asp:UpdatePanel ID="updTelerik" runat="server" UpdateMode="Conditional">

     <ContentTemplate>
     

    <asp:Panel ID="Panel2" runat="server" Style="display: none; margin: 0px;">

    <telerik:RadCalendar ID="RadCalendar1" runat="server" Font-Names="Arial, Verdana, Tahoma"

    ForeColor="Black" Style="border-color: #ececec" MultiViewColumns="3" EnableViewSelector="True"
    MultiViewRows="1" OnDefaultViewChanged="RadCalendar1_OnDefaultViewChanged" AutoPostBack="true"
    Visible="true" OnSelectionChanged="RadCalendar1_OnSelectionChanged" EnableNavigationAnimation="false">
    </telerik:RadCalendar>

    </asp:Panel>
     

    <asp:HyperLink ID="lnkHiddenPopup" runat="server" Style="display: none;">Hidden Popup</asp:HyperLink>

    <ajaxToolkit:ModalPopupExtender ID="mpeCalendar" runat="server" PopupControlID="Panel2"

    TargetControlID="lnkHiddenPopup"> 

    </ajaxToolkit:ModalPopupExtender>

    <asp:Button ID="btnTest" runat="server" Text="Test2" OnClick="btnTest_Click" />
     

    </ContentTemplate>
    </asp:UpdatePanel>

    The performance issue is not related specifically to the tap strip control.  It is related to the calendar when it is inside any container control that is also inside an update panel.

    These performance issues appear specific to IE6.  I haven't tried it on IE7 yet.  The performance is fine on Firefox.

    Regards

    Myles

  4. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 18 Dec 2008 Link to this post

    Hi Myles,

    Can you post your relevant code-behind as well? I tried to reproduce the issue using the provided markup but it seems it is not sufficient to make the problem manifest itself.

    Regards,
    Pavel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. David
    David avatar
    3 posts
    Member since:
    Nov 2008

    Posted 18 Dec 2008 Link to this post

    Pavel,

    I don't have much code in the code-behind at this stage.  Here are the events:

            protected void Page_Load(object sender, EventArgs e)  
            {  
     
                TaskTemplate template = new TaskTemplate(RadCalendar1, DateTime.Today);  
       
            }  
     
            protected void RadCalendar1_OnDefaultViewChanged(object sender, Telerik.Web.UI.Calendar.DefaultViewChangedEventArgs e)  
            {  
                mpeCalendar.Show();  
            }  
     
            protected void btnTest_Click(object sender, EventArgs e)  
            {  
                mpeCalendar.Show();  
                RadCalendar1.Visible = true;  
            }  
     
    public class TaskTemplate : ITemplate  
    {  
        private Control _taskContent;  
        private DateTime _taskDate;  
     
        public TaskTemplate(RadCalendar calendarInstance, DateTime taskDate)  
        {  
     
            calendarInstance.RangeMinDate = DateTime.Today.Subtract(new TimeSpan(48,0,0));   
     
            //this._taskContent = taskContent;  
            this._taskDate = taskDate;  
            int index = calendarInstance.SpecialDays.IndexOf(taskDate);  
            RadCalendarDay taskDay = calendarInstance.SpecialDays[index];  
     
            if (taskDay == null)  
            {  
                taskDay = new RadCalendarDay();  
                taskDay.Date = taskDate;  
                taskDay.ItemStyle.CssClass = "TaskDefault";  
                taskDay.TemplateID = taskDay.Date.ToString("MM/dd/yyyy");  
                taskDay.IsSelectable = true;  
                calendarInstance.SpecialDays.Add(taskDay);  
            }  
     
            DayTemplate template = new DayTemplate();  
            template.ID = taskDay.TemplateID;  
            template.Content = this;  
            calendarInstance.CalendarDayTemplates.Add(template);  
        }  
     
        public void InstantiateIn(Control container)  
        {  
            container.Controls.Add(new LiteralControl(string.Format("<div style='display: block; font-size: 8px; margin-bottom: 10px; margin-right: 12px;'>{0}</div>"this._taskDate.Day)));  
        }  
     

    Maybe the problem is that IE6 is simply an inferior browser?  Unfortunately most of our user base is still IE6 based.

    Regards

    Myles
  6. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 19 Dec 2008 Link to this post

    Hello Myles,

    I am still unable to observe the problem. Please find attached the sample created with your markup and code. Give it a try and let us know how it behaves or if there is anything different compared to your problematic application.

    Greetings,
    Pavel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top