Edit this page

Events Overview

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

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.

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

<telerik:RadToolBar RenderMode="Lightweight" 
    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:

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:

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:

Server-Side Name Client-SideName Methods to add and Remove
OnClientLoad load add_load, remove_load
OnClientButtonClicking buttonClicking add_buttonClicking, remove_buttonClicking
OnClientButtonClicked buttonClicked add_buttonClicked, remove_buttonClicked
OnClientDropDownClosed dropDownClosed add_dropDownClosed, remove_dropDownClosed
OnClientDropDownClosing dropDownClosing add_dropDownClosing, remove_dropDownClosing
OnClientDropDownOpened dropDownOpened add_dropDownOpened, remove_dropDownOpened
OnClientDropDownOpening dropDownOpening add_dropDownOpening, remove_dropDownOpening
OnClientCheckedStateChanged checkedStateChanged add_checkedStateChanged, remove_checkStateChanged
OnClientCheckedStateChanging checkedStateChanging add_checkedStateChanging, remove_checkStateChanging
OnClientContextMenu contextMenu add_contextMenu, remove_contextMenu
OnClientMouseOver mouseOver add_mouseOver, remove_mouseOver
OnClientMouseOut mouseOut add_mouseOut, remove_mouseOut

See Also