Batch editing in KendoUI Grid for Angular 2/4

Question

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?

Answer 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
}
}