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

Orientation

  • 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
    • 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..
  • Demo Configurator

Orientation


You can control the orientation of the menu by setting its Flow property either to Horizontal or Vertical. The default value of the Flow property is Horizontal.

When Flow is set, its value determines the the flow of the root group. If set for a particular item, it will affect the item's children.

In this example, the Flow property is set in the code-behind upon selecting an item in the RadioButtonList on the right.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Menu.Examples.Functionality.ItemFlow.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

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

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

    <div class="demo-container size-narrow">
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" />
    </div>



    <qsf:ConfiguratorPanel ID="ConfigurationPanel" runat="server" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList runat="server" ID="OrientationButtonList" Label="Orientation" Orientation="Horizontal" AutoPostBack="true">
                    <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance