具有角度的Kendo UI网格2. 1编辑按钮而不是每行的多个编辑按钮

Question

我希望在网格底部有一个编辑按钮，而不是为每个按钮设置一个编辑按钮，只有在对所有可编辑列进行了更改后才会触发。有没有办法在Angular 2中做到这一点？我不希望用户必须单击每行的编辑，进行更改然后移至下一行，单击编辑并再次进行更改。

            import { Observable } from 'rxjs/Rx';
            import { Component, OnInit, Inject } from '@angular/core';
            import { FormGroup, FormControl, Validators } from 
            '@angular/forms';

            import { GridDataResult } from '@progress/kendo-angular-grid';
            import { State, process } from '@progress/kendo-data-query';

            import { Product } from './model';
            import { EditService } from './edit.service';

            @Component({
                selector: 'my-app',
                template: `
                  <kendo-grid
                      [data]="view | async"
                      [height]="533"
                      [pageSize]="gridState.take" [skip]="gridState.skip" 
                [sort]="gridState.sort"
                      [pageable]="true" [sortable]="true"
                      [selectable]="true"
                      (dataStateChange)="onStateChange($event)"
                      (edit)="editHandler($event)" 
                (cancel)="cancelHandler($event)"
                      (save)="saveHandler($event)" 
                (remove)="removeHandler($event)"
                      (add)="addHandler($event)"
                    >
                    <!--<ng-template kendoGridToolbarTemplate>
                        <button kendoGridAddCommand>Add new</button>
                    </ng-template> -->
                    <kendo-grid-column field="ProductName" title="Product 
                    Name" [editable]="false"></kendo-grid-column>
                    <kendo-grid-column field="UnitPrice" editor="numeric" 
                    title="Price"></kendo-grid-column>
                    <kendo-grid-column field="Discontinued" editor="boolean" 
                     title="Discontinued"></kendo-grid-column>
                    <kendo-grid-column field="UnitsInStock" editor="numeric" 
                     title="Units In Stock" [editable]="false"></kendo-grid-
                    column>
                    <kendo-grid-command-column title="command" width="220">
                        <ng-template kendoGridCellTemplate let-
                    isNew="isNew">
                            <button kendoGridEditCommand class="k-
                    primary">Edit</button>
                            <button kendoGridRemoveCommand>Remove</button>
                            <button kendoGridSaveCommand 
                    [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 
                    'Update' }}</button>
                            <button kendoGridCancelCommand>{{ isNew ? 
                      'Discard changes' : 'Cancel' }}</button>
                        </ng-template>
                    </kendo-grid-command-column>
                  </kendo-grid>
              `
            })
            export class AppComponent implements OnInit {
                public view: Observable<GridDataResult>;
                public gridState: State = {
                    sort: [],
                    skip: 0,
                    take: 10
                };
                public formGroup: FormGroup;

                private editService: EditService;
                private editedRowIndex: number;

                constructor( @Inject(EditService) editServiceFactory: any) {
                    this.editService = editServiceFactory();
                }

                public ngOnInit(): void {
                    this.view = this.editService.map(data => process(data, 
                this.gridState));

                    this.editService.read();
                }

                public onStateChange(state: State) {
                    this.gridState = state;

                    this.editService.read();
                }

                protected addHandler({ sender }: any) {
                    this.closeEditor(sender);

                    this.formGroup = new FormGroup({
                        'ProductID': new FormControl(),
                        'ProductName': new FormControl("", 
                    Validators.required),
                        'UnitPrice': new FormControl(0),
                        'UnitsInStock': new FormControl("", 
                    Validators.compose([Validators.required, 
                    Validators.pattern('^[0-9]{1,2}')])),
                        'Discontinued': new FormControl(false)
                    });

                    sender.addRow(this.formGroup);
                }

                protected editHandler({ sender, rowIndex, dataItem }: any) {
                    //protected editHandler({ sender, rowIndex, dataItem }){
                    this.closeEditor(sender);

                    this.formGroup = new FormGroup({
                        'ProductID': new FormControl(dataItem.ProductID),
                        '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}')])),
                        'Discontinued': new 
                    FormControl(dataItem.Discontinued)
                    });

                    this.editedRowIndex = rowIndex;

                    sender.editRow(rowIndex, this.formGroup);
                }

                protected cancelHandler({ sender, rowIndex }: any) {
                    this.closeEditor(sender, rowIndex);
                }

                private closeEditor(grid: any, rowIndex = 
                this.editedRowIndex) {
                    grid.closeRow(rowIndex);
                    this.editedRowIndex = undefined;
                    this.formGroup = undefined;
                }

                protected saveHandler({ sender, rowIndex, formGroup, isNew 
                }: any) {
                    const product: Product = formGroup.value;

                    this.editService.save(product, isNew);

                    sender.closeRow(rowIndex);
                }

                protected removeHandler({ dataItem }: any) {
                    this.editService.remove(dataItem);
                }
            }