Provide percentage amount into Kendo UI numeric input

Question

How would I be able to enter a percentage value in a Kendo UI numeric text box, such that the value I enter is taken as the percentage? For example, if you enter 5 into the textbox, the underlying value that is written is 5, which is actually 500%. What I want is for the 5 to be taken as 5%, writing the underlying value as .05.

My concern is that I am going to be instructing the user to enter a percentage into the field.

HTML:

My percentage: <input id="percentage" value="0.05" />

JavaScript:

$("#percentage").kendoNumericTextBox({
    format: "p0",
    step: 0.01
});

See jsfiddle here: http://jsfiddle.net/zNLNy/844/

Answer 1

The problem is that you are telling the numeric text box to use the "p0" format. It then expects the user to enter the percentage as a decimal. This is it's normal behavior. Instead, for what you are trying to do, you want to tell the numeric text box to use whole number format, but store the value in its decimal form.

JsFiddle: http://jsfiddle.net/43Mjx/2/

HTML:

<div>
    <label>Enter percentage:</label>
    <input data-role="numerictextbox" data-format="d" data-bind="value: percentage, events: { change: onChange }" />
    <br/>
    <label>Value:</label> <span data-bind="text: percentageAsDecimal"></span>
</div>

JavaScript:

var model = kendo.observable({
    percentage: 5,
    percentageAsDecimal: 0.05,
    onChange: function () {
        this.set('percentageAsDecimal', this.get('percentage') / 100);
    }
});

kendo.bind($('div'), model);