Kendo Grid for Angular 2 Reactive FormArray

Posted 2023-05-07

【中文标题】Kendo Grid for Angular 2 Reactive FormArray

【英文标题】：

【发布时间】：2018-12-22 05:23:25

【问题描述】：

我没有在剑道网格示例中找到一个好的、简单且透明的表单示例，其中剑道网格为 formArray，数组的每一行为表单组，每个单元格为表单控件

在另一个问题Batch editing in KendoUI Grid for Angular 2/4 中有一个答案，但不是那么透明。

我无法让这些标签起作用。

  <form [formGroup]="formGroup"><kendo-grid
  #grid
  [data]="gridData" [formArray]="formArray" formArrayName="arrayGrid" 
  //[formGroup]="gridRow"// how to say each row is in this form group
  [height]="410"
  >
    <ng-template kendoGridToolbarTemplate>
      <button *ngIf="!isEditMode" (click)="editHandler()" class="k-button k-primary">Edit</button>
      <button *ngIf="isEditMode" (click)="saveHandler()" [disabled]="!canSave()" class="k-button">Update</button>
      <button *ngIf="isEditMode" (click)="cancelHandler()" class="k-button">Cancel</button>
    </ng-template>
    <kendo-grid-column field="ProductName" formControlName="ProductName"  title="Name" >
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" formControlName="UnitPrice" title="Price" format="0:c"  editor="numeric">
    </kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" formControlName="UnitsInStock" title="In stock"  editor="numeric">
    </kendo-grid-column>
</kendo-grid></form>

有人做过这种实现吗？

【问题讨论】：

你已经看过telerik.com/kendo-angular-ui/components/grid/editing/…了吗？不完全是你想要达到的目标，但我猜是相关的。

谢谢，但我们的想法是使用作为网格标题的表单保存整个网格，而不是在编辑网格时逐行保存，因为我想作为一个整体进行验证实体。

@LuizBicalho 你找到答案了吗？

不，我没有找到任何答案，我创建了一个表格并且在这种情况下没有使用剑道网格，我想更深入地研究这个但没有时间跨度>

在剑道中有一个指向这个的功能请求，它会很有用feedback.telerik.com/kendo-angular-ui/…

【参考方案1】：

我已经找到了解决方案。这有点hacky，但效果很好。您必须使用网格的每个单元格模板中的ng-container 将每个剑道网格数据项作为包含在FormArray 中的FormGroup 来处理。就我而言，我从外部服务请求数据，但如果你在本地拥有它，它几乎是一样的。 这个FormArray 也可以在一个更大的FormGroup 中，但为了简单起见，我把它作为一个属性。

parent.component.html

<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="firstField" title="ID" >
  <ng-template kendoGridHeaderTemplate>
    <span>First Field</span>
  </ng-template>
  <ng-template kendoGridCellTemplate let-dataItem>
    <ng-container [formGroup]="dataItem">
      <app-my-component formControlName="firstField"></app-my-component>
    </ng-container>
  </ng-template>
</kendo-grid-column>
<kendo-grid-column field="secondField" >
  <ng-template kendoGridHeaderTemplate>
    <span>Second Field</span>
  </ng-template>
  <ng-template kendoGridCellTemplate let-dataItem>
    <ng-container [formGroup]="dataItem">
      <kendo-dropdownlist formControlName="secondField" [valueField]="'id'" [textField]="'text'"></kendo-dropdownlist>
    </ng-container>
  </ng-template>
</kendo-grid-column>

parent.component.ts

import  Component, OnInit, ViewChild  from '@angular/core';
import  GridComponent, GridDataResult  from '@progress/kendo-angular-grid';
import  FormGroup, FormArray, FormBuilder  from '@angular/forms';

 export class ParentComponent implements OnInit 

 @ViewChild(GridComponent) private grid: GridComponent;
  public formArray = this.formBuilder.array([]);
  public gridData: GridDataResult;

  constructor(
    private formBuilder: FormBuilder,
    private service: MyService) 

    super();
  

  ngOnInit() 
    this.requestData();
  

  public requestData() 
    const response = this.service.getData().subscribe(data => 
      const that = this;
      response.forEach(function (data, i) 
        that.formArray.insert(i, that.createDataFormGroup(data));
      );

      this.gridData = 
        data: this.formArray.controls,
        total: this.formArray.controls.length
      ;
    );