Replacing an asp textbox and client events

[Andrew]

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?

[Vasil]

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

[Andrew]

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?

[Vasil]

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

[Andrew]

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

[Vasil]

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

[Andrew]

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

[Andrew]

I have now updated to the latest version of the dlls but still no change in behaviour.

[Vasil]

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

[Andrew]

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.