Editing and Saving All Grid Rows

Environment

Product

Progress® Kendo UI for Angular Grid

Description

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

Solution

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:

ts

let rows: any = grid.data;
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

ts

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:

ts

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

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

ts

public save(product: any, isNew: boolean): void {
    if (isNew) {
        this.data.unshift(product);
    } else {
        Object.assign(
            this.data.find(({ ProductID }) => ProductID === product.ProductID),
            product
        );
    }
}

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:

ts

public addRowHandler(grid: GridComponent) {
    this.formGroup = this.createFormGroup({
      ProductID: this.counter++,
      ProductName: '',
      UnitsInStock: '',
      CategoryID: null,
    });

    this.service.save(this.formGroup.value, true);
    (this.formGroups.get('items') as FormArray).insert(0, formGroup);
...
}

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

Change Theme

Theme

Loading ...