在KendoUI Grid for Angular 2/4中的批量編輯

Question

根據此鏈接https://github.com/telerik/kendo-angular/issues/165 kendo ui grid for angular 2/4的批量編輯不可用。有沒有人開發瞭解決方法？

Answer 1

我能夠改變kendo角柵格的自定義編輯功能，以實現符合批次/單元格編輯的內容。這是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 
} 
}