Estoy tratando de hacer un componente personalizado en ag-gird que consta de dos botones de opción. Quería hacer una selección para cada fila individual, por lo que probé tanto cellRender como cellEditor, con cellEditor, los botones de radio son visibles solo después de que se activa un evento de clic.

Y con cellRenderer está aplicando cambios a todas las filas cuando se selecciona un botón de opción como se muestra en las imágenes. Estoy buscando ediciones de filas individuales.

Los puntos en coldefs solo mencionan las otras columnas,

Por favor, compruebe el siguiente código también

 template: ` <ag-grid-angular #agGrid style="width: 100%; height: 100%;" id="myGrid" class="ag-theme-alpine" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="rowData" [frameworkComponents]="frameworkComponents" (gridReady)="onGridReady($event)" ></ag-grid-angular> `, }) constructor(private http: HttpClient) { this.columnDefs = [ { field: 'athlete', cellRenderer: 'btnCellRenderer', minWidth: 150, }... }, ]; this.defaultColDef = { flex: 1, minWidth: 100, }; this.frameworkComponents = { btnCellRenderer: BtnCellRenderer } } onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; this.http .get( 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' ) .subscribe(data => { this.rowData = data; }); } }

Código del componente personalizado

 @Component({ selector: 'btn-cell-renderer', template: ` <input type="radio" [value]="1" [(ngModel)]="radioValue" (change)="stopEdit()">Val <input type="radio" [value]="2" [(ngModel)]="radioValue" (change)="stopEdit()">Not-Val `, }) export class BtnCellRenderer { private params: any; public radioValue: Number; agInit(params: any): void { this.params = params; this.radioValue = params.value; } stopEdit() { alert(`Value changed to: ${this.radioValue}`); this.params.api.stopEditing(); } }