RadInput for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The RadInput controls provide a flexible client-side API. You can easily interact with the controls in the browser using their client-side objects. In addition to a variety of client-side events, the client-side object model lets you achieve complicated tasks while avoiding unnecessary post-backs.

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 is available for each control:

Copy[JavaScript] Getting the client-side object
<script type="text/javascript">
    function pageLoad() {
        var dateInput = $find("<%= RadDateInput1.ClientID %>");
        var date = dateInput.get_selectedDate();
    }
</script>

Another approach for getting the client-side object is to handle any client-side event of the control - the sender argument references the desired client object:

Copy[JavaScript] Getting the client-side object
<script type="text/javascript">
    var textBox = null;
    function Load(sender, args) {
        textBox = sender;
    }
</script>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
    <ClientEvents OnLoad="Load" />
</telerik:RadTextBox>

Getting a reference to the input area DOM element

The input area of a RadInput control is an HTML <input> element with a client id that is derived from the client id of the entire control. The following example shows how to get a reference to its DOM element:

Copy[JavaScript] Getting a reference to the input area DOM element
function pageLoad() {
    var inputElement = $get('<%=RadInput1.ClientID%>' + '_text'); //when using the old (non-single) rendering
    var inputElementSIR = $get('<%=RadInput1.ClientID%>'); //when using single input rendering
}

Getting the value of the input control

Each client-side object exposes properties for getting the value of the control:

 

Property

Return Type

Description

get_value(), set_value()

RadNumericTextBox: numberAll other input controls: string

Gets or sets the value of the input control.

get_textBoxValue(), set_textBoxValue()

string

Gets or sets the value the user input text. It is not assigned as the value of the input control if it contains an error.

get_editValue(), set_editValue()

string

Gets or sets the value of the input control as it is formatted when the control has focus.

get_displayValue(), set_displayValue()

string

Gets or sets the value of the input control as it is formatted when the control does not have focus.

Note

In addition to the methods listed above, which are present in the client-side object for all the RadInput controls, the RadDateInput and RadMaskedTextBox have additional methods for getting the value. See RadDateInput Client Object and RadMaskedTextBox Client Object for details.

Changing the appearance style of RadInput controls on the client

Because the RadInput controls have their own style mechanism, you can change some of the appearance styles so that they are preserved when the control state is changed (i.e. when it is focused, hovered etc.). Below is a sample of how to change the EnabledStyle of a RadTextBox instance using the OnLoad client-side event hander.

Copy[ASP.NET] Setting the style properties client-side
<script type="text/javascript">
    function Load(sender)
    {
        sender.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;";
        sender.updateCssClass();
    }
</script>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
    <ClientEvents OnLoad="Load" />
</telerik:RadTextBox>

See Also