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:

 

Event	Applies to	Description
OnValueChanged	all RadInput controls	Occurs after a new value has been assigned when the control loses focus.
OnFocus	all RadInput controls	Occurs when the control gets focus, if it is not ReadOnly.
OnBlur	all RadInput controls	Occurs when the control loses focus, if it is not ReadOnly.
OnButtonClick	all RadInput controls	Occurs when the user clicks on the button that is associated with the input control.
OnKeyPress	all RadInput controls.	Occurs when the user presses a key to enter a value.
OnDisable	all RadInput controls	Occurs when the control is disabled.
OnEnable	all RadInput controls	Occurs when the control is enabled.
OnError	RadNumericTextBox , RadMaskedTextBox , and RadDateInput	Occurs when the user enters an invalid value.
OnLoad	all RadInput controls	Occurs when the control is loaded on the client.
OnMouseOver	all RadInput controls	Occurs when the mouse enters the input area.
OnMouseOut	all RadInput controls	Occurs when the mouse leaves the input area.
OnMoveDown	RadMaskedTextBox	Occurs when the user decreases the value of an enumeration or numeric range mask part.
OnMoveUp	RadMaskedTextBox	Occurs when the user increases the value of an enumeration or numeric range mask part.
OnEnumerationChanged	RadMaskedTextBox	Occurs when the value of an enumeration part of a mask is set.

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.

<script type="text/javascript">
    function OnMaskError(sender, args)
    {
        var message = "Invalid character - " + args.get_newValue();
        alert(message);
    }
</script>
<telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" PromptChar="_" Mask="(###) ###-#####"
    Skin="Web20">
    <ClientEvents OnError="OnMaskError" />
</telerik:RadMaskedTextBox>

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

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 Name	Client-SideName	Methods to add and Remove
OnValueChanged	valueChanged	add_valueChanged, remove_valueChanged
OnFocus	focus	add_focus, remove_focus
OnBlur	blur	add_blur, remove_blur
OnButtonClick	buttonClick	add_buttonClick, remove_buttonClick
OnKeyPress	keyPress	add_keyPress, remove_keyPress
OnDisable	disable	add_disable, remove_disable
OnEnable	enable	add_enable, remove_enable
OnError	error	add_error, remove_error
OnLoad	load	add_load, remove_load
OnMouseOver	mouseOver	add_mouseOver, remove_mouseOver
OnMouseOut	mouseOut	add_mouseOut, remove_mouseOut
OnMoveDown	moveDown	add_moveDown, remove_moveDown
OnMoveUp	moveUp	add_moveUp, remove_moveUp
OnEnumerationChanged	enumerationChanged	add_enumerataionChanged, remove_enumerationChanged

See Also

• TextChanged Event