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

Events Overview

RadMenu and RadContextMenu support a number of client-side events that let you customize the behavior of the menu:

OnClientLoad occurs when the menu is first loaded.
OnClientItemClicking occurs when the user clicks on an item before the menu responds to the click.
OnClientItemClicked occurs immediately after the menu responds to an item click.
OnClientMouseOver occurs when the mouse moves over the menu.
OnClientMouseOut occurs when the mouse moves off of the menu.
OnClientItemOpening occurs immediately before an item expands to show its child items.
OnClientItemOpened occurs immediately after an item expands to show its child items.
OnClientItemClosing occurs immediately before an item contracts, hiding its child items.
OnClientItemClosed occurs immediately after an item contracts to hide its child items.
OnClientItemFocus occurs when focus moves to an item.
OnClientItemBlur occurs when focus leaves an item.
OnClientItemPopulating occurs when an item with ExpandMode set to "WebService" is opened, immediately before the menu calls the Web service to populate the list of child items.
OnClientItemPopulated occurs immediately after the list of child items for an item with ExpandMode set to "WebService" has been populated by a Web service.
OnClientItemPopulationFailed occurs when an attempt to populate a list of child items using a Web service fails.
OnClientShowing (RadContextMenu only) occurs immediately before the context menu appears.
OnClientShown (RadContextMenu only) occurs immediately after the context menu appears.
OnClientHidden (RadContextMenu only) occurs when the context menu disappears.
OnClientHiding (RadContextMenu only) occurs immediately before the context menu disappears.

To use these events, simply write a javascript function that can be called when the event occurs. Then assign the name of the javascript function as the value of the the corresponding RadMenu or RadContextMenu property.

ASP.NET

<script type="text/javascript">
    function onClicking(sender, eventArgs) {
        var item = eventArgs.get_item();
        var navigateUrl = item.get_navigateUrl();
        if (navigateUrl && navigateUrl != "#") {
            var proceed = confirm("Navigate to " + navigateUrl + " ?");     
            if (!proceed)     
            {       
                eventArgs.set_cancel(true);     
            }   
        } 
    }
</script>
<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" OnClientItemClicking="onClicking">
...
</telerik:RadMenu>

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

JavaScript

function onClickedHandler1() {
    alert("First handler called");
}

function onClickedHandler2() {
    alert("Second handler called");
}

function pageLoad() {
    var menu = $find("<%=RadMenu1.ClientID%>");
    menu.add_itemClicked(onClickedHandler1);
    menu.add_itemClicked(onClickedHandler2);
}

Another advantage of the client-side API is that you can detach an event handler dynamically:

JavaScript

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

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondance between client-side and server-side names:

Server-Side Name	Client-Side Name	Methods to add and Remove
OnClientLoad	load	add_load, remove_load
OnClientItemClicking	itemClicking	add_itemClicking, remove_itemClicking
OnClientItemClicked	itemClicked	add_itemClicked, remove_itemClicked
OnClientMouseOver	mouseOver	add_mouseOver, remove_mouseOver
OnClientMouseOut	mouseOut	add_mouseOut, remove_mouseOut
OnClientItemOpening	itemOpening	add_itemOpening, remove_itemOpening
OnClientItemOpened	itemOpened	add_itemOpened, remove_itemOpened
OnClientItemClosing	itemClosing	add_itemClosing, remove_itemClosing
OnClientItemClosed	itemClosed	add_itemClosed, remove_itemClosed
OnClientItemFocus	itemFocus	add_itemFocus, remove_itemFocus
OnClientItemBlur	itemBlur	add_itemBlur, remove_itemBlur
OnClientItemPopulating	itemPopulating	add_itemPopulating, remove_itemPopulating
OnClientItemPopulated	itemPopulated	add_itemPopulated, remove_itemPopulated
OnClientItemPopulationFailed	itemPopulationFailed	add_itemPopulationFailed, remove_itemPopulationFailed
OnClientShowing	showing	add_showing, remove_showing
OnClientShown	shown	add_shown, remove_shown
OnClientHidden	hidden	add_hidden, remove_hidden

Enabling and disabling events

If you want for some reason to temporarily "mute" the control event emitting (or, respectively, to "unmute" the events again), you may use the disableEvents() and enableEvents() methods. Unlike adding and removing individual event handlers, enableEvents() and disableEvents() affect all events at once.

For a live example illustrating the RadMenu client-side events, see Client-side events.

Events Overview

Enabling and disabling events

See Also