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

user_6121865 0
Viewed 13700

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.

ag-grid angular radio-button
4 Answers

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

user_44831020

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;
      }
    }
  }
}
user_106940130

You can always use the rowSelection property in your AppComponent.ts. just change your attribute from multiple to single. In this way the checkbox will behave like a radio button.

rowSelection: 'single',
user_103135000

First, we need to set some grid properties. If single row selection is needed (which is the normal behavior for a radio button) set rowSelection='single'. Also if you want to select the row only when clicking the checkbox add this property suppressRowClickSelection=true

Next, Ag grid needs to show a checkbox, that we will later turn into radio button. So this is needed inside the proper column definition: checkboxSelection: true

And then add the following CSS, to change the icon used for the checkbox to be a radio button icon:

.ag-checkbox-input-wrapper::after {
    content: '\f124'
}
    
.ag-checkbox-input-wrapper.ag-checked::after {
    content: '\f125';
}
user_18246700
Related