ag-grid in angular5 row inline edit

Question

I want to know the best way I can give user inline edit in ag-grid on button click.

see the image below.

As per my requirement, if user clicks on edit icon, then ag-grid row goes in fullrow edit mode (able to do from documentation provided onag-grid.com) and at the same time, icons in 'Action' column changes to save and cancel icons. So, want to know how this can be done in Angular5. I need idea of dynamically changing this last column.

score 3 · Answer 1 · answered May 08 '18 at 07:15

There's quite a few steps here that you'll need to implement.

Step 1: Create a custom renderer component

@Component({
  selector: 'some-selector',
  template: `
     <span *ngIf="!this.isEditing">
       <button (click)="doEdit()">Edit</button>
     </span>
     <span *ngIf=this.isEditing">
       <button (click)="doSave()">Save</button>
       <button (click)="doCancel()">Cancel</button>
     </span>
  `
})
export class MyRenderer implements ICellRendererAngularComp {
    isEditing = false;
    params: any;

    agInit(params: any): void {
      this.params = params;          
    }

    doEdit() {
      // we need to loop thru all rows, find the column with the renderer, and 'cancel the edit mode'.
      // otherwise, we will end up with rows that has SAVE buttons appearing but not in edit mode
      const renderersInOtherRows = this.params.api.getCellRendererInstances(this.params);

      if( renderersInOtherRows && renderersInOtherRows.length > 0 ) {
        for ( let i=0; i<renderersInOtherRows.length; i++) {
          const wrapper = renderersInOtherRows[i];
          if ( wrapper.getFrameworkComponentInstance() instanceof MyRenderer ) {
            const foundRenderer = wrapper.getFrameworkComponentInstance() as MyRenderer;
            if( foundRenderer.isEditing ) {
              foundRenderer.doCancel();
            }
          }
        }
      }

      this.isEditing = true;

      this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
    }

    doCancel() { 
      this.isEditing = false;
      // restore previous data or reload
    }
    doSave() { 
      this.isEditing = false;
      // do your saving logic
    }

}

Step 2: Load the component

@NgModule({
  imports:[
     AgGridModule.withComponents([MyRenderer]),
     // ...
  ],
  declarations: [MyRenderer],
})
export class MyModule();

Step 3: Use the component

SuppressClickEdit = true, will prevent double/single click edit mode

@Component({
   selector: 'my-grid',
   template: `
    <ag-grid-angular #grid
        style="width: 100%; height: 500px;" 
        class="ag-theme-balham"
        [rowData]="this.rowData"
        [columnDefs]="this.columnDefs"
        [editType]="'fullRow'"
        [suppressClickEdit]="true"></ag-grid-angular>
   `
})
export class MyGridComponent implements OnInit {
  columnDefs = [
     // ... other cols
     { headerName: '', cellRendererFramework: MyRenderer }
  ];
}

Unfortunately this solution doesn't work well because [suppressClickEdit]="true" doesn't stop the grid from taking the current row out of edit mode when the user clicks on a different row or sorts the grid. When this happens it bypasses both the save and cancel methods - neither persisting the data to the database nor restoring the previous data in that row that was being edited. Do you know of any way to fix this problem? — Aceofspades25, Dec 12 '18 at 07:12
@Aceofspades25 i am also running out of same issue. Did you find solution for the same ? — Jaffer Sathick, Apr 11 '19 at 03:10

score 1 · Answer 2 · answered Feb 08 '18 at 19:51

I was just looking for something similiar and so I thought I would share what I did to get this working. I am new to Angular so this may not be the best way.

This is in my component.html

<button (click)="onEdit()">edit button</button>
<button (click)="onSaveEdit()" *ngIf="!editClicked">save button</button>
<button (click)="onCancelEdit()" *ngIf="!editClicked">cancel</button>

This is in my component.ts

public params: any;

private editClicked;

  constructor() {
  this.editClicked = true;
  }

  agInit(params: any): void{
   this.params = params;
  }

onEdit() {
 this.editClicked = !this.editClicked;
 this.params.api.setFocusedCell(this.params.node.rowIndex, 'action');
 this.params.api.startEditingCell({
  rowIndex: this.params.node.rowIndex,
  colKey: 'action'
 });
}

onSaveEdit() {
 this.params.api.stopEditing();
 this.editClicked = !this.editClicked; 
}

onCancelEdit() {
 this.params.api.stopEditing(true);
 this.editClicked = !this.editClicked;
}

Hope this helps steer you in the right direction.

ag-grid in angular5 row inline edit

2 Answers2

Step 1: Create a custom renderer component

Step 2: Load the component

Step 3: Use the component