New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Expand Animation

  • Software
  • Books
  • Music
  • Movies
  • Demo Configurator
  • Expand Animation
  • Collapse Animation
  • Spin UpSpin Down
  • Spin UpSpin Down
You can customize the way the child TreeNodes expand or collapse.

The ExpandAnimation and CollapseAnimation tags of the RadTreeView object control the expand/collapse animations.

For each expand or collapse animation, you can specify its Type and Duration:

  • The Type is chosen from a list of predefined animation effects.
  • The Duration is set in milliseconds.

To disable the animation effects, set the Type to AnimationType.None. 

    <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Vista"/>
        <ExpandAnimation Type="OutQuart" Duration="300" />
        <CollapseAnimation Type="OutQuint" Duration="200" />
        ...
    </telerik:RadTreeViewu>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="TreeView.Examples.Functionality.ExpandAnimation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>

</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1"  Height="300px" >
            <Nodes>
                <telerik:RadTreeNode Text="Software">
                    <Nodes>
                        <telerik:RadTreeNode Text="Business &amp;amp; Office">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Database">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Networking">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Presentation">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Project Management">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Reports">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Spreadsheet">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Books">
                    <Nodes>
                        <telerik:RadTreeNode Text="Arts">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Biographies">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Books">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Computers &amp;amp; Internet">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Cooking">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="History">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Fiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mystery">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Nonfiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Romance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Science Fiction ">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Travel">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Music">
                    <Nodes>
                        <telerik:RadTreeNode Text="Alternative">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Blues">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Music">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Classical">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Country">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Dance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Folk">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Hard Rock">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Jazz">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Soundtracks">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Movies">
                    <Nodes>
                        <telerik:RadTreeNode Text="Action">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Animation">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Classics">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Comedy">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Documentary">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Drama">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Horror">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Musicals">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mystery">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Westerns">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    <script type="text/javascript">
        function applyChanges() {
            var treeView = $find("<%= RadTreeView1.ClientID %>");
            //set the expand animation
            var expandAnimationTypeDropDown = $find("<%= ddlExpandType.ClientID %>");
            var expandAnimationType =
                    Telerik.Web.UI.AnimationType.parse(expandAnimationTypeDropDown.get_text());
            treeView.get_expandAnimation().set_type(expandAnimationType);

            //set the expand duration
            var expandDurationTextBox = $find("<%= editExpandDuration.ClientID %>");
            var expandDuration = parseInt(expandDurationTextBox.get_value());
            treeView.get_expandAnimation().set_duration(expandDuration);

            // set the collapse animation                
            var collapseAnimationTypeDropDown = $find("<%= ddlCollapseType.ClientID %>");
            var collapseAnimationType =
                    Telerik.Web.UI.AnimationType.parse(collapseAnimationTypeDropDown.get_text());
            treeView.get_collapseAnimation().set_type(collapseAnimationType);

            //set collapse duration
            var collapseDurationTextBox = $find("<%= editCollapseDuration.ClientID %>");
            var collapseDuration = parseInt(collapseDurationTextBox.get_value());
            treeView.get_collapseAnimation().set_duration(collapseDuration);
            treeView.get_nodes().getNode(0).toggle();

            return false;
        }
    </script>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Expand Animation">
                <ul class="fb-group"> 
                    <li>
                        <qsf:ComboBox ID="ddlExpandType" runat="server" Height="300px" Label="Type"></qsf:ComboBox>
                    </li>
                    <li>
                        <qsf:NumericTextBox ID="editExpandDuration" runat="server" IncrementSettings-Step="100" MinValue="0" 
                            MaxValue="3000" NumberFormat-DecimalDigits="0" ShowSpinButtons="true" Label="Duration" Size="Narrow"></qsf:NumericTextBox>
                    </li>
                      <li>
                         <qsf:Button OnClientClicked="applyChanges" ID="btnApplyChanges" AutoPostBack="false" runat="server" Text="Apply"></qsf:Button>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Collapse Animation">
              <ul class="fb-group"> 
                    <li>
                        <qsf:ComboBox ID="ddlCollapseType" runat="server" Height="300px" Label="Type"></qsf:ComboBox>
                    </li>
                    <li>
                        <qsf:NumericTextBox ID="editCollapseDuration" runat="server" IncrementSettings-Step="100" MinValue="0" MaxValue="3000" NumberFormat-DecimalDigits="0" ShowSpinButtons="true" Label="Duration" Size="Narrow"></qsf:NumericTextBox>
                    </li>
                    <li>
                         <qsf:Button OnClientClicked="applyChanges" AutoPostBack="false" ID="Button1" runat="server" Text="Apply"></qsf:Button>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance