How to show and use radio button on ag-grid?

Question

I am learning ag-grid and tried following code to show checkbox in my application.

In app.component.html:

<ag-grid-angular
  style:"width: 500px; height: 500px;"
  class: "ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  rowSelection="multiple"
  [gridOptions]="gridOptions"
  [gridReady]="onGridReady($event)">
</ag-grid-angular>

In AppComponent.ts:

export class AppComponent implements OnInit {
  @ViewChild('agGrid')
  agGrid: AgGridNg2;
  private gridApi;
  private gridColumnApi;
  gridOptions: GridOptions;

  columnDefs = [
    {headerName: 'Make', field: 'make', checkboxSelection: true}, 
    {headerName: 'Model', field: 'model'}
    {headerName: 'Price', field: 'price'}, 
  ];
  rowData: [
    {make: 'Toyota', model: 'Celica', price: 35000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
    {make: 'Porsche', model: 'Boxter', price: 72000}
  ];

  onGridReady() {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
}

I wanted to show radio button instead of checkbox.

Answer 1

For handing visual part, you need to create custom cellRenderer

For handling edit stuff, you should create custom cellEditor

So, for custom components, you need to create .html file for visual things and .ts for logic handling.

simple .html for radio buttons:

<div class="radio-container">
    <input type="radio" [value]="1" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="2" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="3" [(ngModel)]="radioValue" (change)="stopEdit()">
</div>

and on .ts you must handle ICellEditorComp functions:

1. agInit - for initialization and binding existing value to your model
2. isPopup - would it be a popup window or inside the cell
3. getValue - this function will return the value after stopEditing api-function execution

simple .ts

private params: any;
public radioValue: number;

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

getValue(): any {
    return this.radioValue;
}

isPopup(): boolean {
    return true;
}

stopEdit() {
  alert(`Value changed to: ${this.radioValue}`);
  this.params.api.stopEditing();
}

Don't forget, that custom components should be included to frameworkComponents inside gridOptions or as [frameworkComponents] html ag-grid property.

Worked plnkr sample

Update: row-selection via radio-button inside cellRenderer

NOT SELECTED
<input type="radio" [(checked)]="!params.node.selected"  (change)="handleChange()">
SELECTED
<input type="radio" [(checked)]="params.node.selected" (change)="handleChange()">
{{params.value}}

handleChange() {
  this.params.node.setSelected(!this.params.node.selected)
}

Also - keep in mind that in this case, we don't need to use editor, logic could be handled via renderer only

Worked plnkr sample

Answer 2

Step 1: In columnDefs: {checkboxSelection: false} // Add this to your object

Step 2: Add this to the same object where you added checkboxSelection

cellRenderer: function cellTitle(params) {
  let cellValue = '<div class="ngSelectionCell"><input name="selected" type="radio"></div>';
  return cellValue;
},

Step 3: Add this code to your local css file:

.ag-body {
  .ag-row {
    .ag-cell {
      input[type=checkbox]:checked:after, 
      input[type=radio]:checked:after {
        display: none;
       }
      input[type=checkbox]:after, input[type=radio]:after {
        display: none;
      }
    }
  }
}