Replacing an asp textbox and client events

10 posts, 1 answers
  1. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 17 Feb 2012 Link to this post

    I have replaced an asp.net textbox with the RadNumericTextBox

    I used to have in my old text box the following code: onkeyup="calculatePrice(this)" , so that i could run some calculations on the input in java script.

    Now i would like to do the same with my Rad control.

    I have added this:

    ClientEvents-OnValueChanged="calculatePrice(this)"  

    but my java script fails.

    It fails because in the original code "this" was the actual control so i could pass it simply to the java script function and get its name and its value. 

    But with ClientEvents-OnValueChanged this is not the case. 

    Can you please help me with this issue?

  2.
  3. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 17 Feb 2012 Link to this post

    Hi Andrew,

    I believe the code below is self-explanatory, please check it out:

    <script type="text/javascript">
      function valueChangedHandler(sender, eArgs)
      {
        var newValue = eArgs.get_newValue();
        //the sender here is RadNumericTextBox1 client javascript object
        var htmlDOMInputElement = sender._textBoxElement;
      }
    </script>
      <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox2" ClientEvents-OnValueChanged="valueChangedHandler">
      </telerik:RadNumericTextBox>

    Additionally you could check this help topic:
    http://www.telerik.com/help/aspnet-ajax/input-client-side-basics.html

    Kind regards,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 19 Feb 2012 Link to this post

    Thank you Vasil,

    This answered my question perfectly. However it turns out that i was asking the wrong question.

    You see i have a minimum set on my RadNumericTextBox and i use the input in it to calculate something else on the page.

    When the end user types in an amount that was at least the minimum my onkeyup event was doing the calculation correctly. However when the end user typed in a smaller amount and tabbed out the RadNumericBox would change the value, just as it was supposed to, to the min value. and at this moment my calculation did not do anything. It kept the wrong amount.

    So i figured that the ClientEvents-OnValueChanged event would be called when the RadNumericTextBox changed the value and i could make sure the calculation is still done. It does not appear to be the case.

    The code you gave me works perfectly on a RadNumericTextBox as long as it does not have the min value.

    Is there a client event that would be called in this case? One that i can put my calculations into?
  7. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 20 Feb 2012 Link to this post

    Hello,

    You could always handle the onkeyup DOM event of the visible input in which the user types. Then to find the JavaScript object of the control and use its the get_value() function.

    <script type="text/javascript">
      function performCalculations(sender, eArgs)
      {
        var numericTextBox = $find(sender.id);
        var value = numericTextBox.get_value();
      }
    </script>
    <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1" EnableSingleInputRendering="true"
      onkeyup="performCalculations(this,event)">
    </telerik:RadNumericTextBox>

    You could also use directly "sender.value" in the example above to get the current value of the visible input.

    So with the code above you could perform calculation on every keyup. In the same time you could attach  the OnValueChanged client event and to call a calculation function when the value gets corrected to the minimal one.

    All the best,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  9. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 21 Feb 2012 Link to this post

    The problem is that when the auto-correct does it's job on the textbox, neither of the two client side functions is called.

    To summarise i set the minimum to 100, i add the onkeyup event. 
    When the user types in 101, the calculation is done correctly, using the amount 101.
    When the user types in 76, and then tabs out of the box, the box changes to 100, as it should be. However the calculation is still done on 76, because i don't know what event would be called at this moment. 
    Originally i assumed that ClientEvents-OnValueChanged was the event i needed, however it is not called.

    So my question is what event would be called in this case? where do i put my client code?

    Thanks
  11. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 23 Feb 2012 Link to this post

    Hi Andrew,

    On my end the ValueChanged ClientSide event is executed when the value is changed and the event arguments are holding the auto-corrected value. Could you confirm that you use the latest version of the controls?

    Greetings,
    Vasil
    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.
  13. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 23 Feb 2012 Link to this post

    The version i am using is: 2011.3.1115.40

    I did a test by putting an alert in my java script.

    var newValue = eArgs.get_newValue();
    alert(newValue);

    The test clearly shows that the java script is executed before the value is automatically changed by the min value property.

    I can see the alert pop up show me the value i typed in, then when i click ok, the value changes to the min value but the java script code does not run again. No alert is shown.

    <telerik:RadNumericTextBox onkeyup="calculatePrice(this)" ClientEvents-OnValueChanged="calculatePriceTelerik" runat="server" Width="50" ID="amount" NumberFormat-DecimalDigits="0">
                    </telerik:RadNumericTextBox>g
  14.
  15. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 24 Feb 2012 Link to this post

    I have now updated to the latest version of the dlls but still no change in behaviour.
  17. Answer
    Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 24 Feb 2012 Link to this post

    Hello,

    Please check the code below, it is working on my end. I used console.log to print the values to the browser's console just for the test.

    <script type="text/javascript">
     
      function calculatePrice(value)
      {
        console.log(value);
      }
     
      function valueChangedHandler(sender, eArgs)
      {
        calculatePrice(sender.get_value());
      }
     
      function keyupHandler(sender, eArgs)
      {
        var numericTextBox = $find(sender.id);
        var value = numericTextBox.get_value();
        calculatePrice(value);
      }
     
    </script>
    <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox3" ClientEvents-OnValueChanged="valueChangedHandler"
      onkeyup="keyupHandler(this,event)" MinValue="500">
    </telerik:RadNumericTextBox>


    Kind regards,
    Vasil
    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.
  19. Andrew
    Andrew avatar
    176 posts
    Member since:
    Jun 2009

    Posted 25 Feb 2012 Link to this post

    Thanks, that fixed it.

    The problem was that in the original post you said the new value was in : 
    eArgs.get_newValue(); 

    Where in fact it was in:
    sender.get_value() 

    It works with this new code.

    Thanks again for you help.
  20.
Back to Top