This question is locked. New answers and comments are not allowed.
I was wondering if there is a way to improve the performance of the calendar control by setting some properties during load.
My first page has a RadCalendar control. In my perf testing using EQATEC profiler (same machine, same environment) I collected the following numbers. The numbers in themselves are not important but the percentage decrease in performance is.
Launching app numbers:
223 ms - Brand new Windows phone 7.5 project no Telerik RAD controls
889 ms (- 400%) - Added references only to Telerik.Windows.Control.Input, Telerik.Windows.Controls.Primitives and Telerik.Windows.Core.
4254 ms ~ 4 seconds (- 2000%) - added the RadCalendar control to the main page (with no customization, no event handlers, no styling i.e. exactly how it is by default).
The RadCalendar control is the focus point of my application so I cannot disable it, delete it, or get rid of it unless I redesign the whole application (which is already on the market).
With the newer windows phones there is no problem, but with Nokia 610 the performance is really really bad (and Nokia 610 is my second phone usage in terms of downloads and my biggest source of perf complains).
I know the control itself is a very complex one and it takes time to render, but I was wondering if I can improve the speed by not using some of the generic functionality - if possible. I would greatly appreciate any help or hints you can provide.
My first page has a RadCalendar control. In my perf testing using EQATEC profiler (same machine, same environment) I collected the following numbers. The numbers in themselves are not important but the percentage decrease in performance is.
Launching app numbers:
223 ms - Brand new Windows phone 7.5 project no Telerik RAD controls
889 ms (- 400%) - Added references only to Telerik.Windows.Control.Input, Telerik.Windows.Controls.Primitives and Telerik.Windows.Core.
4254 ms ~ 4 seconds (- 2000%) - added the RadCalendar control to the main page (with no customization, no event handlers, no styling i.e. exactly how it is by default).
The RadCalendar control is the focus point of my application so I cannot disable it, delete it, or get rid of it unless I redesign the whole application (which is already on the market).
With the newer windows phones there is no problem, but with Nokia 610 the performance is really really bad (and Nokia 610 is my second phone usage in terms of downloads and my biggest source of perf complains).
I know the control itself is a very complex one and it takes time to render, but I was wondering if I can improve the speed by not using some of the generic functionality - if possible. I would greatly appreciate any help or hints you can provide.
15 Answers, 1 is accepted
0
Zhong
Top achievements
Rank 1
answered on 12 Mar 2013, 11:21 AM
Hi,
I'm having the same problem here. RadCalendar is loaded very slow when first time open the page. Could some one help me with this issue?
I'm having the same problem here. RadCalendar is loaded very slow when first time open the page. Could some one help me with this issue?
0
Hello,
Thank you for contacting us.
It is expected that an application will run slower on Nokia 610 than on an average device and with the current implementation of RadCalendar we can't speed it up. However, we will consider to make some improvements in this control for our further releases.
Thank you for your cooperation.
Kind regards,
Todor
the Telerik team
Thank you for contacting us.
It is expected that an application will run slower on Nokia 610 than on an average device and with the current implementation of RadCalendar we can't speed it up. However, we will consider to make some improvements in this control for our further releases.
Thank you for your cooperation.
Kind regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 08 Apr 2013, 01:10 PM
RadCalendar on a plain page with just default <RadCalendar> tag makes this page opening for 1 second on Lumia 800.
How can we fix that?
How can we fix that?
0
Hello Alex,
RadCalendar is a complex component and it is normal that it takes some time to load itself and populate all cells with the correct date information and appointments. If you need a faster, but not-so-functional calendar, you can remove the RadDatePicker control that we use to change the month. This can be achieved by modifying the control's template and commenting out the month info related parts:
This is the control's default style with comments on the parts that you may exclude in order to reduce the loading time. This will remove the month name on top of the calendar, but you can easily add a simple TextBlock and bind the value of its Text property to the RadCalendar's DisplayDate. To change the months, you can use buttons like suggested in this post.
I hope this information helps.
Kind regards,
Todor
the Telerik team
RadCalendar is a complex component and it is normal that it takes some time to load itself and populate all cells with the correct date information and appointments. If you need a faster, but not-so-functional calendar, you can remove the RadDatePicker control that we use to change the month. This can be achieved by modifying the control's template and commenting out the month info related parts:
<
Style
TargetType
=
"telerikInput:RadCalendar"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Top"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"1"
/>
<
Setter
Property
=
"IsTabStop"
Value
=
"False"
/>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeNormal}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiLight}"
/>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"GridLinesBrush"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"ItemTemplate"
>
<
Setter.Value
>
<
DataTemplate
>
<
Grid
Margin
=
"5"
>
<
TextBlock
Text
=
"{Binding DetailText}"
FontSize
=
"7"
MaxHeight
=
"25"
VerticalAlignment
=
"Top"
Margin
=
"0,-2,0,0"
/>
<
TextBlock
Text
=
"{Binding Text}"
x:Name
=
"TextPresenter"
VerticalAlignment
=
"Bottom"
HorizontalAlignment
=
"Left"
/>
</
Grid
>
</
DataTemplate
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikInput:RadCalendar"
>
<
Border
Background
=
"{TemplateBinding Background}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Padding
=
"{TemplateBinding Padding}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"DayNamesNotVisible"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"MonthTextContainer"
Storyboard.TargetProperty
=
"Margin"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"-4, -10, 0, 30"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<!--<telerikInput:RadDatePicker Culture="{TemplateBinding Culture}" x:Name="DatePicker" Width="1" Height="1" Opacity="0" SelectorFormat="my"/>-->
<
Canvas
Grid.Row
=
"1"
IsHitTestVisible
=
"False"
Margin
=
"0,-20,0,0"
>
<
Rectangle
Canvas.Left
=
"0"
Canvas.Top
=
"0"
x:Name
=
"OldContentPresenterCopy"
CacheMode
=
"BitmapCache"
/>
</
Canvas
>
<
Grid
Grid.Row
=
"1"
x:Name
=
"CalendarViewContainer"
Margin
=
"0,-20,0,0"
>
<
Canvas
IsHitTestVisible
=
"False"
>
<
Rectangle
Canvas.Left
=
"0"
Canvas.Top
=
"0"
x:Name
=
"OldContentPresenter"
CacheMode
=
"BitmapCache"
/>
</
Canvas
>
<
telerikPrimitives:RadUniformGrid
FirstRowVisibility
=
"{TemplateBinding DayNamesVisibility}"
FirstColumnVisibility
=
"{TemplateBinding WeekNumbersVisibility}"
x:Name
=
"CalendarPanel"
PreserveSpaceForCollapsedChildren
=
"True"
NumberOfRows
=
"7"
NumberOfColumns
=
"8"
/>
<
telerikPrimitives:RadUniformGrid
FirstRowVisibility
=
"{TemplateBinding DayNamesVisibility}"
FirstColumnVisibility
=
"{TemplateBinding WeekNumbersVisibility}"
x:Name
=
"GridLinesPanel"
PreserveSpaceForCollapsedChildren
=
"True"
NumberOfRows
=
"7"
NumberOfColumns
=
"8"
/>
</
Grid
>
<
Grid
Margin
=
"22,10,0,15"
x:Name
=
"MonthInfoLargeContainer"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<!--
<telerikPrimitives:RadTransitionControl
x:Name
=
"YearTextContainer"
FontFamily
=
"{StaticResource PhoneFontFamilySemiBold}"
FontSize
=
"{StaticResource PhoneFontSizeMedium}"
>
<
telerikPrimitives:RadTransitionControl.Transition
>
<
telerikPrimitives:RadFadeTransition
PlayMode
=
"Simultaneously"
/>
</
telerikPrimitives:RadTransitionControl.Transition
>
</
telerikPrimitives:RadTransitionControl
>
<
telerikPrimitives:RadTransitionControl
Margin
=
"-4, -10, 0, 0"
Grid.Row
=
"1"
x:Name
=
"MonthTextContainer"
FontFamily
=
"{StaticResource PhoneFontFamilySemiLight}"
FontSize
=
"{StaticResource PhoneFontSizeExtraExtraLarge}"
>
<
telerikPrimitives:RadTransitionControl.Transition
>
<
telerikPrimitives:RadFadeTransition
PlayMode
=
"Simultaneously"
/>
</
telerikPrimitives:RadTransitionControl.Transition
>
</
telerikPrimitives:RadTransitionControl
>-->
</
Grid
>
<
Grid
x:Name
=
"MonthInfoSmallContainer"
Margin
=
"3,0,0,0"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<!--<
telerikPrimitives:RadTransitionControl
x:Name
=
"MonthTextContainerSmall"
FontFamily
=
"{StaticResource PhoneFontFamilySemiBold}"
FontSize
=
"{StaticResource PhoneFontSizeMedium}"
>
<
telerikPrimitives:RadTransitionControl.Transition
>
<
telerikPrimitives:RadFadeTransition
PlayMode
=
"Simultaneously"
/>
</
telerikPrimitives:RadTransitionControl.Transition
>
</
telerikPrimitives:RadTransitionControl
>
<
telerikPrimitives:RadTransitionControl
Grid.Column
=
"1"
Margin
=
"5,0,0,0"
FontFamily
=
"{StaticResource PhoneFontFamilySemiBold}"
x:Name
=
"YearTextContainerSmall"
FontSize
=
"{StaticResource PhoneFontSizeMedium}"
>
<
telerikPrimitives:RadTransitionControl.Transition
>
<
telerikPrimitives:RadFadeTransition
PlayMode
=
"Simultaneously"
/>
</
telerikPrimitives:RadTransitionControl.Transition
>
</
telerikPrimitives:RadTransitionControl
>-->
</
Grid
>
</
Grid
>
</
Border
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
I hope this information helps.
Kind regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 09 Apr 2013, 01:36 PM
I removed the picker and commented the transition controls, but the speed of opening is pretty much the same.
0
Hello Alex,
The measurements that I have made with the loading time of RadCalendar with and without the style that I have suggested in my previous post show that the control loads for a little more than a second with its default style and for about half a second with the suggested style. You can see these observations with the project that I have attached. Simply run the application and press each of the Buttons (on a separate run of the application), which will navigate you to a page with RadCalendar and TextBlock that shows the time it takes for the page to load.
Let me know if it doesn't work as expected on your side.
Regards,
Todor
the Telerik team
The measurements that I have made with the loading time of RadCalendar with and without the style that I have suggested in my previous post show that the control loads for a little more than a second with its default style and for about half a second with the suggested style. You can see these observations with the project that I have attached. Simply run the application and press each of the Buttons (on a separate run of the application), which will navigate you to a page with RadCalendar and TextBlock that shows the time it takes for the page to load.
Let me know if it doesn't work as expected on your side.
Regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 12 Apr 2013, 11:00 AM
Thanks, I'll check it right now
0
Alex
Top achievements
Rank 1
answered on 12 Apr 2013, 11:22 AM
In Release, default page opens within 1700-1800 ms on Lumia 800.
Suggested page takes 800-900 ms to open.
When default page opens several times, all subsequent openings take 900-1000 ms.
Well, while in this project it makes difference, still 800 ms is too long.
I used same technique to measure open page time in our app, and it's 1500-1600 first time.
Here's the code we use:
And the style itself:
Suggested page takes 800-900 ms to open.
When default page opens several times, all subsequent openings take 900-1000 ms.
Well, while in this project it makes difference, still 800 ms is too long.
I used same technique to measure open page time in our app, and it's 1500-1600 first time.
Here's the code we use:
<
telerikInput:RadCalendar
Grid.Row
=
"1"
Margin
=
"0,0,0,0"
Style
=
"{StaticResource CalendarStyle}"
Culture
=
"ru-RU"
Height
=
"440"
SelectedValue
=
"{Binding SelectedDate, Mode=TwoWay}"
x:Name
=
"calendar"
>
</
telerikInput:RadCalendar
>
And the style itself:
<
Style
x:Key
=
"RadCalendarDefaultStyleKey"
TargetType
=
"telerikInput:RadCalendar"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Top"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"1"
/>
<
Setter
Property
=
"IsTabStop"
Value
=
"False"
/>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"MonthInfoDisplayMode"
Value
=
"None"
></
Setter
>
<
Setter
Property
=
"GridLinesBrush"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikInput:RadCalendar"
>
<
Border
Background
=
"{TemplateBinding Background}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Padding
=
"{TemplateBinding Padding}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"DayNamesNotVisible"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"MonthTextContainer"
Storyboard.TargetProperty
=
"Margin"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"-4, -10, 0, 30"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"416"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Canvas
Grid.Row
=
"1"
IsHitTestVisible
=
"False"
Height
=
"416"
Margin
=
"0,-20,0,0"
VerticalAlignment
=
"Top"
>
<
Rectangle
x:Name
=
"OldContentPresenterCopy"
Canvas.Left
=
"0"
Canvas.Top
=
"0"
CacheMode
=
"BitmapCache"
/>
</
Canvas
>
<
Grid
x:Name
=
"CalendarViewContainer"
Row
=
"1"
VerticalAlignment
=
"Top"
Height
=
"416"
Margin
=
"0,-20,0,0"
>
<
Canvas
IsHitTestVisible
=
"False"
>
<
Rectangle
x:Name
=
"OldContentPresenter"
Canvas.Left
=
"0"
Canvas.Top
=
"0"
CacheMode
=
"BitmapCache"
/>
</
Canvas
>
<
telerikPrimitives:RadUniformGrid
x:Name
=
"CalendarPanel"
Height
=
"416"
FirstRowVisibility
=
"{TemplateBinding DayNamesVisibility}"
FirstColumnVisibility
=
"{TemplateBinding WeekNumbersVisibility}"
PreserveSpaceForCollapsedChildren
=
"True"
NumberOfRows
=
"7"
NumberOfColumns
=
"8"
/>
<
telerikPrimitives:RadUniformGrid
x:Name
=
"GridLinesPanel"
Height
=
"416"
FirstRowVisibility
=
"{TemplateBinding DayNamesVisibility}"
FirstColumnVisibility
=
"{TemplateBinding WeekNumbersVisibility}"
PreserveSpaceForCollapsedChildren
=
"True"
NumberOfRows
=
"7"
NumberOfColumns
=
"8"
/>
</
Grid
>
<
Grid
x:Name
=
"MonthInfoLargeContainer"
Margin
=
"22,10,0,15"
Visibility
=
"Collapsed"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
</
Grid
>
<
Grid
x:Name
=
"MonthInfoSmallContainer"
Margin
=
"0,0,0,0"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
</
Grid
>
<
Border
Background
=
"{StaticResource PhoneBackgroundBrush}"
Height
=
"20"
HorizontalAlignment
=
"Stretch"
></
Border
>
</
Grid
>
</
Border
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
TargetType
=
"telerikInput:RadCalendar"
x:Key
=
"CalendarStyle"
BasedOn
=
"{StaticResource RadCalendarDefaultStyleKey}"
>
<
Setter
Property
=
"DayNamesVisibility"
Value
=
"Visible"
/>
<
Setter
Property
=
"Foreground"
Value
=
"#3b4b61"
/>
<
Setter
Property
=
"IsTodayHighlighted"
Value
=
"False"
/>
<
Setter
Property
=
"GridLinesBrush"
Value
=
"{StaticResource PhoneBackgroundBrush}"
/>
</
Style
>
0
Hello Alex,
We will review the RadCalendar's code and try to make some performance optimizations.
Thank you for your cooperation.
Kind regards,
Todor
the Telerik team
We will review the RadCalendar's code and try to make some performance optimizations.
Thank you for your cooperation.
Kind regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 17 Apr 2013, 10:10 AM
Oh, I'd appreciate that!
And all our application users too :)
Waiting for an update...
And all our application users too :)
Waiting for an update...
0
Hi Alex,
I just wanted to let you know that last week we have released an internal build containing performance improvements on RadCalendar. You can download it from the Downloads section of your account.
Regards,
Todor
the Telerik team
I just wanted to let you know that last week we have released an internal build containing performance improvements on RadCalendar. You can download it from the Downloads section of your account.
Regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 13 May 2013, 09:32 AM
Thanks, Todor!
Will try it right now.
---
It is much faster, but now any of these lines throw exception
calendar.SelectableDateStart = new DateTime(2013, 04, 07);
calendar.SelectableDateEnd = new DateTime(2013, 04, 23);
calendar.SelectedValue = new DateTime(2013, 04, 22);
{System.ArgumentOutOfRangeException: Invalid SelectableDateStart value.
Parameter name: sender
at Telerik.Windows.Controls.RadCalendar.OnSelectableDateStartChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)}
---
I worked it out, this build requires setting SelectedDate* properties in Loaded event.
Will try it right now.
---
It is much faster, but now any of these lines throw exception
calendar.SelectableDateStart = new DateTime(2013, 04, 07);
calendar.SelectableDateEnd = new DateTime(2013, 04, 23);
calendar.SelectedValue = new DateTime(2013, 04, 22);
{System.ArgumentOutOfRangeException: Invalid SelectableDateStart value.
Parameter name: sender
at Telerik.Windows.Controls.RadCalendar.OnSelectableDateStartChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)}
---
I worked it out, this build requires setting SelectedDate* properties in Loaded event.
0
Hi Alex,
Yes, you are absolutely right. However, this is not the desired behavior, so we are going to make the necessary changes in order to make sure that you won't need to wait till the control is loaded before you can change these properties. The described issue will be fixed with our next internal build.
I have updated your Telerik points for your continuous feedback and cooperation.
Regards,
Todor
the Telerik team
Yes, you are absolutely right. However, this is not the desired behavior, so we are going to make the necessary changes in order to make sure that you won't need to wait till the control is loaded before you can change these properties. The described issue will be fixed with our next internal build.
I have updated your Telerik points for your continuous feedback and cooperation.
Regards,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 14 May 2013, 08:29 AM
Thank you.
Let me know when the build is ready
Let me know when the build is ready
0
Hello,
The build is ready and you can download it from your account.
Greetings,
Todor
the Telerik team
The build is ready and you can download it from your account.
Greetings,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.