This is a migrated thread and some comments may be shown as answers.

NumericTextBox not updating visually on programmatic value change until mouseover.

5 Answers 1611 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 17 Mar 2014, 06:50 PM
Hi,

So we're using a NumericTextBox that is responsible for keeping count of grid elements (it can be higher than the grid count, but not lower).  I've found that when I modify the value of the NumericTextBox from Javascript the value displayed on the page doesn't reflect the addition until mouseover.  Here is the code that increases the value after a new grid row is created, and the value is accurately reflecting the total number of elements, but for some reason only displays the updated value when the user mouses over the NumericTextBox.   Any help would be much appreciated.

function(args){
    var grid = $(args.sender.options.table).parents('.k-grid');
    var count = $('.k-input[name$="Count"]');
    if (count) {
        var modelName = count.attr('name').split('.')[0];
        var crewCount = count.data("kendoNumericTextBox").value();
        var totalCrew = args.sender.data().length;
        if (totalCrew > crewCount) {
            count.data("kendoNumericTextBox").value(totalCrew);
        }
    }
}





5 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 18 Mar 2014, 03:38 PM
Hello Kevin,

I believe that the issue is related to the fact that the value is set via widgets API, which will not trigger the change event. The MVVM value binding on the other hand listens to this event, which notifies when the has been changed and the model needs to be updated. If I am missing something, I would ask you send us a simple test demo, which replicates the issue. 

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevin
Top achievements
Rank 1
answered on 19 Mar 2014, 03:17 PM
Hi Georgi,

I'll work on putting a demo together.  In the meantime I've noticed some more specific behaviours that may be helpful in determining the cause.  The first call (ie moving from 0 to 1) always seems to be successful and display properly, each subsequent call does not display until mouseover.  Also when debugging using breakpoints the problem behaviour is not seen and the NumericTextBox updates correctly.  Which would suggest to me that it may be a timing or order of operations issue between the two controls.

Thanks,
Kevin
0
Kevin
Top achievements
Rank 1
answered on 19 Mar 2014, 06:27 PM
Hi,

I'm having difficulty recreating this issue on a smaller scale demo.  We're using MVC and I'm just wondering if you could explain more about MVVM value binding and how I could use that instead of the Widget API.

Thanks,
Kevin
0
Accepted
Georgi Krustev
Telerik team
answered on 20 Mar 2014, 11:02 AM
Hello Kevin,

You can find more information about MVVM value binding here. One of the important aspects about value binding is described in this statement:
When the end-user changes the value of the DOM element (or widget) the bound View-Model value is updated. If the View-Model value is updated from code the value of the bound DOM element (or widget) is updated visually.
What tells us is that the model will be updated only when the widget notifies the binding for any change. The change event of the widget will be raised only when its value is changed by user interaction. If you need to change widget value programmatically and still update the model, then you will need to notify MVVM binding manually:
...
count.data("kendoNumericTextBox").value(totalCrew);
count.data("kendoNumericTextBox").trigger("change");

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevin
Top achievements
Rank 1
answered on 20 Mar 2014, 09:31 PM
Thanks for your help Georgi.  While I'm still not entirely sure the root crux of the problem I found a work around by combining the trigger class with a setTimeout.  The working code is here.

setTimeout(function(){
    count.data("kendoNumericTextBox").value(totalCrew);
    count.data("kendoNumericTextBox").trigger("change");
}, 0)


Tags
NumericTextBox
Asked by
Kevin
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or