NumericTextBox not updating visually on programmatic value change until mouseover.

[Kevin]

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);
        }
    }
}

[Georgi Krustev]

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

 

 

[Kevin]

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

[Kevin]

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

[Georgi Krustev]

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

 

 

[Kevin]

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)