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

Supporting both comma and dot for decimal input

8 Answers 2970 Views

NumericTextBox

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

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

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

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

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);

}

});

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

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