Change value of RadNumericTextBox clientside from onValueChanged client event of another RadTextBox

[Michael]

I have 2 RadNumericTextBoxs and what I want to do is change the value of the second text box based on the value the user enters into the first.  For example I want the 2nd text box to always show the square of the value of the first and I want this to happen client side.  How do I do this?

I tried the following:

 

<telerik:RadNumericTextBox ID="originalNumber" runat="server" Label="Number"

 

 

Type="Number" DataType="long" NumberFormat-DecimalDigits="0" Width="250px" >

 

 

<ClientEvents OnValueChanged="squareValue" />

 

 

<NumberFormat DecimalDigits="0"></NumberFormat>

 

 

</telerik:RadNumericTextBox>

 

 

<telerik:RadNumericTextBox ID="squaredNumber" runat="server" Label="number Squared"

 

 

Type="Number" DataType="long" NumberFormat-DecimalDigits="0" Width="250px">

 

 

<NumberFormat DecimalDigits="0"></NumberFormat>

 

 

</telerik:RadNumericTextBox><br />

 

<

 

script type="text/javascript">

 

 

function squareValue(sender, eventArgs) {

 

originalValue = parseInt(document.getElementById(

"originalNumber").value);

 

document.getElementById(

"squaredNumber").value = originalValue * originalValue;

 

}

 

 

</

 

script>

 

 

 

The value changes, but it never changes on screen.

 

 

[Princy]

Hello Michael,

Since you are using RadControl (ajaxified control), you need to use $find() method instead of document.getElementByID(). Here is the sample code. 

Javascript:

function squareValue(sender, eventArgs)
     {
       var valueTbx = $find('<%=squaredNumber.ClientID %>');
       var i=sender.get_value();
       valueTbx.set_value(i*i);
    }

Thanks,
Princy.

[Michael]

Princy;
Thank You very much!  That was exactly what I was missing!

[Michael]

I guess I was missing something else.  How do I get the value of RadNumericTextBox SquaredNumber to persist server-side?

when I do: this.SquaredNumber.Text, I get the original value, which is a blank string.

[Michael]

I think my problem is that I wanted the SquaredNumber control to be readOnly and it looks like client-side changes to the value of readOnly controls do not persist to server-side.

[Princy]

 Hello Michael,

Same happened with me also. An opton to accomplish same functionality is using Enabled property instead of the ReadOnly. If you still want to use the ReadOnly Property then, save the readonly textbox's value in a HiddenField control (set value from client) and access it from the server side.

Thanks,
Princy. 

[Shweta]

Hi Princy,

Can i call a function like:

function squareValue(sender, eventArgs)

from server side, using RegisterStartupscript? If yes, for sender, i can pass the client id, how do i pass eventargs?

Thanks,
Shweta

[Eyup]

Hi Shweta,

Generally, you can use this approach. However, it is not recommended if you will ajaxify your page:
http://encosia.com/the-easiest-way-to-break-aspnet-ajax-pages/

Please elaborate on what you are trying to achieve and on your specific scenario so we can suggest a proper approach.

Regards,
Eyup
the Telerik team