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

RadMenu provides a flexible client-side API. You can easily interact with the menu in the browser using the menu client-side object. In addition to a variety of client-side events, the client-side object model lets you achieve complicated tasks while avoiding unnecessary post-backs.

Getting the RadMenu client-side object

RadMenu creates a client-side object with the ClientID of the menu. You can obtain the reference using the following JavaScript code:

CopyJavaScript
var menu = $find("<%= RadMenu1.ClientID %>");

Getting the instance of a particular RadMenuItem

Once you have the client-side object of RadMenu, you can use the findItemByText() method to get the instance of a particular item:

CopyJavaScript
var menu= $find("<%= RadMenu1.ClientID %>");var item = menu.findItemByText(text);

Cancelling an action

Several client side events occur immediately before the menu performs some action. Most of these events all have names that end in "-ing". You can use these events to cancel the menu action by using the cancel property of the eventArgs passed to the handler:

CopyJavaScript
function OnClientItemOpening(sender, eventArgs) {
    eventArgs.set_cancel(true); 
}

Calling a client-side method

When you get the instance of the RadMenu object, you can call client-side methods to perform certain tasks. Consider the following examples:

  • open()

    CopyJavaScript
    function openItem(text) {
    var menu = $find("<%= RadMenu1.ClientID %>");
    var item = menu.findItemByText(text);
    if (item) {
        item.open();
    }
    else {
        alert("Item with text '" + text + "' not found.");
    }
}

  • close()

    CopyJavaScript
    function CloseItem(text) {
    var menu = $find("<%= RadMenu1.ClientID %>");
    var item = menu.findItemByText(text);
    if (item) {
        item.close();
    }
    else {
        alert("Item with text '" + text + "' not found.");
    }
}

  • disable()

    CopyJavaScript
    function DisableItem(text) {
    var menu = $find("<%= RadMenu1.ClientID %>");
    var item = menu.findItemByText(text);
    if (item) {
        item.disable();
    }
    else {
        alert("Item with text '" + text + "' not found.");
    }
}

  • enable()

    CopyJavaScript
    function EnableAll() {
    var menu = $find("<%= RadMenu1.ClientID %>");
    for (var i = 0; i < menu.get_allItems().length; i++) {
        menu.get_allItems()[i].enable();
    }
}

Preserving Changes

By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods:

CopyJavaScript
function AddNewItem() {     
    var menu = $find("<%= RadMenu1.ClientID %>");
    var menuItem = new Telerik.Web.UI.RadMenuItem();
    menuItem.set_text("New Item");
    menu.trackChanges();
    menu.get_items().add(menuItem);
    menu.commitChanges();        
}

See Also