Allow only integers in NumericTextBox

9 posts, 1 answers
  1. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 19 Mar 2015 Link to this post

    Hi,
    How can I allow only integers in a NumericTextBox?

    I've tried the following and it didn't work:
    <input data-role="numerictextbox" data-format="0" data-decimal="0" data-min="0">

    Appreciate your assistance.

    Best regards
    Bilal Haidar
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 23 Mar 2015 Link to this post

    Hello Bilal,

    It seems that you've missed the "s" in the decimals option. For example: 
    <input data-role="numerictextbox" data-format="0" data-decimals="0" data-min="0">


    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 23 Mar 2015 in reply to Alexander Popov Link to this post

    So setting decimals to 0 means don't allow decimal numbers? Only integers? Is this setting only applied on format or the actual value of the control?

    Thanks
  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 Mar 2015 Link to this post

    Hi Bilal,

    Setting the decimals option to zero prevents the user from entering a decimal separator. Setting it to anything other than zero allows separator, but it also controls how many digits there might be after it in the widget's value.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. John
    John avatar
    12 posts
    Member since:
    Jul 2011

    Posted 10 Nov Link to this post

    As an FYI, when I do the above I get jquery errors (.toLowerCase) when I tried to change any values by spinning or direct typing.  So I keep my input bare bones (no data attributes) and added the decimals attribute to the javascript constructor instead.  This seems to have worked.

    eg

    <input type='number' class='nudExecutionOrder' />

    and

     
    $(".nudExecutionOrder").kendoNumericTextBox({
           format: "0",
           decimals: 0,
           min: 0,
           change: onExecutionOrderChanged,
           spin: onExecutionOrderChanged
       });
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 14 Nov Link to this post

    Hello John,

    The erroneous behavior is caused by the numeric-like format. If you would like to define such format, please use the other support syntax - {0:format} :

    http://dojo.telerik.com/EdijU

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  8. John
    John avatar
    12 posts
    Member since:
    Jul 2011

    Posted 14 Nov in reply to Georgi Krustev Link to this post

    Thanks Georgi, but when I create an input mimicking Alexanders, eg:

    <input data-role='numerictextbox' data-format='0' data-decimals='0' data-min='0' class='nudExecutionOrder' value='5' title='...' />

     

    I get the attached error of "e.toLowerCase is not a function".  Perhaps this is a bug in your codebase, perhaps changing the data-format from ='0' to something else works, I never tried.  I just removed all the data attributes and did it via the initialization code.  Once I saw that was working I moved on to other things.  Give it a shot yourself and you'll see what I mean, version of Kendo I'm using is in the screenshot.

     

     

     

     

  9. John
    John avatar
    12 posts
    Member since:
    Jul 2011

    Posted 14 Nov in reply to John Link to this post

    Apologies, apparently I cropped the version out of the screenshot (haven't had my coffee yet!).  It's 2016.3.1028
  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 15 Nov Link to this post

    Hello John,

    As I mentioned in my previous reply, setting a string property (format in this case) to number would not work. The Kendo UI data-* parse mechanism will recognize "0" value as a number will treat it like that. 

    The proper way to overcome the described behavior is to define the string property to something that does not look like a number. That is why I suggested usage of "{0:format}" string value.

    Of course initializing the widget using JavaScript is absolutely fine and if it usable to you just go for it.

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready