This is a migrated thread and some comments may be shown as answers.

Is there 1 Edit button for multiple selected editable rows?

1 Answer 143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bobby
Top achievements
Rank 1
Bobby asked on 05 May 2017, 03:28 PM

Hi,

Instead of having an edit button for each individual button, I want to have 1 Edit button at the bottom of the grid that will fire only after changes have been made to all editable columns. Is there a way to do this in Angular 2? I don't want the user to have to click Edit for each row, make  changes and then move to the next row, click edit and make changes again. This is what my app.component.ts file looks like

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);
    }
}

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 09 May 2017, 12:25 PM
Hi Bobby,

Unfortunately the desired functionality is not supported out-of-the-box. However, we are actively working on enhancing our Grid selection functionality, including enabling multiple row selection, and providing a way to obtain the data items, associated with the currently selected rows.

Once these functionalities are available, a custom implementation allowing to edit the selected items will be possible. It is unlikely such to be provided and supported out-of-the-box, but it will be achievable via the current Grid API and some common Angular forms features.

If you have the time, please submit feature requests for any functionalities or enhancements that you feel will improve the quality of our product, to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback

It is closely monitored and helps us prioritize, based on customer demand, when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Bobby
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or