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.

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")
            )
        )
    )

See Also

• Animation Effects TreeView (Demo)
• Server-Side API Reference of the TreeView for Telerik UI for ASP.NET MVC
• Client-Side API Reference of the TreeView