Animations
By default, the Telerik UI for ASP.NET MVC 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")
)
)
)