Check it out: Live Telerik UI for ASP.NET AJAX & all .NET Web Products Release Webinar on Tuesday 26 | 11 AM ET.
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
<%@ 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>