Menu / Client-side Events

RadMenu provides a number of client-side events that would allow you to accomplish even the most complicated tasks.

You can attach to the RadMenu's events by using either the server-side properties or the client-side API.

1. Attaching event handlers via a server-side property
   Each client-side event has a corresponding property, whose name is formed like OnClient[EventName].
   You can set the property to the name of the function to be called when the event occurs.

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

2. Using the client-side API to attach event handlers
   Using the client-side API of RadMenu allows you to attach multiple event handlers to one event using the standard MS AJAX conventions.

   <script type="text/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);
   	}
   </script>
   

   Another advantage of the client-side API is the possiblity of dynamically detaching certain handlers. You can use the remove_itemClicked method of the menu object.
   
   

   <script type="text/javascript">
   	$find(<%=RadMenu1.ClientID%>).remove_itemClicked(onClickedHandler1);
   </script>
   

3. Cancelling an event
   The events, whose names end in ing, can be cancelled. You can cancel the event by using the set_cancel method of the event arguments passed to the handler.

   <script type="text/javascript">
   	function onClientItemClicking(sender, eventArgs)
   	{
   	    eventArgs.set_cancel(true);
   	}
   </script>