RadToolBar supports a number of client-side events that let you customize the behavior of the toolbar:

• OnClientLoad occurs when the toolbar is first loaded
• OnClientButtonClicked occurs immediately after the toolbar responds to a button click.
• OnClientButtonClicking occurs when the user clicks on a button before the toolbar responds to the click.
• OnClientDropDownClosed occurs after the drop-down list has been closed
• OnClientDropDownClosing occurs before the drop-down list closes
• OnClientDropDownOpened occurs after the drop-down list has been opened
• OnClientDropDownOpening occurs before the drop-down list opens
• OnClientCheckedStateChanged occurs immediately after a button has been checked
• OnClientCheckedStateChanging occurs before a button has been checked.
• OnClientContextMenu occurs when the user right clicks on a button.
• OnClientMouseOver occurs when the mouse moves over a button.
• OnClientMouseOut occurs when the mouse moves off a button.

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 RadToolBar property.

CopyASPX

<script>
    function OnClientButtonClicking(sender, args) {
        args.set_cancel(true);    
    }
  </script>

<telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Horizontal" OnClientButtonClicking="OnClientButtonClicking">
    <CollapseAnimation Duration="200" Type="OutQuint" />
    <Items>
        <telerik:RadToolBarButton Text="button1" runat="server">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarDropDown Text="dropdown" runat="server">
            <Buttons>
                <telerik:RadToolBarButton Text="Button2" runat="server">
                </telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarDropDown>
    </Items>
</telerik:RadToolBar>

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 toolBar = $find("<%=RadToolBar1.ClientID%>");

    toolBar.add_buttonClicked(OnClickedHandler1);
    toolBar.add_buttonClicked(OnClickedHandler2);
}

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

CopyJavaScript

function removeOnClicked2() {
    var toolBar = $find("<%=RadToolBar1.ClientID%>");
    toolBar.remove_buttonClicked(onClickedHandler1);
}

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