Is there 1 Edit button for multiple selected editable rows?

2 posts, 0 answers
  1. Bobby
    Bobby avatar
    2 posts
    Member since:
    May 2017

    Posted 05 May 2017 Link to this post

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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 09 May 2017 Link to this post

    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.
Back to Top