Don't show spinners on numeric textboxes in grid

11 posts, 0 answers
  1. Craig
    Craig avatar
    12 posts
    Member since:
    Feb 2013

    Posted 11 Mar 2013 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 13 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Chris
    Chris avatar
    1 posts
    Member since:
    Mar 2013

    Posted 17 Jun 2014 Link to this post

    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



  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 18 Jun 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Rui
    Rui avatar
    2 posts
    Member since:
    Aug 2014

    Posted 11 Aug 2014 in reply to Alexander Valchev Link to this post

    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?  
  6. Rui
    Rui avatar
    2 posts
    Member since:
    Aug 2014

    Posted 11 Aug 2014 in reply to Rui Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 13 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Shridhar
    Shridhar avatar
    3 posts
    Member since:
    Dec 2014

    Posted 01 Jan 2015 in reply to Alexander Valchev Link to this post

    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
  9. Shridhar
    Shridhar avatar
    3 posts
    Member since:
    Dec 2014

    Posted 01 Jan 2015 in reply to Alexander Valchev Link to this post

    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
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 05 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Shawn
    Shawn avatar
    1 posts
    Member since:
    Apr 2013

    Posted 26 Apr 2016 in reply to Shridhar Link to this post

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