data-value-update attribute on Kendo Masked Textbox

4 posts, 0 answers
  1. Stephen
    Stephen avatar
    1 posts
    Member since:
    Jan 2013

    Posted 26 Nov 2014 Link to this post

    Hi,

    I'm using v2014.2.716 and I'm having an issue with the data-value-update attribute when used on anything other than a plain, un-kendo'd <input>.

    Example
    Given this markup:
    <div id="routes">
        <input id="route-value" data-role="maskedtextbox" data-value-update="keyup"  data-bind="value:route" />
        <h3 data-bind="html: route"></h3>
    </div>

    and this script:

    <script>
        var model = kendo.observable({
            route: "Initial value"
        });
        $(document).ready(function () {       
            kendo.bind($("#routes"), model);
        });
     
    </script>

    I would have expected that as one types in the textbox, the <h3> element would update as each character is typed in the textbox.

    However, this *only* works if I remove the data-role="maskedtextbox" from the <input> element...is data-value-update not actually supported for Kendo widgets? If not, then how can I style this plain input to look just like a kendo masked textbox? I don't need the masking behaviour, but it will stick out like a sore thumb on my form if it's not a kendo widget!

    Many thanks,

    Stephen
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 28 Nov 2014 Link to this post

    Hello Stephen,

    The data-value-update attribute will only work for plain input elements and not for widgets. Currently there is no workaround that can be offered in order to use this functionality for the NumericTextBox widget.

    Regards,
    Kiril Nikolov
    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. sc
    sc avatar
    1 posts
    Member since:
    Aug 2015

    Posted 28 Jan in reply to Kiril Nikolov Link to this post

    Hello Kiril Nikolov

          I using Kendo UI v2014.3.1411, I bind data to div using MVVM (my input id="txtNameQuestionGroup" is inside that div) . Example:

          Javascript 

     kendo.bind($('#pop-add-questiongroup'), questionGroupViewModel);

          Html

    <input class="modal-input txtInput w-100per" maxlength="100" name="QuestionGroupName" id="txtNameQuestionGroup" tabindex="1" data-bind="value: group.Name" data-value-update="keyup" onkeyup="somefunction()" onpaste="somefunction()" />

          Everything works fine. But if user click the input -> press arrow (up or down), browser shows autocomplete value -> user click 1 value -> Input will display that value but that value don't update to questionGroupViewModel.

           I investigate and I understand that, viewmodel & input only update data when user press any button on keyboard, it' won't update viewmodel when user click mouse button. 

          Can you suggest some solution to update viewmodel when input value changing ?

    Regards,
    Cloud

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 01 Feb Link to this post

    Hello sc,

     

    It will update when the widget is blured. Would it be possible to open a new support thread where a runnable example is present, so we can look at?

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready