Edit this page

Layout of Child Items

By default, when the user expands a menu item from a horizontal layout, the child items appear immediately below it, stacked vertically. When the user expands a menu item from a vertical layout, the child items appear immediately beside it, stacked vertically:

RadMenu Default Layout

You can change this default layout of child items using the GroupSettings property of the parent item. To access the GroupSettings property at design time, select the item in the RadMenu Item Builder.

GroupSettings is a composite property, with the following sub-properties:

  • ExpandDirection determines where the list of child items appears relative to the parent item.

  • Auto (the default) causes child items to inherit the expand direction that applied to the parent item.

  • Up causes child items to appear above the parent item:RadMenu Upward Expansion

  • Down causes child items to appear below the parent item:RadMenu Downward Expansion

  • Left causes child items to appear to the left of the parent item:RadMenu Left Expansion

  • Right causes child items to appear to the right the parent item:RadMenu Right Expansion

note

By default, if the specified ExpandDirection would cause items to cross a screen boundary, the list of child items appears in the opposite direction from the one specified. You can override this behavior by setting the EnableScreenBoundaryDetection property to False .

  • Flow controls how the child items are stacked.

  • When Flow is Vertical (the default) child items appear on top of each other:RadMenu Downward Expansion

  • When Flow is Horizontal, child items appear beside each otherRadMenu Horizontal Childs

  • Height and Width control the height and width of the area in which the child items can expand. When Flow is Vertical, and Height is too small to fit all items, the list of items becomes scrollable:RadMenu Scroll Height

Similarly, when Flow is Horizontal, and Width is too small to fit all items, the list of items becomes scrollable:

RadMenu Scroll Width

  • OffsetX and OffsetY are the offsets, in pixels, of the child items from the parent item. Setting these sub-properties lets you specify a gap between the parent item and its child items:RadMenu Offsets

The following RadMenu declaration shows how the GroupSettings is attached to the parent menu item. It gives all items that have children an ExpandDirection of Down, a Flow of Horizontal, and an OffsetX of 10 pixels:

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Flow="Horizontal" Skin="Vista">
    <Items>
        <telerik:RadMenuItem runat="server" Text="Root Item 1">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Child Item 1.1">
                    <GroupSettings ExpandDirection="Down" Flow="Horizontal" OffsetX="10" />
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child Item 1.1.1">
                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child Item 1.1.2">
                            <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child Item 1.2">
                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child Item 1.3">
                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                </telerik:RadMenuItem>
            </Items>
            <GroupSettings ExpandDirection="Down" Flow="Horizontal" OffsetX="10" />
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="Root Item 2">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Child Item 2.1">
                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child Item 2.2">
                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                </telerik:RadMenuItem>
            </Items>
            <GroupSettings ExpandDirection="Down" Flow="Horizontal" OffsetX="10" />
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

This produces the following menu:

RadMenu Horizontal Childs

  • The RepeatColumns property specifies the number of columns. (added in Q3 2009)

  • The RepeatDirection property determines the order in which the items are rendered. (added in Q3 2009)

See Also