Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Lance Tressler
605
How to perform two way international numeric editing using igxInputDirective inside grid?
posted

We have configured generic numeric editing for columns in our grid.

We have successfully set the angular locale (for example, de) and are using the angular formatNumber method to display the correct value when not in edit mode.

However, we are using an igxInput for cell editing and cannot figure out how to have it display the correctly formatted value when editing starts.

Here is our cellEditor definition:

            <ng-template igxCellEditor let-cell="cell" *ngIf="col.formatAsNumber">
                <igx-input-group type="border">
                    <input igxInput
                           type="text"
                           [(ngModel)]="cell.editValue"
                           [igxFocus]="true"
                           (keypress)="numericEditorKeyPress($event)" />
                </igx-input-group>
            </ng-template>

We use the kepypress event to resolve numeric editing issues in firefox and we use the type "text" because if we use number, the user cannot enter the correct numeric decimal separator (for example comma in German).

We do not require that the user's browser be in the specified language, only that the first language they have specified is used to control the formatting.

Here is the display value:

and here is the cell in edit mode

Here is the browser configuration (this is a common configuration for our international users since a lot of the work that they do is in English language, but they still need their dates and numbers displayed and editable in their native representation):

Parents
No Data
Reply
  • 2680
    Verified Answer
    Offline posted
    Hello Lance,

     

    Thank you for the provided details.

     

    I have been looking into this and to start with, even if setting the input to type “text” was not needed because of the Firefox issues, the input type “number” would still have been quite uncooperative from localization point of view. It is meant to be localized as per the browser locale (for example in Chrome), which as you have described, is not necessarily German on the users’ side. Additionally, you could refer to the allowed characters floating point numbers in the w3c specs here. To sum up, the specs define the decimal separator as a period regardless of the locale.

     

    Consequently, the input type “text” displays strings and therefore formatting according to a desired locale, implementing JavaScript parsing and validation, and informing the user is left to the developer.

     

    Therefore, I have prepared a small sample to demonstrate an approach that can handle these limitations in the case of a templated cell editor in the IgxGrid. You can find it here.

     

    I have introduced a simple pipe that transforms the cell.editValue to a german locale string and bound it to the input’s value property via ngModel. Since pipes cannot be used with the two-way binding syntax, the ngModel event binding, which updates the cell.editValue, is separated. Additionally, for usability enhancement a regex pattern accepting only valid german locale decimal number string can be specified:

     

    <ng-template igxCellEditor let-cell="cell">
        <igx-input-group type="border">
          <input
            igxInput
            type="text"
            [ngModel]="cell.editValue | germanLocale"
            (ngModelChange)="cell.editValue=$event"
            pattern="^-?\d{1,3}(?:\.\d{3})*(?:,\d+)?$"
            [igxFocus]="true"
          />
        </igx-input-group>
      </ng-template>

     

    The pipe is defined as follows:

     

    @Pipe({
  name: "germanLocale"
})
export class GermanLocalePipe implements PipeTransform {
  transform(value: any): number {
    return value.toLocaleString("de-DE");
  }
}

     

    Finally, the grid’s cellEdit event is handled to ensure that we translate the edited string back to a valid decimal number that can be accepted by the grid and data:

     

    public onCellEdit(event: IGridEditEventArgs) {
    if (event.column.field === "UnitPrice") {
      event.newValue = Number(
        event.newValue
          .toString()
          .replace(/\./g, "")
          .replace(/,/, ".")
      );
    }
  }

     

    Of course, additional validation might be needed to ensure the entered string is a valid number.

     

    Please, test the suggested sample and in case of any other questions or concerns, please let me know.

     

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer
Children
No Data