CODEWITHSUNDEEP
kendo-uiwidget
Matthias
Matthias

Reputation: 3563

KendoNumericTextBox percentage formatting

I want to achieve the following: a percentage value (represented in model e.g. by "0.7" for 70%) should be edited in a Kendo NumericTextBox. Normal behavior for "P" formats of the NumericTextBox is that when you edit the value it shows "0.7" and when viewing the value it shows "70%". Now in our scenario we want to show "70" when editing the value (instead of "0.7").

I found that this behavior is not supported by the Kendo NumericTextBox. Of course, I could use custom formatting, e.g. "format: '#.00 \%'" - but in this case the model value has to be "70" for 70% instead of "0.7"...

I found the following way to define a new "percentage" binding, which does the conversion correctly: http://boniestdeveloper.net/post/2013/04/16/Editing-percentage-values-with-a-KendoUI-NumericTextBox.aspx. Now I want to encapsulate this binding in a custom widget "kendoNumericPercentageTextBox()", which behaves the same as "kendoNumericTextBox()", but renders the "percentage" binding.

Can anybody give me a hint how I can define such a widget that renders the custom binding and extends the kendoNumericTextBox widget?

Upvotes: 3

Views: 2995

Answers (1)

Métoule
Métoule

Reputation: 14472

I know it's an old question, but what you want to achieve is now possible out of the box with the factor option:

Specifies the factor by which the value is multiplied. The obtained result is used as edit value. So, if 15 as string is entered in the NumericTextBox and the factor value is set to 100 the visual value will be 1500. On blur the visual value will be divided by 100 thus scaling the widget value to the original proportion.

Example: 

$("#numerictextbox").kendoNumericTextBox({
   format: "p0",
   factor: 100,
   min: 0,
   max: 1,
   step: 0.01, 
   change: function() {
     console.log(this.value());
   }
});

JSfiddle: https://jsfiddle.net/qs4jnLqs/3/

Upvotes: 1

Related Questions