Angular Ag-grid cellRendererFramework - Modification in Component not reflected in grid rowData

Question

I have an editable grid in the app.component where one of the columns is a CellRendererFramework:

createColumnDefs() {
    return [
      { headerName: 'First Name', field: 'firstName', editable: true },
      { headerName: 'Last Name', field: 'lastName', editable: true },
      { headerName: 'Email', field: 'email', editable: true },
      { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent },
    ];
  }

The component is defined as follows:

import { Component, OnInit } from '@angular/core';
import { User, DataService } from './data.service';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-combo-box',
  templateUrl: './combo-box.component.html',
  styleUrls: ['./combo-box.component.css']
})
export class ComboBoxComponent implements OnInit, ICellRendererAngularComp {

  users: User[] = [];
  admins: any;

  constructor(private dataservice: DataService) {}

  ngOnInit() {
    this.users = this.dataservice.getAdminUsers();
  }

  refresh(params: any): boolean {
    return false;
  }

  public params: any;

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


  public getFollows(){
    return this.admins;
  }

  onChange(evt){
    this.admins = evt.value;
  }

}

The template 'combo-box.component.html' is a material select with multi select option enabled.

<mat-form-field>   <mat-select multiple [(value)]="admins" (selectionChange)="onChange($event)">
    <mat-option *ngFor="let user of users | async" [value]="user.firstName">{{user.firstName}}</mat-option>   </mat-select> </mat-form-field>

I should be able to change the data in the multi select and then on the clic of an external button, I should save the grid data. The problem I am facing is whenever I change the multi select option and then try to save, it always shows the multiselect's value that was bound initially.

So basically, any change in the ComboBoxComponent is not changing the rowData. Hence I am not able to save back the grid data after modification.

What am I missing?

I am using Ag-grid version: 17.1.0 Angular: 6.0.3

Paritosh Paritosh · Accepted Answer · 2018-06-30T19:07:37

The reason is, as your ComboBoxComponent implements ICellRendererAngularComp and as you have given colDef { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent }, it is a cell renderer, not cell editor. Its purpose is just to display the data.

If you want to make changes to rowData, you would have to create custom editor and provide it as cellEditorFramework.

Have a look at this example plunk: ag-grid angular custom editor component

As you can see, the field mood has custom renderer as well as custom editor to make the changes.

{
    headerName: "Mood",
    field: "mood",
    cellRendererFramework: MoodRendererComponent,
    cellEditorFramework: MoodEditorComponent,
    editable: true,
    width: 300
}

Also notice that MoodEditorComponent implements ICellEditorAngularComp.

For more reference, ag-grid Editor Components

Angular Ag-grid cellRendererFramework - Modification in Component not reflected in grid rowData

1 Answers