This is a migrated thread and some comments may be shown as answers.

Performance issues when used in UpdatePanel with ModalPopupExtender

5 Answers 120 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 11 Dec 2008, 06:02 AM
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

 

 

5 Answers, 1 is accepted

Sort by
0
Sebastian
Telerik team
answered on 15 Dec 2008, 02:35 PM
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.
0
David
Top achievements
Rank 1
answered on 17 Dec 2008, 06:26 AM

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

0
Pavel
Telerik team
answered on 18 Dec 2008, 09:31 AM
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.
0
David
Top achievements
Rank 1
answered on 18 Dec 2008, 11:30 PM
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
0
Pavel
Telerik team
answered on 19 Dec 2008, 09:26 AM
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.
Tags
Calendar
Asked by
David
Top achievements
Rank 1
Answers by
Sebastian
Telerik team
David
Top achievements
Rank 1
Pavel
Telerik team
Share this question
or