Performance issues when used in UpdatePanel with ModalPopupExtender

[David]

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

 

 

[Sebastian]

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.

[David]

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

[Pavel]

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.

[David]

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

[Pavel]

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.