Telerik RadInput components provide rich API allowing the developer to control the client-side behavior.

Getting the client-side object

All the API methods are accessible via the registered JavaScript objects for each control.  A global variable with the same name as the ClientID of the control will be available for each control:

Getting the client-side object	Copy Code
<script type="text/javascript"> var dateInput = window["<%= RadDateInput1.ClientID %>"]; var date = dateInput.GetDate(); </script>

Client-side events

Client-side events are fired upon user action such as attempting to type an unacceptable symbol. Event handler is assigned by setting the corresponding property. Below is an example with RadDateInput and its OnError event:

Client-side events

Copy Code

<script type="text/javascript"> function OnDateError(sender, args) {   switch (args.Reason)   {      case RadInputErrorReason.ParseError:        HandleDateParseError(args.InputText.toUpperCase());        break;      case RadInputErrorReason.OutOfRange:        HandleDateOutOfRange(args.InputText.toUpperCase());        break;   } } </script> <rad:RadDateInput SelectedDate="11/12/2007" ID="RadDateInput1" runat="server"> <ClientEvents OnError="OnDateError" /> </rad:RadDateInput>

Note that there are default values for Min and MaxDate of RadDateInput controls - 1/1/1980 and 12/31/2099. Any valid dates (such having no more than 4 digits) out of this default range will cause RadInputErrorReason.OutOfRange error reason in the above example. If one inputs an year like 20007 for example, the error reason will be ParseError instead.

The same error event for RadMaskedTextBox:

	Copy Code
<script type="text/javascript"> function OnMaskError (sender, args) {    var message = "Invalid character - " + args.NewValue;    alert(message); } </script> <rad:RadMaskedTextBox    ID="RadMaskedTextBox1"    runat="server"    PromptChar="_"    ShowHint="True"    Mask="(###) ###-#####"    OnClientError="OnMaskError"    Skin="MacOS"> </rad:RadMaskedTextBox>

RadTextBox Client-side events

1. OnBlur - fired when the input control loses focus
2. OnButtonClick - fired when the postback button (if displayed) beside the input control is clicked
3. OnDisable - fired when the input is disabled
4. OnEnable - fired when the input is enabled
5. OnError - fired when the user enters invalid data
6. OnFocus - fired when the input control gains focus
7. OnLoad - fired when the input control is loaded on the client
8. OnMouseOut - fired when the mouse cursor leaves the input area
9. OnMouseOver - fired when the mouse cursor is over the input
10. OnValueChanged - fired when the data entry in the input is changed by the user (right after the control loses focus)
11. OnKeyPress - The OnKeyPress event occurs when a keyboard key is pressed or held down.

RadNumericTextBox Client-side events

RadDateInput Client-side events

1. OnBlur - fired when the input control loses focus
2. OnButtonClick - fired when the postback button (if displayed) beside the input control is clicked
3. OnDisable - fired when the input is disabled
4. OnEnable - fired when the input is enabled
5. OnError - fired when the user enters an invalid date. This can be triggered both by an unparseable date or a date that is outside the Min/Max date range.
6. OnFocus - fired when the input control gains focus
7. OnLoad - fired when the input control is loaded on the client
8. OnMouseOut - fired when the mouse cursor leaves the input area
9. OnMouseOver - fired when the mouse cursor is over the input
10. OnValueChanged - fired when the data entry in the input is changed by the user (right after the control loses focus)
11. OnKeyPress - The OnKeyPress event occurs when a keyboard key is pressed or held down.
    

RadMaskedTextBox Client-side events

1. OnClientEnumerationChanged - fired when the value of any enumeration mask part has changed.
2. OnClientMoveUp - fired when the user increases the value of any enumeration mask part or numeric range mask part with either keyboard arrow keys or mouse wheel.
3. OnClientMoveDown - fired when the user decreases the value of any enumeration mask part or numeric range mask part with either keyboard arrow keys or mouse wheel.
4. OnClientError - fired when user types unacceptable symbol.
5. OnClientValueChanged - fired whenever the value of the control changes.
6. OnClientShowHint - fired after the hint is shown.
7. OnKeyPress - The OnKeyPress event occurs when a keyboard key is pressed or held down.

You can review the online demo related to the client-side API of RadInput here.

Change the appearance style of RadInput controls on the client

As the RadInput controls have its own style mechanism, you should change some of its appearance styles so it could be preserved when the control state is changed (i.e. when it is focused, hovered etc.). Below is a sample code how you could change the EnabledStyle of a RadTextBox instance at onload client-side event hander of the page body.

	Copy Code
<head runat="server"> <script type="text/javascript" > function Load() {  var tb = window["RadTextBox1"];  tb.Styles.EnabledStyle[0] += "background-color: lemonchiffon;";  tb.UpdateCssClass(); } </script> </head> <body onload="Load()"> <form id="form1" runat="server">  <div>    <rad:RadTextBox ID="RadTextBox1" runat="server">    </rad:RadTextBox>  </div> </form> </body>

You could review all appearance style from the following help article:

RadInput Appearance Styles

See Also

© 2002-2008 Telerik. All Rights Reserved.