Как отформатировать валюту для кендо-угловой сетки при редактировании inline и все еще в фокусе?

Question

Если у меня есть сетка кендо, я могу использовать format = "{0: c}" в столбце сетки кендо, чтобы отобразить число в формате валюты. Однако, поскольку я редактирую этот столбец в строке, а столбец сетки находится в фокусе, формат валюты больше не отображается правильно, вместо этого, когда он находится в фокусе, он ведет себя как простой числовой ввод, где принимается любое число или количество десятичных знаков. После того, как я размыл из этого ввода, формат валюты снова отображается правильно.

Мне было интересно, есть ли способ сохранить формат валюты, когда основное внимание уделяется вводу при встроенном редактировании.

В моем примере (который я взял из документации кендо и упростил) я нажимаю на элемент в столбце цены, который составляет 22,00 долл. США, я могу добавить 22,985094385043950439 во входные данные при редактировании. Когда я размываю, это становится $ 22,99, но я не хочу разрешать пользователю более 2 знаков после запятой (USD), даже если они редактируют и фокусируются на столбце.

Кроме того, он должен быть глобализован, поэтому он должен вести себя таким образом для местной валюты, а не только для доллара США. Я пытался использовать formatNumber () из '@ telerik / kendo-intl' как в обработчике редактирования, так и в обработчике события valueChange, но не получил желаемого эффекта.

Как мне сохранить формат валюты, даже когда я редактирую столбец?

import { Observable } from 'rxjs/Observable';
import { Component, OnInit, Inject } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { GridDataResult } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';

import { Product } from './model';
import { EditService } from './edit.service';

import { map } from 'rxjs/operators/map';

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid #grid
          [data]="view | async"
          [pageable]="true" [sortable]="true"
          (dataStateChange)="onStateChange($event)"
          (cellClick)="cellClickHandler($event)"
          (cellClose)="cellCloseHandler($event)"
          (cancel)="cancelHandler($event)"
          (save)="saveHandler($event)"
        >
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
            <button class='k-button' [disabled]="!editService.hasChanges()" (click)="saveChanges(grid);">Save Changes</button>
            <button class='k-button' [disabled]="!editService.hasChanges()" (click)="cancelChanges(grid);">Cancel Changes</button>
        </ng-template>
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" format="{0:c}" editor="numeric" title="Price"></kendo-grid-column>
            </kendo-grid>
  `
})
export class AppComponent implements OnInit {
  public view: Observable<GridDataResult>;
  public gridState: State = {
    sort: [],
    skip: 0,
    take: 10
  };

  public changes: any = {};

  constructor(private formBuilder: FormBuilder, public editService: EditService) {
  }

  public ngOnInit(): void {
    this.view = this.editService.pipe(map(data => process(data, this.gridState)));

    this.editService.read();
  }

  public onStateChange(state: State) {
    this.gridState = state;

    this.editService.read();
  }

  public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
    if (!isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }
  }

  public cellCloseHandler(args: any) {
    const { formGroup, dataItem } = args;

    if (!formGroup.valid) {
      // prevent closing the edited cell if there are invalid values.
      args.preventDefault();
    } else if (formGroup.dirty) {
      this.editService.assignValues(dataItem, formGroup.value);
      this.editService.update(dataItem);
    }
  }

  public addHandler({ sender }) {
    sender.addRow(this.createFormGroup(new Product()));
  }

  public cancelHandler({ sender, rowIndex }) {
    sender.closeRow(rowIndex);
  }

  public saveHandler({ sender, formGroup, rowIndex }) {
    if (formGroup.valid) {
      this.editService.create(formGroup.value);
      sender.closeRow(rowIndex);
    }
  }

  public removeHandler({ sender, dataItem }) {
    this.editService.remove(dataItem);

    sender.cancelCell();
  }

  public saveChanges(grid: any): void {
    grid.closeCell();
    grid.cancelCell();

    this.editService.saveChanges();
  }

  public cancelChanges(grid: any): void {
    grid.cancelCell();

    this.editService.cancelChanges();
  }

  public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
      'ProductID': dataItem.ProductID,
      'ProductName': [dataItem.ProductName, Validators.required],
      'UnitPrice': dataItem.UnitPrice,
      'UnitsInStock': [dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])],
      'Discontinued': dataItem.Discontinued
    });
  }
}