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

Expand Animation

  • ASP.NET controls
    • RadMenu
    • RadTabStrip
    • RadPanelBar
    • RadpanelBar
  • WinForms controls
    • RadMenustrip
    • RadTabStrip
    • RadToolStrip
  • Other projects
    • SiteFinity
    • Reporting
    • RadAjax
  • Demo Configurator
Expand Animation
  • Linear

Collapse Animation
  • Linear

You can customize the way the panel-items expand and collapse.

The ExpandAnimation and CollapseAnimation tags of RadPanelBar are used to customize the way groups 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 ExpandDelay and CollapseDelay properties set the period of time (in milliseconds) between clicking the item and the children starting to expand or collapse respectively.

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"/>
        <ExpandAnimation Type="OutQuart" Duration="300" />
        <CollapseAnimation Type="OutQuint" Duration="200" />
        ...
    </telerik:RadPanelBar>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="PanelBar.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:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="100%" ExpandMode="MultipleExpandedItems">
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenu" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadPanelBar" />
                        <telerik:RadPanelItem Text="RadpanelBar" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="WinForms controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenustrip" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadToolStrip" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Other projects">
                    <Items>
                        <telerik:RadPanelItem Text="SiteFinity" />
                        <telerik:RadPanelItem Text="Reporting" />
                        <telerik:RadPanelItem Text="RadAjax" />
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function applyChanges() {
                var panelBar = $find("<%=RadPanelBar1.ClientID %>");
                var expandAnimationTypeDropDown = $find("<%=ddlExpandType.ClientID %>");

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

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

                panelBar.get_expandAnimation().set_duration(expandDuration);

                var collapseAnimationTypeDropDown = $find("<%=ddlCollapseType.ClientID %>");

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

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

                panelBar.get_collapseAnimation().set_duration(collapseDuration);
             
                panelBar.get_items().getItem(0).set_expanded(!panelBar.get_items().getItem(0).get_expanded());
            }
        </script>
    </telerik:RadScriptBlock>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View >
                <qsf:ConfiguratorColumn runat="server" Title="Expand Animation" Size="Medium">
                   <ul class="fb-group">
                        <li>
                            <label>Type</label>
                            <qsf:DropDownList ID="ddlExpandType" runat="server" />
                        </li>
                        <li>
                            <label>Duration</label>
                            <qsf:TextBox ID="editExpandDuration" runat="server" Text="200" /><br />
                            <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>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Collapse Animation" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <label>Type</label>
                            <qsf:DropDownList ID="ddlCollapseType" runat="server" />
                        </li>
                        <li>
                            <label>Duration</label>
                            <qsf:TextBox ID="editCollapseDuration" runat="server" Text="200" />
                            <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>
                        </li>
                    </ul>
                    <p class="buttons">
                        <qsf:Button runat="server" ID="btnApplyChanges" Text="Apply" AutoPostBack="false"
                            OnClientClicked="applyChanges" />
                    </p>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance