如何在内联编辑且仍处于焦点时格式化Kendo-Angular网格的货币格式？

Question

如果我有剑道网格，则可以在剑道网格列上使用format =“ {0：c}”来显示货币格式的数字。但是，当我在线编辑此列且网格列处于焦点位置时，货币格式不再正确显示，而是在聚焦时，它的行为就像一个简单的数字输入，其中接受任何数量或数量的小数。一旦我从输入中模糊掉了，货币格式就会再次正确显示。

我想知道是否有一种方法可以在进行内联编辑时将焦点放在输入上来保持货币格式。

在我的示例（我从kendo的文档中获取并简化）中，我单击了价格列中的一项，即$ 22.00，我可以在编辑时在输入中添加$ 22.985094385043950439。当我模糊时，它变成$ 22.99，但是我不想让用户将两个小数位（USD）以上，即使他们正在编辑并且焦点位于该列上。

此外，这将必须全球化，因此对于本地货币（不仅是美元），必须采取这种方式。我已经尝试在编辑处理程序和valueChange事件处理程序中使用来自'@ telerik / kendo-intl'的formatNumber（），但是没有获得预期的效果。

即使我正在编辑列，如何保持货币格式？

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