Change Expand/collapse animation css settings

[Martin McCarrick]

Hello there

Is it possible to alter the Blazor SfTreeView animation Expand/Collapse speed in css?

Im working with the basic sample in your docs.

Can you point me to the appropriate documentaion too.

Many thanks

Martin

[Indhumathy Loganathan]

Hi Martin, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in TreeView component. We understand that you want to speed up the duration time taken to perform expand or collapse of TreeView nodes. In TreeView, we have TreeViewNodeAnimationSettings API which includes TreeViewAnimationExpand and TreeViewAnimationCollapse API. 

 

Both collapse and expand API includes below properties. 

 

Duration - Specifies the duration to animate. 

Easing - Specifies the animation timing function. 

Effect - Specifies the type of animation. 

 

For example, 

 

<TreeViewNodeAnimationSettings> 

    <TreeViewAnimationExpand Duration="400" Effect="Syncfusion.Blazor.AnimationEffect.SlideDown" Easing="Linear"></TreeViewAnimationExpand> 

    <TreeViewAnimationCollapse Duration="400" Effect="Syncfusion.Blazor.AnimationEffect.SlideUp" Easing="Linear"></TreeViewAnimationCollapse> 

</TreeViewNodeAnimationSettings> 

 

For your requirement, we have speed up the Duration time for both expand and collapse. Refer to the below code snippet. 

 

<SfTreeView @ref="treeview" TValue="MailItem"> 

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 

    <TreeViewNodeAnimationSettings> 

        <TreeViewAnimationExpand Duration="100"></TreeViewAnimationExpand> 

        <TreeViewAnimationCollapse Duration="100"></TreeViewAnimationCollapse> 

    </TreeViewNodeAnimationSettings> 

</SfTreeView> 

 

You can find the sample demonstrating the solution from below link. 

 

https://www.syncfusion.com/downloads/support/forum/168609/ze/TreeView36081041 

 

To know more about the Blazor TreeView component, refer to the below links.  

  

Documentation: https://blazor.syncfusion.com/documentation/treeview/getting-started/ 

 

Demos: https://blazor.syncfusion.com/demos/treeview/default-functionalities 

 

API reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Martin McCarrick]

Thank you so much.

Your solution worls perfectly, I really appreciate your help.

Just one thing, looking at the TreeViewAnimationExpand class I cant see the Properties (Duration, Easing & Effect) listed, normally we see the properties of a class, why are they not in the docs? and where are they and how would I find them?

Kind regards

Martin

[Keerthana Rajendran]

Hi Martin, 

 

Most welcome. We are glad to hear that the provided suggestions helped you. We have considered your feedback about documentation and we will publish this scenario(How to customize animation settings with Blazor TreeView) as a KB in future.  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R.