RadMenu for ASP.NET
Table of Contents
Expand and Collapse Behavior Send comments on this topic.
See Also
Feature overview > Expand and Collapse Behavior

Glossary Item Box

Setting the flow direction of the menu

The Flow property from the RadMenu class determines the behavior of Telerik RadMenu when child items are expanded or collapsed from their parent item. The property takes two values, Horizontal (default) and Vertical.

Pic. 1 below illustrates the default flow behavior of a horizontal menu:

Pic. 1

The default expanding direction of menu items

Below is the ASPX code of the menu in Pic. 1. The menu items highlighted in the picture are bold. The Flow property is not set, and therefore has accepted the default value.

ASPX Copy Code
<rad:RadMenu ID="RadMenu1" runat="server" Skin="Outlook">
   <Items>
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem1">
           <Items>
                <rad:RadMenuItem runat="server" Text="Child RadMenuItem1">
                   <Items>
                        <rad:RadMenuItem runat="server" Text="Child RadMenuItem11">
                           <Items>
                                <rad:RadMenuItem runat="server" Text="Child RadMenuItem111" />
                            </Items>
                       </rad:RadMenuItem>
                       <rad:RadMenuItem runat="server" Text="Child RadMenuItem12" />
                    </Items>
               </rad:RadMenuItem>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem2" />
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem3" />
            </Items>
       </rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem2" />
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem3" />
   </Items>
</rad:RadMenu>

Customizing the flow and expanding direction per item

The RadMenuItemGroupSettings class exposes the Flow and ExpandDirection properties. By setting these properties for a particular item, you define the flow and expanding direction of the item's children.

ExpandDirection has the following possible values:

  • Auto
    The expanding direction is inherited from the default behavior of the menu.
  • Up, Down, Left, Right
    The expanding direction changes in the specified direction. The values you set here do not propagate to subsequent hierarchical levels: that is, the selected item's children will expand in the new direction but their children will inherit the default behavior of the menu.
Flow and ExpandDirection are properties from the GroupSettings collection of RadMenuItem. To access GroupSettings:
  1. In the Visual Studio design surface, right-click the instance of Telerik RadMenu, and then select Build RadMenu.
  2. Select the desired item, and click GroupSettings. The properties you set under GroupSettings (Pic. 2) will affect the children of the selected item.

Pic. 2

The GroupSettings collection

Example

Pic. 3 shows a menu with the default flow and expanding behavior. The GroupSettings collection is used explicitly only for one of the levels, where the expanding direction takes a sharp turn. The example clearly illustrates that the change affects only the next level.

Pic. 3

Group settings are applied to one of the levels.

ASPX Copy Code
<rad:RadMenu ID="RadMenu1" runat="server" Skin="Outlook">
   <Items>
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem1">
           <Items>
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem1" />
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem2" />
               <rad:RadMenuItem runat="server" Text="Child RadMenuItem3">
                   <Items>
                       <radM :RadMenuItem runat="server" Text="Child RadMenuItem31">
                           <Items>
                               <rad:RadMenuItem runat="server" Text="Child RadMenuItem311">
                                   <Items>
                                       <rad:RadMenuItem runat="server" Text="Child RadMenuItem3111" />
                                   </Items>
                               </rad:RadMenuItem>
                               <rad:RadMenuItem runat="server" Text="Child RadMenuItem312" />
                           </Items>
                           <GroupSettings ExpandDirection="Up" />
                       </rad:RadMenuItem>
                       <rad:RadMenuItem runat="server" Text="Child RadMenuItem32" />
                   </Items>
               </rad:RadMenuItem>
           </Items>
       </rad:RadMenuItem>
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem2" />
       <rad:RadMenuItem runat="server" Text="Root RadMenuItem3" />
   </Items>
</rad:RadMenu>

 

Setting Expand Effects

The following properties allow you to apply animated effects to the expanding and collapsing behavior of Telerik RadMenu:

  • ExpandAnimation / CollapseAnimation
    The properties from these groups specify the animation effect (if any) that accompanies the expanding or collapsing of child items.
    • Duration
      In milliseconds
    • Type
      A list of predefined animation effects to choose from
  • ExpandDelay / CollapseDelay
    These properties set the period of time (in milliseconds) between the mouse entering / leaving a menu item (or clicking the item - if ClickToOpen = "True") and the children starting to expand or collapse respectively. 

See Also