CODEWITHSUNDEEP
ag-gridag-grid-angular
Valla
Valla

Reputation: 2442

Using 'save' and 'cancel' button in cell editing for Ag-grid

I am using Ag-grid in my Angular application and the data in the grid is populated from a web service. I implemented cell editing in this grid, so when I click one of the columns then the entire row will be editable and when i click outside the grid stops editing. The following is the code in html and the component file:

<ag-grid-angular #agGrid style="width: 100%; height: 600px;" class="ag-theme-balham left" [rowData]="rowData" [columnDefs]="columnDefs"
                            [gridOptions]="gridOptions" rowSelection="multiple" pagination=true (rowSelected)="onRowSelected($event)">
                        </ag-grid-angular>

component.ts file:

this.gridOptions = {
                defaultColDef: {
                    editable: (event: any) => {
                        if (this.isGridDataEditable) {
                            return true;
                        } else {
                            return false; // true/false based on params (or some other criteria) value
                        }
                    },
                    filter: true
                },
                singleClickEdit: true,
                stopEditingWhenGridLosesFocus: true,
                paginationPageSize: 20,
                editType: 'fullRow',
                onCellValueChanged: (event: any) => {
                },
                onRowValueChanged: (event: any) => {
                },
                onRowEditingStopped: (event: any) => {
                }
            };
        }

The column definitions are generated dynamically based on the response from the web api. When the editing stops if the data changes then I have to make a call to the web api to update the data, all this is working as expected.But I would like to add a save and cancel button just above the grid and when the user clicks on save only then make the call to the web api, clicking on cancel button should revert the grid data back to the old values. I came across the api stopEditing(true) but it did not work. Could you please let me know how I could achieve this functionality.

Upvotes: 3

Views: 9423

Answers (1)

abd995
abd995

Reputation: 1839

Try setting stopEditingWhenGridLosesFocus to false.

Then add two buttons above the grid, Save and Cancel.

On clicking save. call onSave function whose definition will be 

onSave() {
  this.agGrid.api.stopEditing();
  this.callWebApi();
}

On clicking cancel, call onCancel function whose definitions will be

onCancel() {
  this.agGrid.api.stopEditing(true);
}

Let me know if this is what you were looking for.

Upvotes: 9

Related Questions