Batch editing in KendoUI Grid for Angular 2/4

问题:

As per this link https://github.com/telerik/kendo-angular/issues/165 batch editing of the kendo ui grid for angular 2/4 is not available. Has anyone developed a workaround?

回答1:

UPDATE

Please note, looks like batch editing is supported out of the box now.

ORIGINAL ANSWER

I was able to change kendo angular grid's custom editing functionality to achieve something in line with batch/cell editing. Here is the plunkr. http://plnkr.co/edit/USYz7LIV5oaOmjSmY7JH

import { Component, OnInit, Inject, ViewChild } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { ProductsService } from './products.service'; import { categories } from './categories';  @Component({ selector: 'my-app', template: `     <kendo-grid       #grid       [data]="gridData"       [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" title="Name" width="200">         </kendo-grid-column>         <kendo-grid-column field="UnitPrice" title="Price" format="{0:c}" width="80" editor="numeric">         </kendo-grid-column>         <kendo-grid-column field="UnitsInStock" title="In stock" width="80" editor="numeric">         </kendo-grid-column>     </kendo-grid> ` })  export class AppComponent implements OnInit { public gridData: any[]; public formGroups: FormGroup[] = []; public isEditMode: Boolean = false; @ViewChild('grid') grid;  constructor(private service: ProductsService) { }  public ngOnInit(): void {     this.gridData = this.service.products(); }  public editHandler() {     this.isEditMode = true; // Start editing     for (let rowIndex = 0; rowIndex < this.gridData.length; rowIndex++) {         this.grid.closeRow(rowIndex);          let dataItem = this.gridData[rowIndex];          this.formGroups[rowIndex] = new FormGroup({           'ProductName': new FormControl(dataItem.ProductName, Validators.required),           'UnitPrice': new FormControl(dataItem.UnitPrice),           'UnitsInStock': new FormControl(dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,2}')]))         });          this.grid.editRow(rowIndex, this.formGroups[rowIndex]);     } }  public canSave() {     return this.formGroups.every(f => f.valid); }  public saveHandler(): void {     for (let rowIndex = 0; rowIndex < this.gridData.length; rowIndex++) {         const editedDataItem: any = this.formGroups[rowIndex].value;         let dataItem: any = this.gridData[rowIndex];          dataItem.ProductName = editedDataItem.ProductName;         dataItem.UnitPrice = editedDataItem.UnitPrice;         dataItem.UnitsInStock = editedDataItem.UnitsInStock;         this.grid.closeRow(rowIndex);     }      // Call an api on server side to update the values here, as the update only does an in-javascript objects update.      this.formGroups = []; // Reset all     this.isEditMode = false; // Finish editing }  public cancelHandler() {     for (let rowIndex = 0; rowIndex < this.gridData.length; rowIndex++) {         this.grid.closeRow(rowIndex);     }      this.formGroups = []; // Reset all     this.isEditMode = false; // Finish editing } } 

文章来源: Batch editing in KendoUI Grid for Angular 2/4