Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Menu / Templates


  • RadMenu fully supports templates. You can embed any content inside a RadMenu template:

    • HTML markup
    • ASP.NET server controls
    • Third-party controls (other Telerik controls as well)

    You can define two types of RadMenu templates:

    1. Global Templates - template that is automatically applied to all items: 

          <telerik:RadMenu ID="RadMenu1" runat="server">

    
             <ItemTemplate>

    
                   ... 

    
             </ItemTemplate>

    
   
      </telerik:RadMenu>

    2. Per-item template - template that overrides the global template on a item basis. 

         <telerik:RadMenu ID="RadMenu1" runat="server">

    
        <telerik:RadMenuItem Text="Node">

    
            <ItemTemplate>

    
                   ...

    
            <ItemTemplate>

    
        </telerik:RadMenuItem>

    
     </telerik:RadMenu>


    This example shows the usage of per-item templates.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>

    <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Menu.Templates.DefaultVB" %>

    <!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 id="Head1" runat="server">
        <qsf:headtag id="Headtag1" runat="server"></qsf:headtag>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <script type="text/javascript">
            function itemClicking(sender, eventArgs)
            {
                // Prevent server-side click and postback for templated items
                if (eventArgs.get_item().get_templated())
                    eventArgs.set_cancel(true);
            }
        </script>
        <qsf:header id="Header1" runat="server" navigationlanguage="VB" ShowSkinChooser="false">
            </qsf:header>
        <div class="example-panel">
            <asp:Panel runat="server" ID="UserDetailsPanel" Visible="false" CssClass="user-details">
                Welcome, <asp:Label runat="server" ID="LoginLabel" />
                <div>Your login was successful.</div>
            </asp:Panel>
            <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Vista" Style="float: none;" CssClass="TemplateMenu"
                             OnItemClick="RadMenu1_ItemClick" OnClientItemClicking="itemClicking">
                <Items>
                    <telerik:RadMenuItem Text="Products" NavigateUrl="http://www.telerik.com/products">
                        <Items>
                            <telerik:RadMenuItem CssClass="aspnet-ajax">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/aspnet-ajax"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">ASP.NET Ajax</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="winforms">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/winforms"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">WinForms</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="wpf">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/wpf"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">WPF</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="silverlight">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/silverlight"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">Silverlight</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="reporting">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/reporting"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">Reporting</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="orm">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/orm"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">ORM</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="sitefinity">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/sitefinity"><span class="telerik-logo">Telerik</span>
                                        <span class="item-title">Sitefinity</span> </a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Support">
                        <GroupSettings Width="410px" />
                        <Items>
                            <telerik:RadMenuItem CssClass="support-firstColumn demos">
                                <ItemTemplate>
                                    <a href="http://demos.telerik.com">Demos</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-secondColumn trainer">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/support/trainer.aspx">Telerik Trainer</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-firstColumn samples">
                                <ItemTemplate>
                                    <a href="http://demos.telerik.com">Sample applications</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-secondColumn documentation">
                                <ItemTemplate>
                                    <a href="http://demos.telerik.com">Documentation</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-firstColumn video">
                                <ItemTemplate>
                                    <a href="http://tv.telerik.com">Video Tutorials</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-secondColumn kb">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/support/kb/">Knowledge Base</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-firstColumn webinars">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/consulting/webinar.aspx">Webinars</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="support-secondColumn code">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/community/code-library.aspx">Code Library</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Community">
                        <GroupSettings Width="495" />
                        <Items>
                            <telerik:RadMenuItem CssClass="community-firstColumn style">
                                <ItemTemplate>
                                    <a href="http://stylebuilder.telerik.com/">Meet the Visual Style Builder</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="community-secondColumn falafel">
                                <ItemTemplate>
                                    <a href="http://falafel.com/telerik/open_access_online.aspx">New dedicated training
                                        on Telerik OpenAccess ORM</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="community-firstColumn case">
                                <ItemTemplate>
                                    <a href="http://www.telerik.com/products/sitefinity/telerik-case-study.aspx">Case Study:
                                        How we moved telerik.com to Sitefinity CMS</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem CssClass="community-secondColumn dilemma">
                                <ItemTemplate>
                                    <a href="http://blogs.telerik.com/manoldonev/posts/09-03-17/silverlight_radchart_interoperability_with_asp_net.aspx">
                                        ASP.NET Ajax or Silverlight - a Dilemma or an Opportunity?</a>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Logout" Visible="false" />
                    <telerik:RadMenuItem Text="Login" PostBack="false">
                        <Items>
                            <telerik:RadMenuItem CssClass="login">
                                <ItemTemplate>
                                    <asp:Label ID="Label1" AssociatedControlID="UserNameTextBox" Text="username" runat="server" />
                                    <asp:TextBox runat="server" ID="UserNameTextBox"></asp:TextBox>
                                    <asp:Label ID="Label2" AssociatedControlID="PasswordTextBox" Text="password" runat="server" />
                                    <asp:TextBox runat="server" ID="PasswordTextBox" TextMode="Password"></asp:TextBox>
                                    <div style="padding-top:2px">
                                    <a href="#">Forgot password?</a><span style="color:#fff">&nbsp;|&nbsp;</span><a href="#">Register</a>
                                    <asp:LinkButton runat="server" ID="LoginButton" CssClass="login-button" Text="Login" OnClick="LoginButton_Click"></asp:LinkButton>
                                    </div>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        <qsf:footer id="Footer1" runat="server"></qsf:footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451