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

Expanding and Offsetting Items

RadMenu showing different expand directions.

  • About us
    • Mission Statement
    • Strategic Plan
    • Executive Bios
    • Contact Us
  • Products
    • Automotive
    • Machinery
    • Software
    • Customer Goods
  • Contact Us
    • Europe
    • Asia
    • America

RadMenu showing offset options for child items.

  • Save As
    • Word Document
    • Word Template
    • Adobe PDF
    • Other formats
  • Print
    • Print
    • Quick Print
    • Print Preview
  • Publish
    • Run Compatibility Checker
    • Blog
    • Document Management Server
    • Create Document Workspace
  • Send
    • E-mail
    • Create Adobe PDF and Email
    • Create Adobe PDF and Send for Review
    • Internet Fax
  • Prepare
    • Properties
    • Inspect Document
    • Encrypt Document
    • Restrict Permission
    • Add a Digital Signature
    • Mark as Final
  • Close
  • Offset Configurations
  • Spin UpSpin Down
  • Spin UpSpin Down

This demo exemplified two main features of the RadMenu control - how to explicitly set the expand direction of the items (using the GroupSettings) and how to explicitly specify the position where the items should appear.

The Offsetting Items group demonstrates how you can change the default setting for a particular group of items, so that the child items expand somewhere else on the page.

To allow this, the RadMenuItem.GroupSettings class exposes the OffsetX and OffsetY properties. They indicate the horizontal and vertical offset of child menu items. The offset is measured in pixels. You will also need to know that the value is relative to the parent item: the default value in both axes is 0 (no offset).

The Expand Direction section exemplifies how you can use the GroupSettings class. It exposes the ExpandDirection property that controls the expanding direction of the item's children. The values that you can use are Auto (that is the default one) Up, Down, Left, and Right.

The default Auto value will expand child items:

  • downward, if the parent group is horizontal;
  • to the right, if the parent group is vertical.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Menu.Examples.Functionality.ExpandDirection.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</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-medium">

        <h2>RadMenu showing different expand directions.</h2>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadMenuItem Text="About us">
                    <Items>
                        <telerik:RadMenuItem Text="Mission Statement" />
                        <telerik:RadMenuItem Text="Strategic Plan" />
                        <telerik:RadMenuItem Text="Executive Bios" />
                        <telerik:RadMenuItem Text="Contact Us" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Products">
                    <GroupSettings ExpandDirection="Up" />
                    <Items>
                        <telerik:RadMenuItem Text="Automotive" />
                        <telerik:RadMenuItem Text="Machinery" />
                        <telerik:RadMenuItem Text="Software" />
                        <telerik:RadMenuItem Text="Customer Goods" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Contact Us">
                    <GroupSettings ExpandDirection="Right" />
                    <Items>
                        <telerik:RadMenuItem Text="Europe" />
                        <telerik:RadMenuItem Text="Asia" />
                        <telerik:RadMenuItem Text="America" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

    </div>

    <telerik:RadAjaxManager ID="AjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container size-medium">

        <h2>RadMenu showing offset options for child items.</h2>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu2" runat="server" Flow="Vertical" Width="200">
            <Items>
                <telerik:RadMenuItem Text="Save As" ImageUrl="images/14SaveAs.gif" GroupSettings-Flow="Vertical"
                    GroupSettings-OffsetY="-1">
                    <Items>
                        <telerik:RadMenuItem Text="Word Document" ImageUrl="images/41worddoc.gif" />
                        <telerik:RadMenuItem Text="Word Template" ImageUrl="images/42wordtmpl.gif" />
                        <telerik:RadMenuItem Text="Adobe PDF" ImageUrl="images/44pdf.gif" />
                        <telerik:RadMenuItem Text="Other formats" ImageUrl="images/45other.gif" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Print" ImageUrl="images/16print.gif" GroupSettings-Flow="Vertical"
                    GroupSettings-OffsetY="-25">
                    <Items>
                        <telerik:RadMenuItem Text="Print" ImageUrl="images/16print.gif" />
                        <telerik:RadMenuItem Text="Quick Print" ImageUrl="images/16print.gif" />
                        <telerik:RadMenuItem Text="Print Preview" ImageUrl="images/15printPreview.gif" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Publish" ImageUrl="images/16publish.gif" GroupSettings-Flow="Vertical"
                    GroupSettings-OffsetY="-49">
                    <Items>
                        <telerik:RadMenuItem Text="Run Compatibility Checker" ImageUrl="images/07compatibility.gif" />
                        <telerik:RadMenuItem Text="Blog" ImageUrl="images/31blog.gif" />
                        <telerik:RadMenuItem Text="Document Management Server" ImageUrl="images/32docmngr.gif" />
                        <telerik:RadMenuItem Text="Create Document Workspace" ImageUrl="images/33docwspc.gif" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Send" ImageUrl="images/16send.gif" GroupSettings-Flow="Vertical"
                    GroupSettings-OffsetY="-73">
                    <Items>
                        <telerik:RadMenuItem Text="E-mail" ImageUrl="images/21email.gif" />
                        <telerik:RadMenuItem Text="Create Adobe PDF and Email" ImageUrl="images/22emailpdf.gif" />
                        <telerik:RadMenuItem Text="Create Adobe PDF and Send for Review" ImageUrl="images/23reviewpdf.gif" />
                        <telerik:RadMenuItem Text="Internet Fax" ImageUrl="images/24inetfax.gif" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Prepare" ImageUrl="images/16prepare.gif" GroupSettings-Flow="Vertical"
                    GroupSettings-OffsetY="-97">
                    <Items>
                        <telerik:RadMenuItem Text="Properties" ImageUrl="images/01properties.gif" />
                        <telerik:RadMenuItem Text="Inspect Document" ImageUrl="images/02inspect.gif" />
                        <telerik:RadMenuItem Text="Encrypt Document" ImageUrl="images/03encrypt.gif" />
                        <telerik:RadMenuItem Text="Restrict Permission" ImageUrl="images/04restrictperm.gif" />
                        <telerik:RadMenuItem Text="Add a Digital Signature" ImageUrl="images/05addsign.gif" />
                        <telerik:RadMenuItem Text="Mark as Final" ImageUrl="images/06markfinal.gif" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true" />
                <telerik:RadMenuItem Text="Close" ImageUrl="images/17close.gif" />
            </Items>
            <ExpandAnimation Type="None" />
            <CollapseAnimation Type="None" />
        </telerik:RadMenu>

    </div>


    <qsf:ConfiguratorPanel ID="ConfigurationPanel" runat="server" Title="Offset Configurations">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <qsf:NumericTextBox ID="editOffsetX" runat="server" Size="Narrow" CssClass="qsfexInput" Value="0" Label="Offset X:"></qsf:NumericTextBox>
                        <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" ControlToValidate="editOffsetX"
                            ErrorMessage="integer between -200 and 200" Display="Dynamic">
                        </asp:RequiredFieldValidator>
                        <asp:RangeValidator ID="Rangevalidator1" runat="server" ControlToValidate="editOffsetX"
                            Type="Integer" MinimumValue="-200" MaximumValue="200" ErrorMessage="Value must be between -200 and 200"
                            Display="Dynamic" CssClass="qsfexValidator">
                        </asp:RangeValidator>
                    </li>
                    <li>
                        <qsf:NumericTextBox ID="editOffsetY" runat="server" Size="Narrow" CssClass="qsfexInput" Value="0" Label="Offset Y:"></qsf:NumericTextBox>
                        <asp:RequiredFieldValidator ID="Requiredfieldvalidator2" runat="server" ControlToValidate="editOffsetY"
                            ErrorMessage="integer between -200 and 200" Display="Dynamic" CssClass="qsfexValidator"></asp:RequiredFieldValidator>
                        <asp:RangeValidator ID="Rangevalidator2" runat="server" ControlToValidate="editOffsetY"
                            Type="Integer" MinimumValue="-200" MaximumValue="200" ErrorMessage="Value must be between -200 and 200"
                            Display="Dynamic" CssClass="qsfexValidator"></asp:RangeValidator>
                    </li>
                    <li>
                        <qsf:Button runat="server" ID="btnApplyChanges" Size="Narrow" Text="Apply" OnClick="btnApplyChanges_Click" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance