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

Supporting both comma and dot for decimal input

8 Answers 455 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Jean-François
Top achievements
Rank 1
Jean-François asked on 23 Jun 2014, 07:56 PM
Hi, 

Our whole system is design for fast data input and one requirement is that both dot and comma be accepted as decimal delimiter. Input can be both "12,12" and "12.12". It's okay if both display the afterwards, as long as the input allows for it. In fact, .NET will force you to make a choice, which is OK. 

I made a little example that showcases our need (except it doesn't deal with selection) : http://trykendoui.telerik.com/ikId/2

Is there a way to have kendo do this for us (aka without this ugly hack)? Removing all kind of culture-related formating would be a plausible option, if possible. 

Thank you

---- 

Copy of the "hack": 

01.$('#numeric').on('keydown', function (e) {
02.    if (e.which == 188) {
03.        e.preventDefault();
04.        caret = $(this).caret();
05.        value = $('#numeric').val() + '';
06.        if (value.indexOf('.') < 0 && value.indexOf(',') < 0) {
07.            $('#numeric').val(value.substring(0, caret) + '.' + value.substring(caret));
08.            $(this).caret(caret + 1);
09.        }
10.    }
11.});


8 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 25 Jun 2014, 08:06 AM
Hello Jean,

In case no culture is set the Kendo UI NumericTextBox will use dot "." as a decimal separator, and I am afraid that this is the default functionality. Currently there is no configuration option that you can set in order to tell the widget to use both dot and a comma for decimal separators. Introducing such option will not be possible as well, as it will be considered as a breaking change for a lot of the other users that rely on this exact behavior.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-François
Top achievements
Rank 1
answered on 25 Jun 2014, 12:47 PM
Hi,

That's what I feared. 

However, I have a proposition that would be backwards compatible. How about a new option, called something along the lines of "ignoreCultureOnInput" that would make use of the culture to display the number, but ignore it for input. This would allow to input 12.34 or 12,34, but have it displayed properly, according to culture. Of course the default value would have to be "false" to avoid a breaking change. 

Is this a possibility? 

In any case, we need this functionnality now. Is the "hack" I provided safe to use? Should we, once again, get rid of the kendo widget and go with a custom, regular textbox?

Thanks
0
Kiril Nikolov
Telerik team
answered on 26 Jun 2014, 09:00 AM
Hello Jean,

Your suggestion seems interesting, please post it in the UserVoice section, so it will be considered for a future implementation. 

As for your workaround - if it gives you the desired results, then I do not see a reason to go ahead and use it, as it does not use any private methods and functionalities that might change in future releases.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-François
Top achievements
Rank 1
answered on 26 Jun 2014, 01:49 PM
Hi, 

I just did, thanks for your feedback. 

For all of you finding this via google, here is the mentionned uservoice suggestion : http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/6102324-ignore-culture-on-input-in-numerictextbox
0
Kiril Nikolov
Telerik team
answered on 26 Jun 2014, 01:52 PM
Hello Jean,

Thanks for sharing this, we really appreciate it.

In case you have any other questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jan
Top achievements
Rank 1
answered on 12 Feb 2020, 09:29 AM

I won't take all the credits but the solution below is what Kendo support and I did for a editable ListView containing NumericTextBox-s:

          // accept dot and comma as decimal separator
           
         $("#listView").on("keydown", "[data-role='numerictextbox']", function (e) {
            var numeric = $(e.target).getKendoNumericTextBox();
            var decimalSeparator = kendo.culture().numberFormat["."]
            var decimalCharCode = decimalSeparator.charCodeAt(0);
          
            if ((e.keyCode === 190 && decimalCharCode !== 46) || (e.keyCode === 188 && decimalCharCode !== 44)) {
              var value = e.target.value || "";
              if (numeric.options.decimals !== 0 && value.indexOf(".") < 0 && value.indexOf(",") < 0) {
                var pos = $(e.target).caret("pos");
                e.target.value = value.substring(0, pos) + decimalSeparator +  value.substring(pos);
                e.preventDefault();
                $(e.target).caret("pos", pos+1);
              }
            }
          });

A working demo can be found at https://dojo.telerik.com/oxUcUFOK/5

Any improvements are welcome!

Regards,
Jan

 

 

0
Richard
Top achievements
Rank 1
answered on 19 Jun 2020, 09:42 AM

Great, thanks Jan for your help. Here comes my version when caret is not available in JQuery and also support for NumpadDecimal

 

$(ownerTreeViewId).on("keydown", "[data-role='numerictextbox']", function (e) {
    var numeric = (<any>$(e.target)).getKendoNumericTextBox();
    var decimalSeparator = (<any>window).kendo.culture().numberFormat["."]
    var decimalCharCode = decimalSeparator.charCodeAt(0);
 
    if (   (e.keyCode === 190 && decimalCharCode !== 46)    //Period and culture is not period
        || (e.keyCode === 188 && decimalCharCode !== 44)    //Comma and culture is not comma
        || (e.keyCode === 110)                              //NumpadDecimal use always
        ) {
        var value = e.target.value || "";
        if (numeric.options.decimals !== 0 && value.indexOf(".") < 0 && value.indexOf(",") < 0) {
            var pos = e.target.selectionStart;
            e.target.value = value.substring(0, pos) + decimalSeparator + value.substring(pos);
            e.preventDefault();
            e.target.setSelectionRange(pos + 1, pos + 1);
        }
    }
});

 

0
Alex
Top achievements
Rank 1
Iron
answered on 18 May 2021, 12:15 PM | edited on 18 May 2021, 12:17 PM
It turned out to emit a comma keydown if we keydown on a dot. As a result, the user can keydown both a dot and a comma, and in the interface it will be in both cases of the type 11,22.


<kendo-numerictextbox
        [value]="value"
        (valueChange)="valueChange($event)"
        [autoCorrect]="false"
        format="n2"
        [spinners]="false"
        [decimals]="2"
        (keydown)="onKey($event)"
      >

  onKey(event: any) {
    if (event.key === '.') {
      const el = document.getElementById(event.target?.id);
      this.setNativeValue(el, `${event.target.value},`);
      el?.dispatchEvent(new Event('input', { bubbles: true }));
    }
  }

public setNativeValue(element: HTMLElement | null, value: string) {
    const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {};
    const prototype = Object.getPrototypeOf(element);
    const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};

    if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element, value);
    } else if (valueSetter) {
      valueSetter.call(element, value);
    } else {
      throw new Error('The given element does not have a value setter');
    }
  }

Nikolay
Telerik team
commented on 20 May 2021, 08:47 AM

Hi Alex,

Thank you for sharing this with the community. I believe it will be beneficial to others.

Regards,

Nikolay

Tags
NumericTextBox
Asked by
Jean-François
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Jean-François
Top achievements
Rank 1
Jan
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Iron
Share this question
or