'Stop cellRenderer to apply on all the rows in angular
I am trying to make a custom component in ag-gird which consists of two radio button. I wanted to make selection for each individual row, so I have tried both cellRender and cellEditor, with cellEditor, the radio buttons are visible only after a click event is triggered.
And with cellRenderer it is applying changes to all the rows when a radio button is selected as shown in the images. I am looking for individual row edits.
Dots in coldefs are just mention the other columns,
Please check the below code aswell
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;
});
}
}
Code of the custom component
@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();
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|