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 / Custom Attributes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • Custom attributes are a convenient way to store custom data for menu items.

    There are three ways of defining custom attributes:

    • Define custom attributes inline (in the ASPX/ASCX file) 
        <telerik:RadMenuItem  State="unchecked" Text="Bold" ></telerik:RadMenuItem>
    • Define custom attributes in the code-behind.

           [C#] 
        RadMenuItem item = new RadMenuItem();
  item.Attributes["State"] = "unchecked";
           [VB] 
        Dim item As RadMenuItem = New RadMenuItem()
  item.Attributes("State") = "unchecked"
    • Define custom attributes at the client-side:

       <script type="text/javascript">
   function toggleCheck (sender, args)
   {
 	var item = args.get_item();

              //Pass the "AttributeName" and "AttributeValue" as parameters of the setAttribute method
	item.get_attributes().setAttribute("State", "checked");
      
                 

              //You can obtain the value of a custom attribute like shown below

              //Pass the "AttributeName" as a parameter of the getAttribute method:
      
var state = item.get_attributes().getAttribute("State");
   }
 </script>

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Menu.CustomAttributes.DefaultCS" %>

    <%@ 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" %>
    <!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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>

        <script type="text/javascript">
        //<!--
        
        function ToggleCheck (sender, args)
        {
            var menu = sender;
            var item = args.get_item();
            var state = item.get_attributes().getAttribute("State");
            
            // Changes to text, value, attributes, etc. will be tracked
            // and persisted to the server after this function call.
            menu.trackChanges();

            if (state == "unchecked")
                item.get_attributes().setAttribute("State", "checked");
            else
                item.get_attributes().setAttribute("State", "unchecked");

            menu.commitChanges();
        }
        
        //-->
        </script>

        <style type="text/css">
        
        .example-panel
        {
            width: 719px;
            height: 222px;
            background: transparent url('Images/exampleBG.png') no-repeat 0 0;
            padding: 40px 14px 14px 13px;
        }
        
        #ParagraphPanel
        {
            zoom: 1;
        }
        
        .text-panel
        {
            height: 102px;
            overflow-y:scroll;
            padding: 20px;
        }
        
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" />
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadMenu1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Paragraph" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
            <div class="example-panel">
                <telerik:RadMenu ID="RadMenu1" runat="server"
                    OnClientItemClicking="ToggleCheck" OnItemClick="RadMenu1_ItemClick"
                    EnableRoundedCorners="true" EnableShadows="true" style="float:none">
                    <Items>
                        <telerik:RadMenuItem Text="Format" PostBack="False">
                            <Items>
                                <telerik:RadMenuItem State="unchecked" Text="Bold" />
                                <telerik:RadMenuItem State="unchecked" Text="Italic" />
                                <telerik:RadMenuItem State="unchecked" Text="Underlined" />
                            </Items>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
                <asp:Panel runat="server" ID="Paragraph" Style="clear: left;" CssClass="text-panel">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                    Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                    unknown printer took a galley of type and scrambled it to make a type specimen book.
                    It has survived not only five centuries, but also the leap into electronic typesetting,
                    remaining essentially unchanged. It was popularised in the 1960s with the release
                    of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </asp:Panel>
            </div>
            <qsf:Footer ID="Footer1" runat="server" />
        </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