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

Scrolling and Multi-column Menu

Scrolling Items

  • File
    • New
    • Open
    • Save
    • Save As
    • Print Preview
    • Print
    • Close
  • Edit
    • Undo
    • Cut
    • Copy
    • Paste
    • Clipboard...
  • Insert
    • Break...
    • Page Numbers...
    • Date and Time...
    • Field...
    • Symbol...
    • Comment
    • Picture
    • Diagram
    • Text Box
    • Hyperlink
  • Format
    • Font
      • Arial
      • Verdana
      • Tahoma
      • Sans-serif
      • Arial
      • Arial Black
      • Arial Narrow
      • Arial Unicode MS
      • Bookman Old Style
      • Bookshelf Symbol 7
      • Century
      • Century Gothic
      • Comic Sans MS
      • Courier New
      • Garamond
      • Georgia
      • Goudy Old Style
      • Goudy Stout
      • Haettenschweiler
      • Helvetica
      • Impact
      • Imprint MT Shadow
      • Latha
      • Lucida Console
      • Lucida Sans
      • Lucida Sans Typewriter
      • Lucida Sans Unicode
    • Paragraph...
    • Bullets and Numbering...
    • Borders and Shading...
    • Columns
    • Tabs
    • Change Case
    • Background
    • Theme
    • Frames
    • Autoformat
  • View
    • Normal
    • Web Layout
    • Print Layout
    • Task Pane
  • Tools
    • Spelling And Grammar...
    • Research...
    • Language
    • Word Count...
    • Track Changes
    • Compare And Merge Documents..
  • Help

Multi-column Menu

  • Products
      • UI for ASP.NET AJAX
      • UI for ASP.NET MVC
      • UI for WinForms
      • UI for WPF
      • UI for Silverlight
      • Reporting
      • Data Access
      • Sitefinity ASP.NET CMS
      • Test Studio
  • Consulting
      • On-site Training
      • Consulting Express
      • Open Classes Training
      • Online Training
      • Project Consulting
      • Telerik Webinars
  • Purchase
      • Buy Now
      • Renewals & Upgrades
      • License Agreement
      • FAQ
      • Purchase Orders
      • Contact Sales
  • Support
      • Support by Product
      • Documentation
      • Demos
      • Knowledge Base
      • Telerik Trainer
      • Videos
      • Skins
  • Community
      • Forums
      • Blogs
      • Events
      • Code Library
      • Learning Resources
      • Announcements
      • Free Products
  • Company
      • About Telerik
      • Press Center
      • Careers
      • Contact Us
  • Multi-column Menu Configurator

This demo exemplifies the two ways that you can chooses between when it comes to locating many items as children to a root item. You can either have scrolling or multi-columns in such case.

In the Multi-column section we demonstrate how the RadMenu supports multi-column rendering of child items. This feature is controlled by the GroupSettings (either DefaultGroupSettings or per-item GroupSettings) using two properties:

The RepeatDirection property determines the order in which the items are rendered. If this property is set to RepeatDirection.Vertical, the items are displayed in columns loaded from top to bottom, then left to right, until all items are rendered.

If this property is set to RepeatDirection.Horizontal, the items are displayed in rows loaded from left to right, then top to bottom, until all items are rendered. The RepeatDirection has no effect if RepeatColumns is set to 1 (default).

The RepeatColumns property specifies the number of columns. Note that scrolling of the control is disabled if multi-column rendering is in effect.

In the Scrolling Items section above we exemplify the RadMenu control support of scrolling its items - both root and child items. If the overall height (for the child items) or width (for the root items) of the items exceeds the predefined group's height or width, scrolling arrows will appear. You can use the mouse pointer or the mouse wheel to scroll the items.

  • If the RadMenuItem.GroupSettings.Height property is specified and the size of the content exceeds that height - vertical scrolling will be enabled.
  • If the RadMenuItem.GroupSettings.Width property is specified and the size of the content exceeds that width - horizontal scrolling will be enabled.

Here is some sample code demonstrating how you can set the GroupSettings properties in the markup: 

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Outlook">
    <Items>
        <telerik:RadMenuItem Text="Corporate">
            <GroupSettings Height="100px"></GroupSettings>
            <Items>
                ...
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Products">
            <GroupSettings Width="200px" Flow="Horizontal"></GroupSettings>
            <Items>
                ...
            </Items>
        </telerik:RadMenuItem>        
    </Items>
</telerik:RadMenu>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Menu.Examples.MultiColumnMenu.DefaultCS" %>

<!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-wide">
        <h2>Scrolling Items </h2>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu2" runat="server"
            EnableRootItemScroll="true" Width="250px" EnableShadows="true">
            <Items>
                <telerik:RadMenuItem Text="File" GroupSettings-Height="100px">
                    <Items>
                        <telerik:RadMenuItem Text="New" />
                        <telerik:RadMenuItem Text="Open" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Save" />
                        <telerik:RadMenuItem Text="Save As" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Print Preview" />
                        <telerik:RadMenuItem Text="Print" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Close" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit" GroupSettings-Height="100px">
                    <Items>
                        <telerik:RadMenuItem Text="Undo" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Cut" />
                        <telerik:RadMenuItem Text="Copy" />
                        <telerik:RadMenuItem Text="Paste" />
                        <telerik:RadMenuItem Text="Clipboard..." />
                        <telerik:RadMenuItem IsSeparator="True" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Insert" GroupSettings-Height="100px">
                    <Items>
                        <telerik:RadMenuItem Text="Break..." />
                        <telerik:RadMenuItem Text="Page Numbers..." />
                        <telerik:RadMenuItem Text="Date and Time..." />
                        <telerik:RadMenuItem Text="Field..." />
                        <telerik:RadMenuItem Text="Symbol..." />
                        <telerik:RadMenuItem Text="Comment" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Picture" />
                        <telerik:RadMenuItem Text="Diagram" />
                        <telerik:RadMenuItem Text="Text Box" />
                        <telerik:RadMenuItem Text="Hyperlink" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Format" GroupSettings-Height="200px">
                    <Items>
                        <telerik:RadMenuItem Text="Font" GroupSettings-Height="200">
                            <Items>
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Verdana" />
                                <telerik:RadMenuItem Text="Tahoma" />
                                <telerik:RadMenuItem Text="Sans-serif" />
                                <telerik:RadMenuItem IsSeparator="true" />
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Arial Black" />
                                <telerik:RadMenuItem Text="Arial Narrow" />
                                <telerik:RadMenuItem Text="Arial Unicode MS" />
                                <telerik:RadMenuItem Text="Bookman Old Style" />
                                <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
                                <telerik:RadMenuItem Text="Century" />
                                <telerik:RadMenuItem Text="Century Gothic" />
                                <telerik:RadMenuItem Text="Comic Sans MS" />
                                <telerik:RadMenuItem Text="Courier New" />
                                <telerik:RadMenuItem Text="Garamond" />
                                <telerik:RadMenuItem Text="Georgia" />
                                <telerik:RadMenuItem Text="Goudy Old Style" />
                                <telerik:RadMenuItem Text="Goudy Stout" />
                                <telerik:RadMenuItem Text="Haettenschweiler" />
                                <telerik:RadMenuItem Text="Helvetica" />
                                <telerik:RadMenuItem Text="Impact" />
                                <telerik:RadMenuItem Text="Imprint MT Shadow" />
                                <telerik:RadMenuItem Text="Latha" />
                                <telerik:RadMenuItem Text="Lucida Console" />
                                <telerik:RadMenuItem Text="Lucida Sans" />
                                <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
                                <telerik:RadMenuItem Text="Lucida Sans Unicode" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Paragraph..." />
                        <telerik:RadMenuItem Text="Bullets and Numbering..." />
                        <telerik:RadMenuItem Text="Borders and Shading..." />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Columns" />
                        <telerik:RadMenuItem Text="Tabs" />
                        <telerik:RadMenuItem Text="Change Case" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Background" />
                        <telerik:RadMenuItem Text="Theme" />
                        <telerik:RadMenuItem Text="Frames" />
                        <telerik:RadMenuItem Text="Autoformat" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="View" GroupSettings-Width="200px" GroupSettings-Flow="Horizontal">
                    <Items>
                        <telerik:RadMenuItem Text="Normal" />
                        <telerik:RadMenuItem Text="Web Layout" />
                        <telerik:RadMenuItem Text="Print Layout" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Task Pane" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Tools" GroupSettings-Height="100px">
                    <Items>
                        <telerik:RadMenuItem Text="Spelling And Grammar..." />
                        <telerik:RadMenuItem Text="Research..." />
                        <telerik:RadMenuItem Text="Language" />
                        <telerik:RadMenuItem Text="Word Count..." />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Track Changes" />
                        <telerik:RadMenuItem Text="Compare And Merge Documents.." />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Help"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <div class="demo-container size-wide">
        <h2>Multi-column Menu </h2>
        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" DataSourceID="SiteMapDataSource" MaxDataBindDepth="2"
            EnableRoundedCorners="true" EnableShadows="true" EnableTextHTMLEncoding="true">
            <DefaultGroupSettings RepeatColumns="2" RepeatDirection="Vertical" />
        </telerik:RadMenu>
        <asp:SiteMapDataSource runat="server" ID="SiteMapDataSource" ShowStartingNode="false"
            SiteMapProvider="ExamplesProvider"></asp:SiteMapDataSource>
    </div>



    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel" Title="Multi-column Menu Configurator">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <qsf:NumericTextBox runat="server" ID="TBRepeatColumns" MinValue="0" MaxValue="3" Size="Narrow" Label="Number of columns" Value="2">
                            <NumberFormat DecimalDigits="0" />
                        </qsf:NumericTextBox>
                    </li>
                    <li>
                        <qsf:RadioButtonList ID="RBLDirection" runat="server" Label="Repeat direction" Orientation="Horizontal">
                            <asp:ListItem Value="Vertical" Selected="True" />
                            <asp:ListItem Value="Horizontal" />
                        </qsf:RadioButtonList>
                    </li>
                    <li>
                        <qsf:Button runat="server" Size="Narrow" ID="btnApplyChanges" Text="Apply" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance