This is a migrated thread and some comments may be shown as answers.

Is there a way to achieve this specific number formatting?

7 Answers 426 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 16 Oct 2013, 09:39 AM
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.

7 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 17 Oct 2013, 06:08 AM
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!
0
Todd
Top achievements
Rank 1
answered on 18 Oct 2013, 09:02 AM
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
0
Alexander Popov
Telerik team
answered on 18 Oct 2013, 09:30 AM
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!
1
Noman Saleem
Top achievements
Rank 1
answered on 31 Oct 2013, 06:08 PM
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.
0
Kiril Nikolov
Telerik team
answered on 05 Nov 2013, 09:27 AM
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!
1
Mark
Top achievements
Rank 1
answered on 09 Jun 2016, 10:51 PM
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  
-1
Dimo
Telerik team
answered on 13 Jun 2016, 03:54 PM
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.
 
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 02 Sep 2022, 04:59 PM

This does not answer the question as to what the status is on developing this feature.
Dimo
Telerik team
commented on 02 Sep 2022, 05:32 PM

@Lee - I don't really remember, but I assume that when I wrote the above comment 6 years ago, the development status was "none".

The current development status is a bit more clear. And here is a related discussion with a possible workaround

Tags
NumericTextBox
Asked by
Todd
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Todd
Top achievements
Rank 1
Noman Saleem
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Mark
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or