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

Editing and Saving All Grid Rows


ProductProgress® Kendo UI for Angular Grid


I want all Grid rows to be in edit mode at the same time. Is it possible?


The following solution relies on custom buttons, rendered in the Grid ToolBar. When pressed they invoke the respective Grid methods in order to achieve multi rows editing.

The toolbar buttons and the logic implemented in their corresponding click handlers, could be further modified to meet specific project requirements.

The implementation relies on iterating the Grid data and might cause performance issues if a lot of Grid rows are rendered at the same time. You can use paging or virtual scrolling instead.

Editing All Rows

To put all rendered Grid rows in edit mode, iterate over the grid data and invoke the built in editRow method for each row. The method requires a row index as first argument, and optionally a FormGroup associated with each row as a second argument:

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

Store the created FormGroup in a FormArray so that the respective form groups can be easily reused when necessary

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

Saving the Changes

When you want to persist the changes, iterate over the Grid data again and find the corresponding items from the created FormArray. Then you can save the edited and newly added rows by using a custom service method.

You can use the closeRow method to exit the edit mode:

public saveChanges(grid: GridComponent) {
    let rows: any =;
    rows.forEach((_item, index) => {
        const product = (this.formGroups.get('items') as FormArray).controls[index];, false);
         if (saveNew) {

You can use the save service method to update the Grid collection as necessary.

public save(product: any, isNew: boolean): void {
    if (isNew) {;
    } else {
  { ProductID }) => ProductID === product.ProductID),

Adding New Rows

You can add new rows, by creating a form group for the respective row and passing it to the save service method:

public addRowHandler(grid: GridComponent) {
    this.formGroup = this.createFormGroup({
      ProductID: this.counter++,
      ProductName: '',
      UnitsInStock: '',
      CategoryID: null,
    });, true);
    (this.formGroups.get('items') as FormArray).insert(0, formGroup);

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

View Source
Change Theme: