Edit this page

RadMenu and RadContextMenu Objects

Common API

Both the RadMenu and the RadContextMenu client-side objects have many of the same methods. The following table lists the most important of these common client-side methods:

 

Name Parameters Return Type Description
trackChanges none none Begins tracking changes to the Menu items. Only changes to the items that occur between a call to trackChanges and commitChanges persist after a postback. See Example 1.
commitChanges none none Ends tracking changes to the Menu items. Only changes to the items that occur between a call to trackChanges and commitChanges persist after a postback.
disable none none Disables all items in the Menu. Clicking on any item has no effect, child items cannot be opened. See Example 2.
enable none none Enables all items in the Menu. See Example 3.
get_enabled none boolean True if the Menu is enabled. To enable a Menu, use the enable() method.
close none none Closes all opened items. In Mobile renderMode it closes the Menu too. See Example 8 below.
findItemByValue (string value) RadMenuItem Returns the first RadMenuItem object whose Value property is equal to the passed parameter.
findItemByText (string text) RadMenuItem Returns the first RadMenuItem object whose Text property is equal to the passed parameter.
findItemByUrl (string URL) RadMenuItem Returns the first RadMenuItem object whose NavigateUrl property is equal to the passed parameter.
findItemByAbsoluteUrl (string URL) RadMenuItem Returns the first RadMenuItem object whose NavigateUrl property is equal to the passed parameter. Note that the parameter should end with '/' like:var item = sender.findItemByAbsoluteUrl('http://www.test.com/');
findItemByAttribute (string attributeName, string value) RadMenuItem Returns the first RadMenuItem object with a custom attribute of the specified name that has the specified value.
get_items none RadMenuItemCollection Returns the collection of root level items. See Example 4.
get_allItems none Array Gets a linear collection of all items. This includes all root and child items in the Menu. See Example 5.
focus none none Brings the focus to the Menu so that it can be controlled via the keyboard.
get_focusedItem none RadMenuItem Returns the focused root level item. Null if no item has focus.
get_openedItem none RadMenuItem Returns the opened root level item. If no item is opened at the root level returns null.
get_selectedItem none RadMenuItem Returns the selected Menu item. If no item is selected returns null.
get_attributes none Collection Returns the collection of custom attributes for the Menu.
get_clicked none Boolean True if the user has clicked on a root Menu item to expand it when ClickToOpen is True.
set_clicked Boolean none Sets whether the user has clicked on a root Menu item to expand it when ClickToOpen is True. See example here.
get_element none HTML Element Gets the DOM element for the Menu.
get_contextMenuElement none HTML Element Gets the DOM element for the Menu.
get_childListElement none HTML Element Gets the DOM element for the list of items in the Menu.
enableEvents none none Enables the control client-side event emitting. Events are enabled by default.
disableEvents none none Disables the control client-side event emitting.
add_ (mixed eventHandler) none Attaches an eventHandler to the event with the name <EventName>. Note that client-side event names differ from their server-side counterparts. For more information, see Client-Side Events. See Example 6.
remove_ (mixed eventHandler) Boolean Detaches an eventHandler from the event with the name <EventName>. Returns "true" if the eventHandler is found and detached, "false" otherwise. For more information, see Client-Side Events. See Example 7.
note

Client side changes are available on the server side after postback. You can use the ClientChanges property to access them.

Example 1: Add a new Menu item and persist it after a postback.

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

Example 2: Disable the Menu.

function DisableMenu()
{  
    var menu = $find("<%= RadMenu1.ClientID %>"); 
    menu.disable();
}       

Example 3: Enable the Menu.

function EnableMenu()
{  
    var menu = $find("<%= RadMenu1.ClientID %>");  
    menu.enable();
}       

Example 4: Get a collection with the root items and display each item's text.

function showRootItems()
{  
    var menu = $find("<%= RadMenu1.ClientID %>");
    var items = menu.get_items();
    for (var i=0; i < items.get_count(); i++)  
    {    
        alert(items.getItem(i).get_text());
    }
}               

Example 5: Get a collection with all Menu items and display each item's text.

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

Example 6: Attach a client-side event handler to the Menu.

function OnClientItemBlurHandler()
{   
    alert( "goodbye");
}

function AttachBlurHandler()
{   
    var menu = $find("<%=RadMenu1.ClientID %>");
    menu.add_itemBlur(OnClientItemBlurHandler);
}       

Example 7: Remove a client-side event handler from the Menu.

function OnClientItemBlurHandler()
{   
    alert( "goodbye");
}

function DetachBlurHandler()
{   
    var menu = $find("<%=RadMenu1.ClientID %>");
    menu.remove_itemBlur(OnClientItemBlurHandler);
}           

Example 7: Close menu when its item is clicked.

<telerik:RadMenu runat="server" ID="RadMenu1" RenderMode="Lightweight" OnClientItemClicking="closeMenu">
    <Items>
        <telerik:RadMenuItem Text="hover for submenu">
            <Items>
                <telerik:RadMenuItem Text="click to close menu"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>
<script>
    function closeMenu(sender, args) {
        args.set_cancel(true);//prevent default postback/navigation. Not needed for OnClientClicked event
        //do work here
        setTimeout(function () {
            sender.close();//close the menu
        }, 0);
    }
</script>       

RadContextMenu-specific API

The RadContextMenu client-side object has some additional methods that are specific to it:

Name Parameters Return Type Description
show (event) none Displays the menu as a pop-up, using the position in the DOM event that is passed as a parameter.
showAt (int X, int Y) none Displays the menu as a pop-up at the coordinates specified by the parameters. Note that when calling showAt from in response to a client-side event, it is a good idea to call $telerik.cancelRawEvent(event) afterwards in order to prevent the default event processing from hiding the context menu you just displayed.
hide none none Hides the menu.
get_targets none Array Returns the array of targets to which the context menu is attached. Each target identifies an element or family of elements that cause the menu to appear when right-clicked.
addTargetElement element none Attaches the context menu to the specified target element.
removeTargetElement element none Detaches the context menu from the specified target element.

RadContextMenu static objects and methods

  • The Telerik.Web.UI.RadContextMenu.contextMenus holds a static collection with references to all [RadContextMenu] (/controls/menu/context-menus/radcontextmenu-object)s on the page.
function iterateThroughAllContextMenus() 
{    
    var contextMenus = Telerik.Web.UI.RadContextMenu.contextMenus;     
    for (var contextMenuId in contextMenus) 
    {        
        var contextMenu = contextMenus[contextMenuId];
        ...    
    }
}           
  • The Telerik.Web.UI.RadContextMenu.hideAll method hides all visible RadContextMenu Objects on the page.

  • addTargetElement(element), removeTargetElement(element) methods to dynamically add/remove targets to the context menu.

See Also