Don't show spinners on numeric textboxes in grid

[Craig]

Is there an easy way to have the numeric text boxes in edit mode in a grid not include the spinners?

I've tried this:

  { width: 30, field: "Price", format: "{0:c}", attributes: { spinners: false } }, 

and this:

  { width: 30, field: "Price", format: "{0:c}", spinners:false }, 

But neither achieves what I want. Do I really need to add code that hides them each time the numeric edit control is activated?

[Alexander Valchev]

Hi Craig,

Currently there is no build-in way to disable the spinners of the build-in numeric editor. Nevertheless you can easily achieve this by defining a custom editor.

{ field: "number", title: "Number", editor: editNumber }

Where editNumber is:

function editNumber(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoNumericTextBox({
            spinners : false
        });
}

For more information please check this demo.
I hope this information will help.

Kind regards,
Alexander Valchev
the Telerik team

[Chris]

I notice in the kendo.editable.js that kendo is only carrying forward options.format.
line 107: $('<input type="text"/>').attr(attr).appendTo(container).kendoNumericTextBox({ format: options.format });

It seems like kendo could allow for users to further control how editors are rendered by using options instead.
$('<input type="text"/>').attr(attr).appendTo(container).kendoNumericTextBox(options);

This would allow the user to specify spinner:false on the column options and have it forwarded to the editor control.

Alternatively kendo could "extend" the options passed to the editor from a couple of places on the column if you are concerned about side-effects. e.g. -- .kendoNumericTextBox($.extend({ format: options.format}, options.editorOptions})); I, for one, would really like this change to the kendo functionality.  Perhaps I'll submit a pull-request

[Alexander Valchev]

Hi Chris,

kendo.editable.js is included in the open source Kendo UI Core part of the framework so please do not hesitate to submit a pull request - it will be reviewed by the corresponding staff members as soon as possible. Alternatively you can submit a feature request at Kendo UI Feedback portal.

Regards,
Alexander Valchev
Telerik

 

 

[Rui]

All this does is remove the spinner "wrapper" from around the number.  However, if you use the arrow keys up or down the spinner functionality is still working and the number is going up or down.  

function editNumber(container, options) {    
     $('<input data-bind="value:' + options.field + '"/>')        
              .appendTo(container)        
              .kendoNumericTextBox({            
                          spinners : false        
        });
}

Is there a way to completely kill this functionality so a numeric edit field is treated like text?  

[Rui]

http://dojo.telerik.com/OmAq

Sample of what I'm talking about.
We need the edit number field to not spin if user hits the up or down arrow

[Alexander Valchev]

Hello Rui,

There is no build-in option that allows the developer to disable the up/down keyboard arrows from changing the value. In case you prefer a simple text input please consider using a standard input element as an editor.

If you prefer to use the NumericTextBox you may turn off the "keydown" event handler which is responsible for handling the up/down arrow key pressing.

function editNumber(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoNumericTextBox({
            spinners : false
        }).off("keydown");
}

Please have in mind that by turning off the "keydown" event you will also loose the "save value on pressing enter" functionality.

Regards,
Alexander Valchev
Telerik

 

 

[Shridhar]

Hi Telerik Team ,

  When we do set spinners : false then it should automatically prevent/off the up/down arrow key functionality. So it becomes plain number textbox.

  I also want to use  plain numeric textbox. Could you please suggest me which kendo UI control should I use ?  Thanks in advance...!

Thanks
Shridhar

[Shridhar]

Hi Telerik Team ,

  We we do set spinner : false then it should automatically prevent/off the up/down arrow key functionality.

  I also want to use plain number textbox. Could you please suggest me which Kendo UI control should I use. Thanks in advance..!

Thanks
Shridhar

[Alexander Valchev]

Hello Shridhar,

spinners: false just hides the arrows but is not supposed to prevent the key functionality.
If your aim is to use a plain numeric text box then please do not initialize a Kendo NumericTextBox but use a standard input with type "number". You may add a k-textbox class to it to get a consistent styling.

function editNumber(container, options) {
    $('<input type="number" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
}

Regards,
Alexander Valchev
Telerik

 

 

[Shawn]

One easy way to disable up/down keyboard functionality is to set the step property to 0.