Timeline Group Expand/Collapse Animation

5 posts, 1 answers
  1. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 21 Feb 2019 Link to this post

    Is there a way to speed up, or just remove, the animation that occurs when a group of Timeline items is expanded or collapsed? For groups containing more than 10 or so items, the animation to collapse or expand those groups begins to take a significant amount of time. This issue only gets worse with more items, and we would like to fix this.
  2. Answer
    Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    615 posts

    Posted 26 Feb 2019 Link to this post

    Hello Alexander,

    You can disable the animation by setting the telerik:AnimationManager.IsAnimationEnabled to "False" on the TimelineItemGroupControl. Here is some sample code:
    <Style  TargetType="timelines:TimelineItemGroupControl">
                <Setter Property="telerik:AnimationManager.IsAnimationEnabled" Value="False" />
    </Style>

    Note, that if you are using the NoXaml binaries, you will have to base the style on the default one for the theme.

    Please, give this approach a try and let me know if it is suitable for your scenario.

    I am looking forward to your reply. 

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 26 Feb 2019 in reply to Vladimir Stoyanov Link to this post

    Hello Vladimir,

    Thank you for your reply. That code worked perfectly. From that, I was able to discover that I could modify the speed of the animation like so:

    <Style TargetType="telerik:TimelineItemGroupControl">
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" 
                                                    Direction="In"
                                                    SpeedRatio="5"
                                                    TargetElementName="Content" />
                    <telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" 
                                                    Direction="Out"
                                                    SpeedRatio="5"
                                                    TargetElementName="Content" />
                </telerik:AnimationSelector>
            </Setter.Value>
        </Setter>
    </Style>

     

    Unfortunately this discovery is of limited use, as the speed is constant regardless of the number of items in the group, which was the problem to begin with. Disabling the animation as you showed is perfectly fine, however.

    Thank you very much for your assistance!

  4. Alexander
    Alexander avatar
    8 posts
    Member since:
    Sep 2018

    Posted 26 Feb 2019 Link to this post

    I researched if I could bind the SpeedRatio property of the ExpanderExpandCollapseAnimation to some property which would give the number of items in the TimelineItemGroupControl, but I discovered that SpeedRatio is not a DependencyProperty, nor does ExpanderExpandCollapseAnimation inherit from DependencyObject.

    Given this, I do not think this is possible without completely rewriting the ExpanderExpandCollapseAnimation class, which would be more effort than it is worth. If I am wrong here, please let me know, but otherwise I am content with the current solution.

  5. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    615 posts

    Posted 01 Mar 2019 Link to this post

    Hello Alexander,

    Indeed you are right that the SpeedRatio is not a DependencyProperty and cannot be data bound. 

    That said, you should be able to create a custom AnimationSelector and implement your own logic for picking the animation based on the number of items within a group. You can add a 2nd animation with a higher SpeedRatio to be played when there are more items. You can than set the custom selector to the AnimationSelector property of the AnimationManager. 

    I hope you find this helpful.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top