Button

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Button - Client-side Events

CheckBox Button
ToggleButton: Mute
Clear log Event log:

Client-Side Events

RadButton exposes several client-side events which allow easy and flexible use in a wide range of application scenarios:

  • OnClientLoad - raised when the control is initialized.
  • OnClientClicking - raised when the user clicks the button. The event can be canceled.
  • OnClientClicked - raised when the button is clicked. The event is subsequent to the OnClientClicking event.
  • OnClientMouseOver - raised when the mouse hovers over the control.
  • OnClientMouseOut - raised when the mouse leaves the control.
  • OnClientCheckedChanging - raised when the Checked property of the RadButton control is about to be changed. The event can be canceled. 
  • OnClientCheckedChanged - raised after the Checked property of the RadButton control is changed.
  • OnClientToggleStateChanging - raised the SelectedToggleStateIndex property of the RadButton control is about to be changed. The event can be canceled.
  • OnClientToggleStateChanged - raised after the SelectedToggleStateIndex property of the RadButton control is changed.
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET Button Demo - Client-side Events</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <script type="text/javascript">
          //<![CDATA[
          function OnClientLoad(sender, eventArgs) {
               logEvent("Load event: <strong>" + sender.get_text() + "</strong> is loaded.");
               sender.set_autoPostBack(false);
          }

          function OnClientClicking(sender, eventArgs) {
               logEvent("Clicking event: <strong>" + sender.get_text() + "</strong> fired clicking.");
          }

          function OnClientClicked(sender, eventArgs) {
               logEvent("Clicked event: <strong>" + sender.get_text() + "</strong> was clicked.");
          }

          function OnClientMouseOver(sender, eventArgs) {
               logEvent("MouseOver event: The mouse is over <strong>" + sender.get_text() + "</strong>.");
          }

          function OnClientMouseOut(sender, eventArgs) {
               logEvent("MouseOut event: The mouse has left <strong>" + sender.get_text() + "</strong>.");
          }

          function OnClientCheckedChanging(sender, eventArgs) {
               var checked = (sender.get_checked()) ? "checked" : "unchecked";
               logEvent("CheckedChanging event: The <strong>" + sender.get_text() + "</strong> is " + checked + ".");
          }

          function OnClientCheckedChanged(sender, eventArgs) {
               var checked = (sender.get_checked()) ? "checked" : "unchecked";
               logEvent("CheckedChanged event: The <strong>" + sender.get_text() + "</strong> is " + checked + ".");
          }

          function OnClientToggleStateChanging(sender, eventArgs) {
               logEvent("ToggleStateChanging event: <strong>" + sender.get_text() + "</strong> SelectedToggleStateIndex: " + sender.get_selectedToggleStateIndex());
          }

          function OnClientToggleStateChanged(sender, eventArgs) {
               logEvent("ToggleStateChanged event: <strong>" + sender.get_text() + "</strong> SelectedToggleStateIndex: " + sender.get_selectedToggleStateIndex());
          }
          
          //]]>
     </script>
     <telerik:RadButton ID="btnStandard" runat="server" Text="Standard Button" OnClientLoad="OnClientLoad"
          OnClientClicking="OnClientClicking" OnClientClicked="OnClientClicked" OnClientMouseOver="OnClientMouseOver"
          OnClientMouseOut="OnClientMouseOut">
     </telerik:RadButton>
     <div style="padding: 5px">
     </div>
     <telerik:RadButton ID="btnCheckBox" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
          Text="CheckBox Button" OnClientLoad="OnClientLoad" OnClientClicking="OnClientClicking"
          OnClientClicked="OnClientClicked" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
          OnClientCheckedChanging="OnClientCheckedChanging" OnClientCheckedChanged="OnClientCheckedChanged">
     </telerik:RadButton>
     <div style="padding: 5px">
     </div>
     <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" ToggleType="CustomToggle"
          Text="CustomToggle Button" OnClientLoad="OnClientLoad" OnClientClicking="OnClientClicking"
          OnClientClicked="OnClientClicked" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
          OnClientToggleStateChanging="OnClientToggleStateChanging" OnClientToggleStateChanged="OnClientToggleStateChanged">
          <ToggleStates>
               <telerik:RadButtonToggleState Text="ToggleButton: Mute"></telerik:RadButtonToggleState>
               <telerik:RadButtonToggleState Text="ToggleButton: Low"></telerik:RadButtonToggleState>
               <telerik:RadButtonToggleState Text="ToggleButton: Medium"></telerik:RadButtonToggleState>
               <telerik:RadButtonToggleState Text="ToggleButton: High"></telerik:RadButtonToggleState>
          </ToggleStates>
     </telerik:RadButton>
     <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" Height="300px">
     </qsf:EventLogConsole>
    </form>
</body>
</html>