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

8 posts, 0 answers
  1. Michael
    Michael avatar
    16 posts
    Member since:
    Aug 2010

    Posted 15 Nov 2010 Link to this post

    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.

     

     

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    16 posts
    Member since:
    Aug 2010

    Posted 16 Nov 2010 Link to this post

    Princy;
    Thank You very much!  That was exactly what I was missing!
  5. Michael
    Michael avatar
    16 posts
    Member since:
    Aug 2010

    Posted 16 Nov 2010 Link to this post

    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.
  6. Michael
    Michael avatar
    16 posts
    Member since:
    Aug 2010

    Posted 16 Nov 2010 Link to this post

    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.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Nov 2010 Link to this post

     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. 
  8. Shweta
    Shweta avatar
    9 posts
    Member since:
    Oct 2010

    Posted 20 Dec 2012 Link to this post

    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
  9. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 24 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017