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

Kendo UI Numeric Textbox Formatting

1 Answer 217 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Crystal
Top achievements
Rank 2
Crystal asked on 17 Feb 2015, 04:40 PM
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

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 19 Feb 2015, 09:02 AM
Hello Crystal,

Straight up to your questions:

#1:
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.

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

#3:
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.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
NumericTextBox
Asked by
Crystal
Top achievements
Rank 2
Answers by
Georgi Krustev
Telerik team
Share this question
or