Menu - Expand on Touch Devices

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The newly introduced functionality of the Toggle Handle is specially designed to improve the usability and provide a unified behavior of the RadMenu when used either on a traditional desktop or on a touch device.

You can use this functionality by setting the ShowToggleHandle property of the control to true (this property is set to false by default). Once you set this property, an arrow called Toggle Handle will appear next to the item's text.

By clicking or touching it (depending on the device that you use) you can show or hide the sub items of the corresponding item of the RadMenu. Thus, you can freely expand or collapse items without executing any other action like navigation or a server-side event execution for instance.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />

    <div class="demo-container">
        <asp:Label ID="CurrentPage" CssClass="demo-label" runat="server"></asp:Label>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" ShowToggleHandle="true"
            EnableShadows="true" EnableTextHTMLEncoding="true">
            <Items>
                <telerik:RadMenuItem Text="Products" NavigateUrl="DefaultCS.aspx?Page=Products">
                    <Items>
                        <telerik:RadMenuItem Text="UI for ASP.NET AJAX" NavigateUrl="DefaultCS.aspx?Page=ASP.NET AJAX Controls" />
                        <telerik:RadMenuItem Text="UI for WinForms" NavigateUrl="DefaultCS.aspx?Page=WinForms Controls" />
                        <telerik:RadMenuItem Text="UI for WPF" NavigateUrl="DefaultCS.aspx?Page=WPF Controls" />
                        <telerik:RadMenuItem Text="UI for Silverlight" NavigateUrl="DefaultCS.aspx?Page=Silverlight Controls" />
                        <telerik:RadMenuItem Text="Reporting" NavigateUrl="DefaultCS.aspx?Page=Telerik Reporting" />
                        <telerik:RadMenuItem Text="Data Access" NavigateUrl="DefaultCS.aspx?Page=Telerik OpenAccess ORM" />
                        <telerik:RadMenuItem Text="Sitefinity ASP.NET CMS" NavigateUrl="DefaultCS.aspx?Page=Sitefinity ASP.NET CMS" />
                        <telerik:RadMenuItem Text="Test Studio" NavigateUrl="DefaultCS.aspx?Page=WebUI Test Studio" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Consulting" NavigateUrl="DefaultCS.aspx?Page=Consulting">
                    <Items>
                        <telerik:RadMenuItem Text="On-site Training" NavigateUrl="DefaultCS.aspx?Page=On-site Training" />
                        <telerik:RadMenuItem Text="Consulting Express" NavigateUrl="DefaultCS.aspx?Page=Consulting Express" />
                        <telerik:RadMenuItem Text="Open Classes Training" NavigateUrl="DefaultCS.aspx?Page=Open Classes Training" />
                        <telerik:RadMenuItem Text="Online Training" NavigateUrl="DefaultCS.aspx?Page=Online Training" />
                        <telerik:RadMenuItem Text="Project Consulting" NavigateUrl="DefaultCS.aspx?Page=Project Consulting" />
                        <telerik:RadMenuItem Text="Telerik Webinars" NavigateUrl="DefaultCS.aspx?Page=Telerik Webinars" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Purchase" NavigateUrl="DefaultCS.aspx?Page=Purchase">
                    <Items>
                        <telerik:RadMenuItem Text="Buy Now" NavigateUrl="DefaultCS.aspx?Page=Buy Now" />
                        <telerik:RadMenuItem Text="Renewals &amp; Upgrades" NavigateUrl="DefaultCS.aspx?Page=Renewals &amp; Upgrades" />
                        <telerik:RadMenuItem Text="License Agreement" NavigateUrl="DefaultCS.aspx?Page=License Agreement" />
                        <telerik:RadMenuItem Text="FAQ" NavigateUrl="DefaultCS.aspx?Page=FAQ" />
                        <telerik:RadMenuItem Text="Purchase Orders" NavigateUrl="DefaultCS.aspx?Page=Purchase Orders" />
                        <telerik:RadMenuItem Text="Contact Sales" NavigateUrl="DefaultCS.aspx?Page=Contact Sales" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Support" NavigateUrl="DefaultCS.aspx?Page=Support">
                    <Items>
                        <telerik:RadMenuItem Text="Support by Product" NavigateUrl="DefaultCS.aspx?Page=Support by Product" />
                        <telerik:RadMenuItem Text="Documentation" NavigateUrl="DefaultCS.aspx?Page=Documentation" />
                        <telerik:RadMenuItem Text="Demos" NavigateUrl="DefaultCS.aspx?Page=Demos" />
                        <telerik:RadMenuItem Text="Knowledge Base" NavigateUrl="DefaultCS.aspx?Page=Knowledge Base" />
                        <telerik:RadMenuItem Text="Telerik Trainer" NavigateUrl="DefaultCS.aspx?Page=Telerik Trainer" />
                        <telerik:RadMenuItem Text="Videos" NavigateUrl="DefaultCS.aspx?Page=Videos" />
                        <telerik:RadMenuItem Text="Skins" NavigateUrl="DefaultCS.aspx?Page=Skins" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Community" NavigateUrl="DefaultCS.aspx?Page=Community">
                    <Items>
                        <telerik:RadMenuItem Text="Forums" NavigateUrl="DefaultCS.aspx?Page=Forums" />
                        <telerik:RadMenuItem Text="Blogs" NavigateUrl="DefaultCS.aspx?Page=Blogs" />
                        <telerik:RadMenuItem Text="Events" NavigateUrl="DefaultCS.aspx?Page=Events" />
                        <telerik:RadMenuItem Text="Code Library" NavigateUrl="DefaultCS.aspx?Page=Code Library" />
                        <telerik:RadMenuItem Text="Learning Resources" NavigateUrl="DefaultCS.aspx?Page=Learning Resources" />
                        <telerik:RadMenuItem Text="Announcements" NavigateUrl="DefaultCS.aspx?Page=Announcements" />
                        <telerik:RadMenuItem Text="Free Products" NavigateUrl="DefaultCS.aspx?Page=Free Products" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Company" NavigateUrl="DefaultCS.aspx?Page=Company">
                    <Items>
                        <telerik:RadMenuItem Text="About Telerik" NavigateUrl="DefaultCS.aspx?Page=About Telerik" />
                        <telerik:RadMenuItem Text="Press Center" NavigateUrl="DefaultCS.aspx?Page=Press Center" />
                        <telerik:RadMenuItem Text="Careers" NavigateUrl="DefaultCS.aspx?Page=Careers" />
                        <telerik:RadMenuItem Text="Contact Us" NavigateUrl="DefaultCS.aspx?Page=Contact Us" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?