New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Events Overview

The RadInput controls support a number of client-side events that let you respond to user actions without a postback. The following table lists the various client events, and which controls they apply to:

 

EventApplies toDescription
OnValueChangingRadTextBox , RadNumericTextBox , and RadDateInputOccurs when the control loses focus after the user has changed its value, before the new value is assigned.
OnValueChangedall RadInput controlsOccurs after a new value has been assigned when the control loses focus.
OnFocusall RadInput controlsOccurs when the control gets focus, if it is not ReadOnly.
OnBlurall RadInput controlsOccurs when the control loses focus, if it is not ReadOnly.
OnButtonClickall RadInput controlsOccurs when the user clicks on the button that is associated with the input control.
OnKeyPressall RadInput controls.Occurs when the user presses a key to enter a value.
OnDisableall RadInput controlsOccurs when the control is disabled.
OnEnableall RadInput controlsOccurs when the control is enabled.
OnLoadall RadInput controlsOccurs when the control is loaded on the client.
OnMouseOverall RadInput controlsOccurs when the mouse enters the input area.
OnMouseOutall RadInput controlsOccurs when the mouse leaves the input area.
OnClientPasswordStrengthCalculatingRadTextBox and RadInputManager with a TextBoxSettingOccurs when using the password strength check feature and changing the text, before the indicator is updated.

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

ASPNET
<script type="text/javascript">
	function OnTextError(sender, args)
	{
		var message = "Invalid character - " + args.get_newValue();
		alert(message);
	}
</script>
<telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server"
	Skin="Web20">
	<ClientEvents OnError="OnTextError" />
</telerik:RadTextBox>

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:

JavaScript
function onClickHandler1()
{
	alert("First handler called");
}
function onClickHandler2()
{
	alert("Second handler called");
}
function pageLoad()
{
	var inputControl = $find('<%=RadInput1.ClientID%>');
	inputControl.add_buttonClick(OnClickHandler1);
	inputControl.add_buttonClick(OnClickHandler2);
}

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

JavaScript
function removeOnClick2()
{
	var inputControl = $find('<%=RadInput1.ClientID%>');
	inputControl.remove_buttonClick(OnClickHandler2);
}

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

 

Server-Side NameClient-SideNameMethods to add and Remove
OnValueChangingvalueChangingadd_valueChanging, remove_valueChanging
OnValueChangedvalueChangedadd_valueChanged, remove_valueChanged
OnFocusfocusadd_focus, remove_focus
OnBlurbluradd_blur, remove_blur
OnButtonClickbuttonClickadd_buttonClick, remove_buttonClick
OnKeyPresskeyPressadd_keyPress, remove_keyPress
OnDisabledisableadd_disable, remove_disable
OnEnableenableadd_enable, remove_enable
OnErrorerroradd_error, remove_error
OnLoadloadadd_load, remove_load
OnMouseOvermouseOveradd_mouseOver, remove_mouseOver
OnMouseOutmouseOutadd_mouseOut, remove_mouseOut
OnMoveDownmoveDownadd_moveDown, remove_moveDown
OnMoveUpmoveUpadd_moveUp, remove_moveUp
OnEnumerationChangedenumerationChangedadd_enumerataionChanged, remove_enumerationChanged

See Also

In this article
See Also
Not finding the help you need?
Contact Support