RadMenu for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

RadMenuItem objects provide a special collection called Attributes. You can use this collection to expand the information stored with the items. The Attributes collection lets you store any number of attributes as name/value pairs. You can specify custom attributes declaratively in the RadMenuItem tag or programmatically using the Attributes collection of the RadMenuItem. You can also access custom attributes client-side, using the get_attributes collection of the RadMenuItem client-side object.

Setting Attributes Declaratively

In the ASP.NET declaration of your RadMenu object, you can add custom attributes to menu items by simply adding Name="value" to the RadMenuItem declaration. For example, the following RadMenu definition adds a "State" custom attribute to its non-root menu items:

CopyASPX
<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Office2007" Width="54px" OnClientItemClicked="ToggleCheck"
    CssClass="qsfexMenu" OnClientItemOpening="ApplyChildrenImages">
    <Items>
        <telerik:RadMenuItem Text="Format">
            <Items>
                <telerik:RadMenuItem State="unchecked" Text="Bold">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem State="unchecked" Text="Italic">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem State="unchecked" Text="Underlined">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Data Binding with Custom Attributes

When binding the RadMenu to data, custom attributes can be set in the ItemDataBound event. The following code binds the menu to a DataTable when the page Loads. The DataTable contains a "Roles" column which is not mapped to a property of the menu items:

 

The "Roles" column is mapped to a custom attribute in the ItemDataBound event handler. The event handler also sets the ToolTip property of the item to the value of its custom attribute to allow for testing of the custom attribute:

 

Using Attributes in Server-Side Code

You can access custom attributes from code behind via the Attributes collection exposed by the RadMenuItem class.

 

Using Attributes in Client-Side Code

You can work with custom attributes from client-side code using the attributes collection returned by the get_attributes method of the client-side RadMenuItem object. The attributes collection has a getAttribute method that lets you get attribute values, and a setAttribute method that lets you set them:

CopyJavaScript
    function ToggleCheck(sender, args) {
        var menu = sender;
        var item = args.get_item();
        // Menu item without image? Ignore.
        if (!item.get_imageElement()) return;

        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();
        ApplyImage(item);
    }

To see a live example that demonstrates these techniques, see Custom Attributes.

See Also