Блог

В настоящее время я создаю редактируемую сетку на основе компонента Kendo Angular Grid.

Я также использую реактивные формы для предоставления данных формы сетке, как показано в этом примере. На самом деле, мой код не совсем такой, как в примере, поскольку я не могу использовать столбец command (запрещено командой разработчиков).

Прямо сейчас все работает нормально, за исключением того, что form.value пусто…

Вот код моего компонента:

 <!-- my-grid.component.html -->
<!-- Code voluntary simplified to improve readability -->

<kendo-grid
  #grid
  [data]="rows"
  [selectable]="{ mode: 'single', checkboxOnly: false, enabled: true }"
>
  <ng-template kendoGridToolbarTemplate>
    <button (click)="editHandler()">Edit</button>
    <button (click)="saveHandler()">Save</button>
  </ng-template>

  <kendo-grid-checkbox-column [width]="48" [style]="{ 'text-align': 'center' }"></kendo-grid-checkbox-column>
  <kendo-grid-column
    *ngFor="let column of columns"
    [field]="column.field"
    [title]="column.title"
    [format]="column.getFormat()"
    [editor]="column.type"
    [hidden]="column.hidden"
    [width]="150"
  ></kendo-grid-column>
</kendo-grid>
  

 // my-grid.component.ts
// Code voluntary simplified to improve readability

editHandler(): void {
  const form = {};
  this.columns
    .forEach((c) => {
      const fc = new FormControl(this.selectedRow[c.field]);
      Object.defineProperty(form, c.field, { value: fc, writable: true }); // I can't know in advance what would be the columns of my grid...
    });

  this.currentForm = new FormGroup(form); // at this moment, the FormGroup is correctly built.
  this._grid.editRow(this.selectedRowIndex, this.currentForm);
}

saveHandler(): void {
  const formValue = this.currentForm.value; // yields {} instead of { myField1: 1, myField2: 2 }...
  // ...
}
  

Вот мой стек:

• угловая: 9.1.11
• kendo-angular-grid: 4.7.2

Любая помощь была бы высоко оценена. 🙂

Ну, по какой-то причине, присвоение enumerable prop значения true решает эту проблему.

 Object.defineProperty(form, c.field, { value: fc, writable: true, enumerable: true });