New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Attributes

  • Format
    • Bold
    • Italic
    • Underlined
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>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Menu.Examples.CustomAttributes.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">
        <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">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-container">

        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" OnClientItemClicking="ToggleCheck"
            OnItemClick="RadMenu1_ItemClick" EnableRoundedCorners="true" EnableShadows="true" Skin="Office2007">
            <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" 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>

    <telerik:RadScriptBlock runat="server">
        <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>
    </telerik:RadScriptBlock>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance