Kendo UI Numeric Textbox Formatting

2 posts, 0 answers
  1. Crystal
    Crystal avatar
    3 posts
    Member since:
    Nov 2013

    Posted 17 Feb 2015 Link to this post

    I'm using Kendo UI v2014.3.1119 and I'm trying to leverage the Kendo UI controls in an existing application, but if that's not possible should I use the HTML5 input type number and AngularJS directive to create a custom element?

    1. How do I set the input textbox on the numeric control to read-only but still keep the spinner (up/down) enabled? I need to be able to do this in HTML markup and not JavaScript.

    2. How do I disable the spinner (up/down) when the min/max values are reached to prevent the on-spin event from firing when the min/max values are reached?

    3. How do I pad the input textbox with zero when the value is less than 10? I’m not sure if this is even possible since the JavaScript number object does not persist leading zeros.

    Here is the HTML markup for what I already have, but I'm not sure how it will help answer the questions above
  2. Georgi Krustev
    Georgi Krustev avatar
    3747 posts

    Posted 19 Feb 2015 Link to this post

    Hello Crystal,

    Straight up to your questions:

    The widget supports readonly attribute, but if you apply it before initialization then the whole widget will be readonly (expected behavior). If you would like to make only the input element readonly, then you will need to do this task manually in the kendoRendered event:
    //find all numerictextbox inputs
    $("[data-role=numerictextbox").attr("readonly", true); //looks for input elements on the whole page.

    The widget is designed to keep the up/down spinners enabled even though the min/max range is reached. This behavior cannot be prevented.

    Your assumption is correct. Because of the inability of the JavaScript Number object (used internally in the widget) to be padded, the required functionality is not supported.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top