CODEWITHSUNDEEP
angularkendo-uikendo-gridkendo-ui-angular2
Luiz Bicalho
Luiz Bicalho

Reputation: 935

Kendo Grid for Angular 2 Reactive FormArray

I didn't find in the Kendo grid examples one good, simple and transparent example of a form with a kendo grid as formArray, and each row of the array as form group and each cell as formcontrol

in this other question Batch editing in KendoUI Grid for Angular 2/4 there is an answer, but it's not that transparent.

I coudn't make those tags work.

  <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" width="200">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" formControlName="UnitPrice" title="Price" format="{0:c}" width="80" editor="numeric">
    </kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" formControlName="UnitsInStock" title="In stock" width="80" editor="numeric">
    </kendo-grid-column>
</kendo-grid></form>

Did anyone make this kind of implementation?

Upvotes: 4

Views: 2822

Answers (1)

Titukedo
Titukedo

Reputation: 960

I've found a solution for this. It's a little hacky, but it works nicely. You have to handle each kendo-grid data-item as a FormGroup contained into a FormArray, using the ng-container in each cell template of the grid. In my case, I request the data from an external service, but if you have it locally it's almost the same. This FormArray could also be inside a bigger FormGroup, but for simplicity I put it as an attribute.

parent.component.html

<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="firstField" title="ID" width="150">
  <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" width="145">
  <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
      };
    });
  }

Upvotes: 3

Related Questions