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

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

Find Assistance

Help Us Improve

Was this example helpful?