New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Animations
Updated over 6 months ago
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.
Razor
@(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")
)
)
)