Increment/Decrement to only odd values in Kendo Numerictextbox on up/down spinners/keys

Question

I have a Kendo NumericTextBox. When some certain field has some certain values,the range of values for that NumericTextBox would be only odd values.

Setting step to 2 will work if current value is odd value.

So if user enters some value like 22 and clicks on up spinner, it should increase values to 23, then 25 on next click.

If current value is 30 and user clicks on down spinner , it should decrease value to 29 , then 27 on next click.

Answer 1

Here is solution for you: http://jsfiddle.net/a6Ek2/8/

var numericTextBox = $("#bar").kendoNumericTextBox({
    format: "d",
    value: 1,
    step: 2, }).data('kendoNumericTextBox');

numericTextBox.element.parent().find('.k-link').mousedown(function () {
    var value = numericTextBox.value();
    if (value % 2 === 0) {
        if ($(this).find('span.k-icon').hasClass('k-i-arrow-n')) {
            numericTextBox.value(value - 1);
        }
        else {
            numericTextBox.value(value + 1);
        }
    } });

You can also block entering data from keyboard and set step on 2:

$("#foo").kendoNumericTextBox({
    format: "d",
    value: 1,
    step: 2,
});

$("#foo").attr('readonly', true);

Answer 2

This is a little tricky but might work. You should play with step setting it to 1 or 2 depending on the current value of the numeric text field.

Then you change the value when the spinner is clicked or the value changes. Something like this:

function adjustStep() {
    var value = this.value();
    if (value % 2 == 1) {
        number.options.step = 1;
    } else { 
        number.options.step = 2;
    }
}

var number = $("#numerictextbox").kendoNumericTextBox({
    step : 1,
    value : 21,
    spin: adjustStep,
    change: adjustStep
}).data("kendoNumericTextBox");

JSFiddle here: http://jsfiddle.net/kF2h7/1/