Kendo NumericTextBox with step and rounding

Question

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());
              }
            }

If the user entered a value and then pressed the spin up/spin down surely they would expect to see the value +/- the spin value rather than a default rounded number? If you want this type of functionality you are going to have to handle the `step` event to deal with the value change. — David Shorthose, Mar 26 '18 at 15:11
Yes, it is default behavior of numeric input ``, so user expects the same. — Raptor, Mar 26 '18 at 15:23
if the user step's 1000 for example and they have entered in 123 then they should expect to see 1123 not 1000 as you seem to want to make it. Unless I am misunderstanding your question? — David Shorthose, Mar 26 '18 at 15:27
No, they expect to see 1000, not 1123. The same as standard numeric input works. This input is for large numbers and user can simply use spinner to adding thousands. It was ok, before I changed inputs to Kendo controls. NumericTextBox works different way. — Raptor, Mar 26 '18 at 18:57

Métoule · Answer 1 · 2018-03-27T07:13:34.577

1

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.

edited Mar 27 '18 at 07:13

answered Mar 26 '18 at 16:32

Métoule

13,062
2
56
84

This works only for adding step. When user press down arrow, value is still increasing. But I understand you pointed to spin event to use, so this is ok.As David says, there is no way how to detect, if user is spinning up or down. – Raptor Mar 27 '18 at 06:17
Actually, there seems to be a way, but it uses a private variable, so it might not stand the test of time. I've updated my answer. – Métoule Mar 27 '18 at 07:13

David Shorthose · Answer 2 · 2018-03-26T22:25:51.783

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

Thnx for pointing to decision problem, if spinning up or down. This will make things harder. Attached sample is partialy working. Seems that only problem is, when user enters 123 and immediately press up key on keyboard. Expected value is 1000, but result is 2000. — Raptor, Mar 27 '18 at 06:20
Glad the example helped. But based on your own criteria surely the value jumping up to the next step is expected. E.g. by putting in 123 and then spinning up it will add 1000 so the next value will be 2000. If after the initial input of the value it should automatically set itself to the nearest 1000 based on the change event. — David Shorthose, Mar 27 '18 at 08:23

Kendo NumericTextBox with step and rounding

2 Answers2