NumericTextBox for percentages with 3 decimals

4 posts, 0 answers
  1. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 20 Jul Link to this post

    I'm trying to use the NumericTextBox for values that are percentages, with three decimal points.  How do I format it so it displays properly?  I tried using .Decimals(3) but it still only displayed with two decimal numbers.  For example, 34.567 displayed as 34.57...  And it should also be a percentage, allowing only values up to 100.000

    Here is what I have

    @(Html.Kendo().NumericTextBox<decimal>()
                      .Name("adminFee")
                     // .Format("p") commented out since it didn;t appear to work
                      .Min(0)
                      .Max(100)
                      .Decimals(3)
                      .HtmlAttributes(new { style = "width: 100%", data_bind="value: AdminFee" })
                  )
  2. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 20 Jul in reply to Joe Link to this post

    For the record, I also used .Format("###.###") which displays properly, but when using the spinner arrows it only increments the whole part of the number, not the decimals.
  3. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 20 Jul in reply to Joe Link to this post

    Well that's a bust... if sending 0.000 to the control, it only displays as 0, not 0.000...  Could really use some help with this...
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 24 Jul Link to this post

    Hello Joe,

    The Kendo UI NumericTextBox has two settings that should be configured so it shows three digits in its fractional part:

    Decimals(when focused): http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-decimals
    Format(when not focused): http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-format

    And with Razor:

    @(Html.Kendo().NumericTextBox<decimal>()
      .Name("adminFee")
      .Decimals(3)
      .Format("n3")
      .Min(0)
      .Max(100)
      .HtmlAttributes(new { style = "width: 100%", data_bind = "value: AdminFee" })
    )

    For all the valid formats, you can check the documentation article at:

    http://docs.telerik.com/kendo-ui/framework/globalization/numberformatting

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top