KendoNumericTextBox百分比格式 [英] KendoNumericTextBox percentage formatting

问题描述

我想实现以下目标:应在Kendo NumericTextBox中编辑一个百分比值(例如在模型中以"0.7"表示70％). NumericTextBox的"P"格式的正常行为是，当编辑值时，它显示为"0.7"，而在查看值时，它显示为"70％".现在，在我们的场景中，我们希望在编辑值时显示"70"(而不是"0.7").

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").

我发现Kendo NumericTextBox不支持此行为.当然，我可以使用自定义格式，例如格式:'#.00 \％'"-但在这种情况下，对于70％，模型值必须为"70"，而不是"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.

任何人都可以给我一个提示，我如何定义一个呈现自定义绑定并扩展kendoNumericTextBox窗口小部件的窗口小部件?

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

推荐答案

我知道这是一个老问题，但是现在您可以通过

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

指定数值乘以的因子.获得的结果用作编辑值.因此，如果在NumericTextBox中输入字符串形式的15，并且将因子值设置为100，则视觉值将为1500.在blur上，视觉值将被100除，从而将小部件值缩放为原始比例.

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.

示例:

$("#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/

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

这篇关于KendoNumericTextBox百分比格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！