Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ToolBar / Expand Animation

Example Configuration
Expand Animation
Collapse Animation


  • 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>

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ToolBar.Appearance.ExpandAnimation.DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        
        <style type="text/css">
            dt
            {
                padding: 10px 5px;
                font: bold 11px Verdana, sans-serif;
                font: bold 12px "Segoe UI", "Myriad Pro", Calibri;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#" />
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true">
                <div style="width:250px;float:left;">
                    <div class="title">Expand Animation</div>
                    <dl>
                        <dt><asp:Label ID="Label1" AssociatedControlID="ddlExpandType" runat="server">Type</asp:Label></dt>
                        <dd>
                            <asp:DropDownList ID="ddlExpandType" runat="server" />
                        </dd>
                        <dt><asp:Label ID="Label2" AssociatedControlID="editExpandDuration" runat="server">Duration</asp:Label></dt>
                        <dd>
                            <asp:TextBox ID="editExpandDuration" runat="server" style="width:100px;">200</asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="editExpandDuration" ErrorMessage="positive integer required" Display="Dynamic" />
                            <asp:RangeValidator ID="RangeValidator1" ControlToValidate="editExpandDuration" runat="server" MinimumValue="0" MaximumValue="3000" Type="Integer" ErrorMessage="valid range: 0-3000" Display="Dynamic" />
                        </dd>
                    </dl>
                </div>
                <div style="width:250px;float:left;">
                    <div class="title">Collapse Animation</div>
                    <dl>
                        <dt><asp:Label ID="Label3" AssociatedControlID="ddlCollapseType" runat="server">Type</asp:Label></dt>
                        <dd>
                            <asp:DropDownList ID="ddlCollapseType" runat="server" style="width:105px;" />
                        </dd>
                        <dt><asp:Label ID="Label4" AssociatedControlID="editCollapseDuration" runat="server">Duration</asp:Label></dt>
                        <dd>
                            <asp:TextBox ID="editCollapseDuration" runat="server" style="width:100px;">200</asp:TextBox>
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="editCollapseDuration" ErrorMessage="positive integer required" Display="Dynamic" ID="Requiredfieldvalidator2" />
                            <asp:RangeValidator ControlToValidate="editCollapseDuration" runat="server" MinimumValue="0" MaximumValue="3000" Type="Integer" ErrorMessage="positive integer required" Display="Dynamic" ID="Rangevalidator2" />
                        </dd>
                    </dl>
                </div>
                <asp:Button OnClientClick="return applyChanges()" ID="btnApplyChanges" runat="server" Text="Apply" CssClass="button" Style="float: left; margin-top: 20px;" /><br/>
            </qsf:ConfiguratorPanel>
            
            <div style="padding-bottom:50px;">
                <telerik:RadToolBar id="RadToolBar1" Runat="server" EnableRoundedCorners="true" EnableShadows="true">
                    <ExpandAnimation Type="OutQuart" Duration="300" />
                 <CollapseAnimation Type="OutQuint" Duration="200" />
                    <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 Text="Table" />
                                <telerik:RadToolBarButton Text="Ordered List" />
                                <telerik:RadToolBarButton Text="Unordered List" />
                            </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 Text="Radio Button" />
                                <telerik:RadToolBarButton Text="CheckBox" />
                                <telerik:RadToolBarButton Text="ImageButton" />
                                <telerik:RadToolBarButton Text="TextBox" />
                                <telerik:RadToolBarButton Text="TextArea" />
                            </Buttons>
                        </telerik:RadToolBarSplitButton>
                    </Items>
                </telerik:RadToolBar>
            </div>
            <script type="text/javascript">
                function applyChanges()
                {
                    var toolBar = $find("<%= RadToolBar1.ClientID %>");
                    var expandAnimationTypeDropDown = $get("ddlExpandType");

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

                    toolBar.get_expandAnimation().set_type(expandAnimationType);
                    var expandDurationTextBox = $get("editExpandDuration");
                    var expandDuration = parseInt(expandDurationTextBox.value);

                    toolBar.get_expandAnimation().set_duration(expandDuration);

                    var collapseAnimationTypeDropDown = $get("ddlCollapseType");

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

                    toolBar.get_collapseAnimation().set_type(collapseAnimationType);
                    var collapseDurationTextBox = $get("editCollapseDuration");
                    var collapseDuration = parseInt(collapseDurationTextBox.value);

                    toolBar.get_collapseAnimation().set_duration(collapseDuration);

                    return false;
                }
            </script>
            
            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451