Animations
By default, the Telerik UI for ASP.NET Core TreeView uses animations to expand and collapse its hierarchical data when you interact with a given node.
You can modify these animations through the Expand() and Close() configuration methods.
Supported Options
The Expand and Collapse animations provide the following methods for further configuration:
-
Fade()—Configures the fade effect direction. -
Zoom()—Specifies the zoom effect direction. -
SlideIn()—Sets the slide effect direction. -
Reverse()—Enables or disables the effect animation reverse. -
Duration()—Sets a predefined animation duration.
The following example demonstrates how to change the TreeView animations.
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.Animation(animation =>
{
animation.Expand(expand =>
{
expand.Expand(ExpandDirection.Vertical);
expand.SlideIn(SlideDirection.Down);
expand.Duration(500);
expand.Fade(FadeDirection.In);
expand.Zoom(ZoomDirection.In);
expand.Reverse(false);
});
animation.Collapse(collapse =>
{
collapse.SlideIn(SlideDirection.Up);
collapse.Fade(FadeDirection.Out);
collapse.Duration(600);
collapse.Reverse(false);
});
})
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Read_TreeViewData", "TreeView")
)
)
)
<kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
<animation>
<expand effects="expand:vertical slideIn:down fade:in zoom:in" duration="500"/>
<collapse effects="slideIn:up fade:out" duration="600"/>
</animation>
<hierarchical-datasource>
<schema>
<hierarchical-model id="id"></hierarchical-model>
</schema>
<transport>
<read url="@Url.Action("Read_TreeViewData", "TreeView")" cache="true" />
</transport>
</hierarchical-datasource>
</kendo-treeview>