Slow performance on loading app due to RadCalendar control

16 posts, 0 answers
  1. Doru
    Doru avatar
    1 posts
    Member since:
    Aug 2012

    Posted 08 Mar 2013 Link to this post

    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.
  2. Zhong
    Zhong avatar
    3 posts
    Member since:
    Feb 2013

    Posted 12 Mar 2013 Link to this post

    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?

  3. DevCraft banner
  4. Todor
    Admin
    Todor avatar
    778 posts

    Posted 12 Mar 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  5. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 08 Apr 2013 Link to this post

    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?
  6. Todor
    Admin
    Todor avatar
    778 posts

    Posted 09 Apr 2013 Link to this post

    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:
    <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>
    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 09 Apr 2013 Link to this post

    I removed the picker and commented the transition controls, but the speed of opening is pretty much the same.
  8. Todor
    Admin
    Todor avatar
    778 posts

    Posted 12 Apr 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  9. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 12 Apr 2013 Link to this post

    Thanks, I'll check it right now
  10. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 12 Apr 2013 Link to this post

    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:
    <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>

     
  11. Todor
    Admin
    Todor avatar
    778 posts

    Posted 17 Apr 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  12. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 17 Apr 2013 Link to this post

    Oh, I'd appreciate that!
    And all our application users too :)

    Waiting for an update...
  13. Todor
    Admin
    Todor avatar
    778 posts

    Posted 13 May 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  14. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 13 May 2013 Link to this post

    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.
  15. Todor
    Admin
    Todor avatar
    778 posts

    Posted 14 May 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  16. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 14 May 2013 Link to this post

    Thank you.
    Let me know when the build is ready
  17. Todor
    Admin
    Todor avatar
    778 posts

    Posted 18 May 2013 Link to this post

    Hello,

    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.
Back to Top
DevCraft banner