New to Kendo UI for Angular? Start a free 30-day trial

Editing Selected Rows in Kendo UI for Angular Grid

Environment

Product

Progress® Kendo UI® Data Grid for Angular

I need to implement batch editing of the currently selected rows in the Kendo UI for Angular Grid. The users should be able to select multiple rows, then click a button in the Grid toolbar to either delete the selected rows or put them in edit mode. How can I achieve this functionality?

This Knowledge Base article also answers the following questions:

How to enable bulk editing for selected rows in Kendo UI for Angular Grid?
How to add batch delete functionality for selected rows in Kendo UI for Angular Grid?
How to persist selected rows in Kendo UI for Angular Grid?

Solution

The solution reuses the logic suggested in the Editing and Saving All Grid Rows Knowledge Base article, and enhances the editing and saving implementation to target only the selected rows.

Persisting the Selected Rows

First, enable the multiple selection functionality of the Grid by setting the mode option of the selectable property to "multiple".

Then, use the built-in SelectionDirective and its selectedKeys property to persist the selected rows. This ensures that you can programmatically access the selected rows during editing or deleting operations.

html

<kendo-grid 
  #grid 
  [data]="gridData" 
  [kendoGridSelectBy]="selectByDataItem"
  [(selectedKeys)]="mySelection">
</kendo-grid>

public mySelection: number[] = [];
// Needed to store the whole data item in mySelection.
public selectByDataItem(context: RowArgs): string {
  return context.dataItem;
}

Editing Selected Rows

To put only the selected Grid rows in edit mode, iterate over the Grid data and invoke the built in editRow method for each row that exists within the mySelection collection.

public updateGroups(grid): void {
  let rows: any = grid.data;
  (this.formGroups.get('items') as FormArray).clear();

  rows.forEach((_item, index) => {
      let group = this.createFormGroup(rows[index]);
      (this.formGroups.get('items') as FormArray).push(group);

      // Newly added condition that checks the existence of the row in `mySelection`.
      if (this.isEdited && this.mySelection.some((row) => row.ProductID === _item.ProductID)) {
          grid.editRow(index, this.formGroups.get('items')[index]);
      }
  });
}

Saving the Changes

To save the selected rows that have been edited, iterate over the Grid data again and find the corresponding items of the rows that exist within the mySelection collection from the created FormArray.

Then, save the edited rows by using a custom service method and use the closeRow method to exit the edit mode.

public saveChanges(grid: GridComponent, saveNew?: boolean): void {
  let rows: any = grid.data;

  rows.forEach((_item, index) => {
      // Newly added condition that checks the existence of the row in `mySelection`.
      if (this.mySelection.some((row) => row.ProductID === _item.ProductID)) {
          const product = (this.formGroups.get('items') as FormArray).controls[index];
          this.service.save(product.value, false);

          if (saveNew) {
              grid.closeRow(index);
          }
      }
  });
}

Deleting Selected Rows

To implement a functionality that deletes the selected rows, include an additional <kendo-toolbar-button> tool in the Grid toolbar and handle the click event of the tool:

html

<kendo-toolbar>
    ...
    <kendo-toolbar-button
        text="Delete Selected Rows"
        (click)="deleteHandler()"
    ></kendo-toolbar-button>
</kendo-toolbar>

In the handler of this event, iterate over the mySelection collection and remove the items by using a custom service method:

typescript

public deleteHandler(): void {
    this.mySelection.forEach((item) => {
        this.service.remove(item);
    });
    this.mySelection = [];
}

The following example demonstrates the full implementation of the suggested approach:

Change Theme

Theme

Loading ...