Kendo NumericTextBox with step and rounding

1.4k Views Asked by At

I want to setup kendoNumericTextBox to allow user input any integer number and set step to 1000. But when user enters any value and use spinner, it should update to next multiple of step.

For example:
enter 123, press spin up, value will be 1000
enter 1234, press spin up, value vill be 2000

Is it possible or only way is to handle spin event and modify value from there?

UPDATE:
Ok, guys, thnx for help.

I have this spin handler now and it seems to be working as expected.

            function onSpin(e) 
            {
              var currentvalue = kendo.parseInt(this.value());
              if (currentvalue > 0) 
              {
                this.value(Math.floor(currentvalue / this.step()) * this.step());
              }

              if (currentvalue < 0) 
              {
                this.value(Math.ceil(currentvalue / this.step()) * this.step());
              }
            }
2

There are 2 best solutions below

2
Métoule On

As you say, it's possible by listening to the spin event:

$("#numerictextbox").kendoNumericTextBox({
    min: 0,
    spin: function(e) {
        var isUp = e.sender._key === 38, 
          isDown = e.sender._key === 40;

      var m = Math.trunc(this.value()/1000), 
          value = isUp ? m + 1 : m;

      this.value(value * 1000);
    }
});

I doubt there's something out of the box, because your needs seem somewhat unusual.

2
David Shorthose On

I have provided a dojo below with a potential solution for you: https://dojo.telerik.com/UQohUjaP/2

I have created a function that will work on the spin and on change value so that it will step the value up/down on the value that you set e.g. 1000

the function is fairly simple and for brevity I have taken out the log statements here:

 function onChange() {
   var currentvalue = kendo.parseInt(this.value());
   if (currentvalue > 0) {
     currentvalue = Math.ceil(currentvalue / this.step()) * this.step();
   } else if (currentvalue < 0) {
     currentvalue = Math.floor(currentvalue / this.step()) * this.step();
   } else {
     currentvalue = 0;
   }
   this.value(currentvalue);

 }

Unfortunately there doesn't seem to be a simple way of figuring out if the value has gone up or down so I am basically checking to see if the value is greater than 1 or less than 1 and then calculating the ceiling or the floor for the value and then stepping it in the right direction. in order to cater for zero we have a special condition which just sets the value to 0 assuming that is a valid value in your scenario