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.

CopyASPX

<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 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:

CopyJavaScript

    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:

CopyJavaScript

    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: