ToolBar / Client-side Events

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

You can attach to the RadTollBar'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.
   
   

           <script type="text/javascript">
               function onButtonClicked(sender, args)
               {
   	            alert(String.format("Button with text: '{0}' clicked", args.get_item().get_text()));
               }
           </script>
   
           <telerik:RadToolBar ID="RadToolBar1" runat="server"
               OnClientButtonClicked="onButtonClicked">
           </telerik:RadToolBar>
   		

2. Using the client-side API to attach event handlers
   Using the client-side API of RadToolBar 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 toolBar = $find("<%=RadToolBar1.ClientID%>");
   		
   		toolBar.add_buttonClicked(onClickedHandler1);
   		toolBar.add_buttonClicked(onClickedHandler2);
   	}
   </script>
   

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

   <script type="text/javascript">
   	$find(<%=RadToolBar1.ClientID%>).remove_buttonClicked(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 onClientButtonClicking(sender, eventArgs)
   	{
   	    eventArgs.set_cancel(true);
   	}
   </script> 

There are several important points about button checking:

• The CheckedStateChanging and CheckedStateChanged events are fired when a button changes its checked state to On or Off
• There can be only one button (in a group), whose checked state is On. When a button checked state is set to On, the CheckedStateChanging and CheckedStateChanged events (for the button), whose checked state changes to Off, are also fired
• Clicking on a checked button does not change its checked state to Off by default. Use the AllowSelfUnCheck property to turn this behavior on