All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
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>