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

Expand Animation

  • Html elements:
  • Choose
    • Image
    • Table
    • Ordered List
    • Unordered List
  • Form elements:
  • Button
    • Button
    • Radio Button
    • CheckBox
    • ImageButton
    • TextBox
    • TextArea
  • Demo Configurator
Expand Animation
  • TypeNone
Collapse Animation
  • TypeNone

The ExpandAnimation and CollapseAnimation properties of RadToolBar are used to customize the way the dropdown items (RadToolBarDropDown and RadToolBarSplitButton) are expanded and collapsed. For each expand or collapse animation, you can specify Type and Duration:

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

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

The subproperties of the ExpandAnimation and CollapseAnimation properties can be modified both on the client and the server. 

<telerik:RadToolBar id="RadToolBar1" Runat="server" Skin="Vista">
    <ExpandAnimation Type="OutQuart" Duration="300" />
    <CollapseAnimation Type="OutQuint" Duration="200" />
    <Items>
        ...
    </Items>
</telerik:RadToolBar>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="ToolBar.Examples.Appearance.ExpandAnimation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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-narrow">
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
            <ExpandAnimation Type="OutQuart" Duration="300"></ExpandAnimation>
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            <Items>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <div style="margin: 0 5px 0 15px;">
                            Html elements:
                        </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="Choose">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Image">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Table">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Ordered List">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Unordered List">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <div style="margin: 0 5px 0 15px;">
                            Form elements:
                        </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarSplitButton Text="Button">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Button">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Radio Button">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="CheckBox">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="ImageButton">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="TextBox">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="TextArea">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarSplitButton>
            </Items>
        </telerik:RadToolBar>
    </div>
    <script type="text/javascript">
        function applyChanges() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var expandAnimationTypeDropDown = $get('<%= ddlExpandType.ClientID %>');

            var expandAnimationType =
                    Telerik.Web.UI.AnimationType.parse(expandAnimationTypeDropDown.value);

            toolBar.get_expandAnimation().set_type(expandAnimationType);
            var expandDurationTextBox = $get('<%= editExpandDuration.ClientID %>');
            var expandDuration = parseInt(expandDurationTextBox.value);

            toolBar.get_expandAnimation().set_duration(expandDuration);

            var collapseAnimationTypeDropDown = $get('<%=ddlCollapseType.ClientID %>');

            var collapseAnimationType =
                    Telerik.Web.UI.AnimationType.parse(collapseAnimationTypeDropDown.value);

            toolBar.get_collapseAnimation().set_type(collapseAnimationType);
            var collapseDurationTextBox = $get('<%=editCollapseDuration.ClientID %>');
            var collapseDuration = parseInt(collapseDurationTextBox.value);

            toolBar.get_collapseAnimation().set_duration(collapseDuration);
        }
    </script>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Expand Animation" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="ddlExpandType" runat="server" Size="Wide" Label="Type">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:TextBox ID="editExpandDuration" runat="server" Text="300" Label="Duration" Size="Thin"></qsf:TextBox>
                        </li>
                    </ul>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="editExpandDuration"
                        ErrorMessage="positive integer required" Display="Dynamic"></asp:RequiredFieldValidator>
                    <asp:RangeValidator ID="RangeValidator1" ControlToValidate="editExpandDuration" runat="server"
                        MinimumValue="0" MaximumValue="3000" Type="Integer" ErrorMessage="valid range: 0-3000"
                        Display="Dynamic"></asp:RangeValidator>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Collapse Animation" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="ddlCollapseType" runat="server" Size="Wide" Label="Type"></qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:TextBox runat="server" ID="editCollapseDuration" Text="200" Label="Duration" Size="Thin"></qsf:TextBox>
                        </li>
                    </ul>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="editCollapseDuration"
                        ErrorMessage="positive integer required" Display="Dynamic" ID="Requiredfieldvalidator2"></asp:RequiredFieldValidator>
                    <asp:RangeValidator ControlToValidate="editCollapseDuration" runat="server" MinimumValue="0"
                        MaximumValue="3000" Type="Integer" ErrorMessage="positive integer required" Display="Dynamic"
                        ID="Rangevalidator2"></asp:RangeValidator>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server"></qsf:ConfiguratorColumn>
                <qsf:Button OnClientClicked="applyChanges" ID="btnApplyChanges" runat="server" Text="Apply" AutoPostBack="false">
                </qsf:Button>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance