Is there an easy way to disable the spinners?

[Ian]

The spinners may not always be desired on all of the numeric textboxes. Is there an easy way to disable them? If not, could you guys consider adding that feature? Thanks!

[Georgi Krustev]

Hello,

 
Currently there is no build-in way to disable the spinners. Nevertheless you can easily achieve this with JavaScript - check this jsFiddle demo. I have logged your request to our internal system. If more users wants such functionality we will schedule it for further investigation.

Kind regards,
Georgi Krustev
the Telerik team

[Olle]

+1 for an easy way to disable the spinners.

[Georgi Krustev]

Hello,

 
You can share your feedback in the user voice page. Thus the users will be able to vote for this functionality.

All the best,
Georgi Krustev
the Telerik team

[Ian]

Created an issue here. Thanks for the help Georgi!

Upvote this issue here!

[Nathan]

The posted example does not actually disable the spinners. It just removes the images from the numeric text box. When the text box has focus, the Up/Down arrow still causes the spinning (i.e. increment and decrement) to happen. 

[Oscar]

Is this functionality implemented in Q1 2012?
Regards.

[Georgi Krustev]

Hello,

 
This functionality is still under consideration. There are features and fixes with higher priority and we need to take case of them first.

All the best,
Georgi Krustev
the Telerik team

[Oscar]

Hi Georgi,
The problem with this is that users use to press down/up arrow to navigate from cell to cell. When a numericTextBox is the editor of a cell in a grid, this causes to increment/decrement its value, instead of going to the cell above/below.

[Georgi Krustev]

Hello Oscar,

 
In this case you will need to unbind the "keydown" event of the input element. Check the updated jsFiddle demo.

All the best,
Georgi Krustev
the Telerik team

[Oscar]

Hello Georgi,
Thank you for the jsFiddle demo.
If I unbind the keydown event, our decimal separator (comma) is shown as a dot when the user enters a decimal number using the numeric keyboard. (our kendo.culture is not 'en-US'). Is there any other workaround for this?
Regards,
Oscar.

[Georgi Krustev]

Hello Oscar,

 
You will need to unbind the keydown event handler only if you need the input to be readonly. Could you please elaborate more on how you need to use the NumericTextBox? When it should be readonly and when it should not?

All the best,
Georgi Krustev
the Telerik team

[Euro]

A better workaround to disable the spinners (until the feature is implemented), is to set the step property to 0:

$("#initial").kendoNumericTextBox({
    step:0
});

It's not perfect because Up and Down still cause the caret to move, but at least it won't modify the value in the box.

[Joshua]

I noticed the numerictextbox has a spinners option now but I cannot seem to use the data-attributes such as data-spinners="false".

I think this is a bug and never added in since all the other options seem to work this way.


Any help here? Thanks!

[Georgi Krustev]

Hello Joshua,

I believe that the spinners option works just fine. Check this jsBin demo. 

Regards,
Georgi Krustev
Telerik

[Koen]

Is this option already available now to easily disable them?

[Konstantin Dikov]

Hi Koen,

As mentioned in one of the previous posts, there is a spinners property that will determine whether or not to render the spinners:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-spinners

As you will notice, setting "spinners" to "false" will prevent the rendering of the spinners.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Ryan]

That solution doesn't actually accomplish what the poster wanted: To stop the up/down arrow keys from changing the value in the numeric text box.  It removes the up/down arrows but this is just cosmetic.

An earlier suggestion of unbinding the keydown event also winds up removing the ability to hit ENTER to complete the editing.

I liked another suggestion of using jQuery to set the step to 0.  This seemed to work well in a jsFiddle.  However in my implementation I can't get it to work.  I put the "data-step=0" in various elements but the arrow keys still increment/decrement the numeric value.  As you may notice I also tried removing the "role" attribute that said "role=spinnerbutton"

This numeric textbox is just the standard Kendo construction when I've marked my grid as "editable" i.e. I'm allowing in-cell editing here.  There is no custom template.  I tried to implement one but I'm not an expert on that and couldn't get it to work.

Attached is a screenshot of my markup.  Any advice on the best approach here?

[Konstantin Dikov]

Hello Ryan,

In the context of the Grid you could handle the "edit" event and change the configuration of all NumericTextBox editors with the following code:

• https://dojo.telerik.com/UpIFEWOW

edit: function(e){
  var numeric = e.container.find("[data-role='numerictextbox']");
  if(numeric.length > 0){
     numeric.data("kendoNumericTextBox").setOptions({
       spinners: false,
       step: 0
     })
  }
},

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik