OnChange event returns old value

[Ian]

Hi, I've added an OnChange event handler to an IntegerTextBox control. The associated function is fired correctly when the textbox value is changed using the spinner or keyboard, but when I request the value of the textbox, I get the old value prior to the change. Is there a way to get the new value of the textbox? Example code below.

<% Html.Telerik().IntegerTextBox()
    .Name("Risk")
    .MinValue(1)
    .MaxValue(10)
    .IncrementStep(1)
    .Spinners(true)
    .Value(3)
    .ClientEvents(events => { events.OnChange("change"); })
    .Render();
%>

<script type="text/javascript">
    function change() {
        var textBox = $("#Risk").data("tTextBox");
        alert(textBox.value());   
     }
</script>

Regards, Ian

[Georgi Krustev]

Hello Ian Price,

OnChange event is cancellable. Hence the value() will return old value because it is not updated yet.
To get new value I will suggest you to check the following code snippet:

function change(e) {
    $console.log('OnChange :: oldValue: ' + e.oldValue + ', newValue: ' + e.newValue);
}

This is shown in the Client-events example of the numeric text box.

Best wishes,
Georgi Krustev
the Telerik team

[Ian]

Georgi,
Hi. Thanks for the quick reply - your solution works fine. I was working from the .chm documentation file that was included with the controls download and that doesn't seem to mention the oldValue/newValue properties. I'll check the online help next time! :-)

Regards, Ian

[Derek Hunziker]

This is great but it makes it difficult in some cases. I have a client function that, when evoked, loops through all values on the page and counts them up. In my case I wanted all the NumericTextBoxes on the page to evoke this function OnChange. I don't want to have to worry about which textbox evoked the function to be able to get the new value vs. old value.

I suggest breaking it up into two Client Functions: OnChange (cancelable) and OnChanged.

[Derek Hunziker]

Just a quick note for anyone else having similar problems as above...

I found that you can just set the TextBox value to the new value before performing any other functions:

function OnChange(e){
    $(this).data("tTextBox").value(e.newValue);

    // Call external function here
    //...
}

[Derek Hunziker]

Turns out the code above doesn't work with CurrencyTextBox. When you set the value, the textbox will add the decimal places which moves the cursor to the end. This makes it impossible to type 234 and have it set the value to $234.00 (It tries to enter $2.0034).

I will have to resort to attaching a jQuery blur event to the textbox for now and grabbing the value directly... There must be a better way...

$('input[name=MyCurrencyTextBox-text]').live('blur', function(){
    //...
});