Is there a way to achieve this specific number formatting?

8 posts, 0 answers
  1. Todd
    Todd avatar
    2 posts
    Member since:
    Oct 2013

    Posted 16 Oct 2013 Link to this post

    Hi,
    Is it possible to format percentage numbers like this:
            Internal:               Display when not editing:                             Display when editing:
            0.99                        99%                                                                        99
    I know that NumericTextBox supports displaying 0.99 as 99 % by using format: "p" and 99 as 99 % by using "#  \\%".
    While is there a way to combine these two methods to display 0.99 as 99 % when not editing and 99 when editing?
    And after the user changed the value to 95 convert it back to 0.95?

    Thanks for the help in advance.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 17 Oct 2013 Link to this post

    Hi Todd,

    I am afraid that currently this behavior is not supported out of the box, however you could achieve it by attaching handlers to the input's focus and blur events. Multiply the value by 100 when focus is triggered and divide it by 100 when blur is triggered. Here is a small example demonstrating such behavior.

    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. Todd
    Todd avatar
    2 posts
    Member since:
    Oct 2013

    Posted 18 Oct 2013 Link to this post

    Hi Alex,
    Thanks for your reply.
    I tried to use your solution with Kendo data binding. However, it seems not reliable enough. For example, sometimes 0.251233 may be displayed as 25.123299999999997 when editing in the NumericTextBox, and the increase and decrease buttons may malfunction.

    Here is the example: http://jsbin.com/azuCISu/2/edit

    Regards,
    Todd
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Oct 2013 Link to this post

    Hi Todd,

    I would recommend you to subscribe for the NumericTextBox spin and change events as well and raise a flag when the focus event is triggered. Check the flag in the built-in widget event handlers and modify the internal value accordingly. Here is an example that shows the order in which the events are triggered.

    On a side note I would like to remind you that providing custom solutions falls outside the scope of our standard support services.

    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. Noman Saleem
    Noman Saleem avatar
    2 posts
    Member since:
    May 2007

    Posted 31 Oct 2013 Link to this post

    This must be a common enough scenario. Percentages are often stored in the database in the manner described to simplify calculations using them. The ideal code point for the *100 <-> /100 translation is clearly within the Kendo code, and I can't imagine that it would be difficult to accomplish. Alexander's solution is incomplete, as it fails to consider the scenario where pressing enter will submit the form. Here is a complete solution that works for me:
    var enterFlag = false;
     
    $(document).ready(function () {
        $('#FedTax, #ProvTax').on('focus', function (e) {
            if (this.value != null)
                this.value = new Number(this.value * 100).toFixed(2);
        });
     
        $('#FedTax, #ProvTax').on('blur', function (e) {
            if (!enterFlag && this.value != null)
                $(this).data('kendoNumericTextBox').value(new Number(this.value / 100).toFixed(2));
            else
                enterFlag = false;
        });
     
        $('#FedTax, #ProvTax').on('keypress', function (e) {
            if (e.which == 13 && this.value != null)
                $(this).data('kendoNumericTextBox').value(new Number(this.value / 100).toFixed(2));
            enterFlag = true;
        });
    });

    Note the .toFixed(2) - replace this with the number of decimals you are using. This is another reason such functionality should be within the Kendo framework. Note that other approaches in the keypress event don't work: programmatically calling .blur() fails to set the value correctly, and simply preventing default doesn't blur, or submit the form.

    That such a simple usage of a percent text box is considered a "custom solution" is a poor excuse to fail to provide customer service.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 05 Nov 2013 Link to this post

    Hello Noman,

    Thank you very much for sharing your code with us.

    I have forwarded it to our development team, so they will take a look at your suggestion. I would like to encourage you to share any suggestions, improvements or optimizations that you came up with.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Mark
    Mark avatar
    15 posts
    Member since:
    Aug 2015

    Posted 09 Jun in reply to Kiril Nikolov Link to this post

    Has there been any updates for this?  Unfortunately, my users are asking for similar functionality.  I have the latest version of the Kendo Javascript Library. Thanks  
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Jun Link to this post

    Hi Mark,

    The Kendo UI NumericTextBox always displays its actual numeric value in edit mode. I am afraid there is no built-in possibility for the widget to have a "0.XY" value, but provide the user with "XY" in edit mode. This can be achieved by using custom logic on the server that will pass and accept user-friendly values to/from the client, and use the "true" value on the server.

    Regards,
    Dimo
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready