NumericTextBox not updating visually on programmatic value change until mouseover.

6 posts, 1 answers
  1. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 17 Mar 2014 Link to this post

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





  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Mar 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 19 Mar 2014 in reply to Georgi Krustev Link to this post

    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
  5. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 19 Mar 2014 in reply to Georgi Krustev Link to this post

    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
  6. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 Mar 2014 Link to this post

    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!
     
  7. Kevin
    Kevin avatar
    22 posts
    Member since:
    Feb 2014

    Posted 20 Mar 2014 in reply to Georgi Krustev Link to this post

    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)


Back to Top
Kendo UI is VS 2017 Ready