New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Events

  • Select
  • Save
  • Load
  • Format
    • Bold
    • Italic
    • Underline
  • Apply Color (Red)
    • Red
    • Blue
    • Yellow
  • Edit
  • Add
  • Delete
Event log
  • Logged 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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ToolBar.Examples.ClientSide.ClientEvents.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[

        function onClientToolBarLoad(sender, args) {
            logEvent("OnClientLoad: " + sender.get_id());
        }

        function clientButtonClicking(sender, args) {
            logEvent("OnClientButtonClicking: " + args.get_item().get_text());
        }

        function clientButtonClicked(sender, args) {
            logEvent("OnClientButtonClicked: " + args.get_item().get_text());
        }

        function clientDropDownOpening(sender, args) {
            logEvent("OnClientDropDownOpening: " + args.get_item().get_text());
        }

        function clientDropDownOpened(sender, args) {
            logEvent("OnClientDropDownOpened: " + args.get_item().get_text());
        }

        function clientDropDownClosing(sender, args) {
            logEvent("OnClientDropDownClosing: " + args.get_item().get_text());
        }

        function clientDropDownClosed(sender, args) {
            logEvent("OnClientDropDownClosed: " + args.get_item().get_text());
        }

        function clientContextMenu(sender, args) {
            logEvent("OnClientContextMenu: " + args.get_item().get_text());
        }

        function clientMouseOver(sender, args) {
            logEvent("OnClientMouseOver: " + args.get_item().get_text());
        }

        function clientMouseOut(sender, args) {
            logEvent("OnClientMouseOut: " + args.get_item().get_text());
        }

        function clientCheckedStateChanging(sender, args) {
            logEvent("OnClientCheckedStateChanging: " + args.get_item().get_text());
        }

        function clientCheckedStateChanged(sender, args) {
            logEvent("OnClientCheckedStateChanged: " + args.get_item().get_text());
        }

        //]]>
    </script>
    <div class="demo-container size-narrow">
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
            OnClientLoad="onClientToolBarLoad" OnClientButtonClicking="clientButtonClicking"
            OnClientButtonClicked="clientButtonClicked" OnClientDropDownOpening="clientDropDownOpening"
            OnClientDropDownOpened="clientDropDownOpened" OnClientDropDownClosing="clientDropDownClosing"
            OnClientDropDownClosed="clientDropDownClosed" OnClientContextMenu="clientContextMenu"
            OnClientMouseOver="clientMouseOver" OnClientMouseOut="clientMouseOut" OnClientCheckedStateChanging="clientCheckedStateChanging"
            OnClientCheckedStateChanged="clientCheckedStateChanged">
            <Items>
                <telerik:RadToolBarButton Text="Select" AllowSelfUnCheck="True" CheckOnClick="True">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Save">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Load">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="Format">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Bold" CheckOnClick="true" Group="FormatBold" Checked="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Italic" CheckOnClick="true" Group="FormatItalic">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Underline" CheckOnClick="true" Group="FormatUnderline">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
                <telerik:RadToolBarSplitButton Text="Apply Color (Red)" EnableDefaultButton="false">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Red" CheckOnClick="true" Group="ApplyColor" Checked="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Blue" CheckOnClick="true" Group="ApplyColor">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Yellow" CheckOnClick="true" Group="ApplyColor">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarSplitButton>
            </Items>
        </telerik:RadToolBar>
        <telerik:RadContextMenu id="RadContextMenu1" runat="server">
            <Targets>
                <telerik:ContextMenuControlTarget ControlID="RadToolBar1" />
            </Targets>
            <Items>
                <telerik:RadMenuItem Text="Edit" Value="E" />
                <telerik:RadMenuItem Text="Add" Value="A" />
                <telerik:RadMenuItem Text="Delete" Value="D" />
            </Items>
        </telerik:RadContextMenu>
    </div>
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1" Height="200px"></qsf:EventLogConsole>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Logged events" Orientation="Vertical" Expanded="true">
        <Views>
            <qsf:View>
                <asp:CheckBoxList ID="cblLoggedEvents" runat="server" AutoPostBack="true" OnSelectedIndexChanged="cblLoggedEvents_SelectedIndexChanged">
                    <asp:ListItem Text="OnClientLoad" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientButtonClicking" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientButtonClicked" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientDropDownOpening" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientDropDownOpened" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientDropDownClosing" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientDropDownClosed" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientContextMenu" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientMouseOver" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientMouseOut" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientCheckedStateChanging" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="OnClientCheckedStateChanged" Selected="true"></asp:ListItem>
                </asp:CheckBoxList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance