How to use a checkbox for a boolean data with ag-grid

Question

I have searched for awhile now and haven't seen any real example of this.

I am using ag-grid-react and I would like for a column that holds a boolean to represent that boolean with a checkbox and update the object in the rowData when changed.

I know there is checkboxSelection and I tried using it like what I have below, but realized while it's a checkbox, it's not linked to the data and is merely for selecting a cell.

var columnDefs = [
    { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
]

So is there a way to do what I am looking for with ag-grid and ag-grid-react?

Finsen

Have you tried to use colId? – Mckinnie

Answer 1

You should use the cellRenderer property

const columnDefs = [{ headerName: 'Refunded', 
    field: 'refunded', 
    editable:true,
    cellRenderer: params => {
        return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
    }
}];

I was stuck in the same problem , this is the best I could come up with but I wasn't able to bind the value to this checkbox.

I set the cell property editable to true , now if you want to change the actual value you have to double click the cell and type true or false.

but this is as far as I went and I decided to help you , I know it doesn't 100% solve it all but at least it solved the data presentation part.

incase you found out how please share your answers with us.

Ornithology

Thanks and sorry for the late reply. You can see my answer. It's not exactly what I wanted, but it's good enough for what I needed it to do. – Finsen

This is great to represent check uncheck. How to bind the value to node data thats tricky – Glyoxaline

@samyak-jain solution below provides a full example of event handling – Knurly

Pls help #65018677 – Liven

bravoooooooooooooooooooooooooo!!! – Liar

Answer 2

We can use cellRenderer to show checkbox in grid, which will work when you want to edit the field also. Grid will not update the checkbox box value in the gridoption - rowdata directly till you do not update node with respective field in node object which can be access by params object.

params.node.data.fieldName = params.value;

here fieldName is field of the row.

{
    headerName: "display name",
    field: "fieldName",
    cellRenderer: function(params) { 
        var input = document.createElement('input');
        input.type="checkbox";
        input.checked=params.value;
        input.addEventListener('click', function (event) {
            params.value=!params.value;
            params.node.data.fieldName = params.value;
        });
        return input;
    }
}

Baalbeer

Thank you. You helped me a lot. – Isopropanol

awesomeeeeeeeeeeeeeeeeeeeee – Liar

I am getting Error: Objects are not valid as a React child (found: [object HTMLInputElement]). If you meant to render a collection of children, use an array instead. – Molybdate

Thanks a ton!!! This is awesome. Instead of params.value... I had to take (params.data.colName) and then I was able to get the exact value. But this is amazing. – Dorsoventral

Answer 3

What about this? It's on Angular and not on React, but you could get the point:

{ 
    headerName: 'Enabled', 
    field: 'enabled', 
    cellRendererFramework: CheckboxCellComponent
},

And here is the checkboxCellComponent:

@Component({
    selector: 'checkbox-cell',
    template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`,
    styleUrls: ['./checkbox-cell.component.css']
})
export class CheckboxCellComponent implements AfterViewInit, ICellRendererAngularComp {

    @ViewChild('.checkbox') checkbox: ElementRef;

    public params: ICellRendererParams;

    constructor() { }

    agInit(params: ICellRendererParams): void {
        this.params = params;
    }

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }
}

Let me know

Fighterbomber

Thanks enormously. Much pain trying to solve this problem in Angular. – Riggall

I changed the "onChange" handler to: this.params.setValue(event.currentTarget.checked); in order to trigger the gris api event – Semple

This works, but you also need to define a CellEditor, so when the users tab from cell to cell and get to a checkbox column, they can use the spacebar to toggle the value, then Tab to move to the next column. I'm struggling trying to create such a beast, and even agGrid's own example avoids tackling this issue: blog.ag-grid.com/… (Their own example also just shows "true" or "false" in edit mode... it's pretty rubbish.) – Marten

Answer 4

Here's how to create an agGrid cell renderer in Angular to bind one of your columns to a checkbox.

This answer is heavily based on the excellent answer from user2010955's answer above, but with a bit more explanation, and brought up-to-date with the latest versions of agGrid & Angular (I was receiving an error using his code, before adding the following changes).

And yes, I know this question was about the React version of agGrid, but I'm sure I won't be the only Angular developer who stumbles on this StackOverflow webpage out of desperation, trying to find an Angular solution to this problem.

(Btw, I can't believe it's 2020, and agGrid for Angular doesn't come with a checkbox renderer included by default. Seriously ?!!)

First, you need to define a renderer component:

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
    selector: 'checkbox-cell',
    template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`
})
export class CheckboxCellRenderer implements ICellRendererAngularComp {

    public params: ICellRendererParams; 

    constructor() { }

    agInit(params: ICellRendererParams): void {
        this.params = params;
    }

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }

    refresh(params: ICellRendererParams): boolean {
        return true;
    }
}

Next, you need to tell your @NgModule about it:

import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
. . .
@NgModule({
  declarations: [
    AppComponent,
    CheckboxCellRenderer
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([CheckboxCellRenderer])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In your Component which is displaying the agGrid, you need to import your renderer:

import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';

Let's define a new columns for our grid, some of which will use this new renderer:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    @ViewChild('exampleGrid', {static: false}) agGrid: AgGridAngular;

    columnDefs = [
        { headerName: 'Last name', field: 'lastName', editable: true },
        { headerName: 'First name', field: 'firstName',  editable: true },
        { headerName: 'Subscribed', field: 'subscribed', cellRenderer: 'checkboxCellRenderer' },
        { headerName: 'Is overweight', field: 'overweight', cellRenderer: 'checkboxCellRenderer' }
    ];
    frameworkComponents = {
      checkboxCellRenderer: CheckboxCellRenderer
    }
}

And now, when you're creating your agGrid, you need to tell it about the home-made framework components which you're using:

<ag-grid-angular #exampleGrid 
    style="height: 400px;" 
    class="ag-theme-material" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [frameworkComponents]="frameworkComponents" >
</ag-grid-angular>

Phew!

Yeah... it took me a while to work out how to make all the pieces fit together. agGrid's own website really should've included an example like this...

Marten

Awesome post. It's working as expected. Just followed all the coding bits for corresponding files. – Weighting

Flawless example for use with Angular. You saved me at least an hour of struggle. – Streamy

It's not quite flawless. If you don't set editable on the column to true then if the row is in edit mode when tabing through the editable columns this one is missed. If you do set it to editable so that's included then you have to set the cellEditor but if you start editing by clicking on this cell then the intial click is swallowed meaning that you have to double click on the cell to check it. I've been going round in circles trying to figure out how to solve this. – Faunus

Answer 5

The code below helps address the issue. The downside is that the normal events in gridOptions will not fired (onCellEditingStarted, onCellEditingStopped,onCellValueChanged etc).

var columnDefs = [...
           {headerName: "Label", field: "field",editable: true,
                cellRenderer: 'booleanCellRenderer',
                cellEditor:'booleanEditor'

            }
        ];
//register the components
$scope.gridOptions = {...
                components:{
                    booleanCellRenderer:BooleanCellRenderer,
                    booleanEditor:BooleanEditor
                }
            }; 

  function BooleanCellRenderer() {
  }

  BooleanCellRenderer.prototype.init = function (params) {
      this.eGui = document.createElement('span');
      if (params.value !== "" || params.value !== undefined || params.value !== null) {
          var checkedStatus = params.value ? "checked":"";
          var input = document.createElement('input');
          input.type="checkbox";
          input.checked=params.value;
          input.addEventListener('click', function (event) {
              params.value=!params.value;
              //checked input value has changed, perform your update here
              console.log("addEventListener params.value: "+ params.value);
          });
          this.eGui.innerHTML = '';
          this.eGui.appendChild( input );
      }
  };

  BooleanCellRenderer.prototype.getGui = function () {
      return this.eGui;
  };

  function BooleanEditor() {
  }

  BooleanEditor.prototype.init = function (params) {
      this.container = document.createElement('div');
      this.value=params.value;
      params.stopEditing();
  };
  BooleanEditor.prototype.getGui = function () {
      return this.container;
  };

  BooleanEditor.prototype.afterGuiAttached = function () {
  };

  BooleanEditor.prototype.getValue = function () {
      return this.value;
  };

  BooleanEditor.prototype.destroy = function () {
  };

  BooleanEditor.prototype.isPopup = function () {
      return true;
  };

Chellean

I m using your solution now @Will. I wonder that How can I get all data with booleaneditor data. I have to get all updated data while updating my grid – Jeffersonjeffery

@Jeffersonjeffery you should able to get what you want in the click event input.addEventListener('click', function (event) – Chellean

kindly refer below solution give by @Ornithology – Nympholepsy

To change the clicked column's value in the rowData in a generic way, you can use the following after the comment //checked input value has changed...: params.data[params.colDef.field] = params.value; – Ers

If you need the F2 or Enter to edit the cell as well, update the method BooleanEditor.prototype.init with params.node.setDataValue(params.column, !params.value);, params.stopEditing();, params.api.refreshCells(); – Oler

Answer 6

React specific solution

When using React (16.x) functional component with React Hooks make it easy to write your cellRenderer. Here is the function equivalent of what pnunezcalzado had posted earlier.

React component for the cell Renderer

function AgGridCheckbox (props) {
  const boolValue = props.value && props.value.toString() === 'true';
  const [isChecked, setIsChecked] = useState(boolValue);
  const onChanged = () => {
    props.setValue(!isChecked);
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={onChanged} />
    </div>
  );
}

Using it in your grid

Adjust your column def (ColDef) to use this cell renderer.

{
  headerName: 'My Boolean Field',
  field: 'BOOLFIELD',
  cellRendererFramework: AgGridCheckbox,
  editable: true,
},

Gossipy

Actually, you don't even need to use state since it's already contained the data object. All you need is: export const CheckBoxCellRenderer = (props: ICellRendererParams) => { const isChecked = props.value && props.value.toString() === "true"; return ( <div className={"text-center"}> <input type="checkbox" checked={isChecked} onChange={() => props.setValue(!isChecked)}/> – Athanor

Answer 7

Frameworks - React/Angular/Vue.js

You can easily integrate cell renderers with any JavaScript framework you're using to render ag-Grid, by creating your cell renderers as native framework components.

See this implemented in React in the code segment below:

export default class extends Component {
  constructor(props) {
    super(props);
    this.checkedHandler = this.checkedHandler.bind(this);
  }
  checkedHandler() {
    let checked = event.target.checked;
    let colId = this.props.column.colId;
    this.props.node.setDataValue(colId, checked);
  }
  render() {
    return (
      <input 
        type="checkbox" 
        onClick={this.checkedHandler}
        checked={this.props.value}
      />
    )
  }
}

Note: There are no required lifecycle methods when creating cell renderers as framework components.

After creating the renderer, we register it to ag-Grid in gridOptions.frameworkComponents and define it on the desired columns:

// ./index.jsx

 this.frameworkComponents = {
   checkboxRenderer: CheckboxCellRenderer,
 };

 this.state = {
      columnDefs: [
        // ...
        {
          headerName: 'Registered - Checkbox',
          field: 'registered',
          cellRenderer: 'checkboxRenderer',
        },
        // ...
      ]
      // ....

Please see below live samples implemented in the most popular JavaScript frameworks (React, Angular, Vue.js):

React demo.

Angular demo.
Note: When using Angular it is also necessary to pass custom renderers to the @NgModule decorator to allow for dependency injection.

Vue.js demo.

Vanilla JavaScript

You can also implement the checkbox renderer using JavaScript.

In this case, the checkbox renderer is constructed using a JavaScript Class. An input element is created in the ag-Grid init lifecycle method (required) and it's checked attribute is set to the underlying boolean value of the cell it will be rendered in. A click event listener is added to the checkbox which updates this underlying cell value whenever the input is checked/unchecked.

The created DOM element is returned in the getGui (required) lifecycle hook. We have also done some cleanup in the destroy optional lifecycle hook, where we remove the click listener.

function CheckboxRenderer() {}

CheckboxRenderer.prototype.init = function(params) {
  this.params = params;

  this.eGui = document.createElement('input');
  this.eGui.type = 'checkbox';
  this.eGui.checked = params.value;

  this.checkedHandler = this.checkedHandler.bind(this);
  this.eGui.addEventListener('click', this.checkedHandler);
}

CheckboxRenderer.prototype.checkedHandler = function(e) {
  let checked = e.target.checked;
  let colId = this.params.column.colId;
  this.params.node.setDataValue(colId, checked);
}

CheckboxRenderer.prototype.getGui = function(params) {
  return this.eGui;
}

CheckboxRenderer.prototype.destroy = function(params) {
  this.eGui.removeEventListener('click', this.checkedHandler);
}

After creating our renderer we simply register it to ag-Grid in our gridOptions.components object:

gridOptions.components = {
  checkboxRenderer: CheckboxRenderer
}

And define the renderer on the desired column:

gridOptions.columnDefs = [
  // ...
  { 
    headerName: 'Registered - Checkbox',
    field: 'registered',
    cellRenderer: 'checkboxRenderer',
  },
  // ...

Please see this implemented in the demo below:

Vanilla JavaScript.

Read the full blog post on our website or check out our documentation for a great variety of scenarios you can implement with ag-Grid.

Ahmed Gadir | Developer @ ag-Grid

Duntson

This works for me (Vanilla JS version), thanks! – Bucher

I'd be curious to see how you recommend triggering the "onCellEditingStopped" event for the Vanilla implementation? – Lune

Answer 8

Here is a react hooks version, set columnDef.cellEditorFramework to this component.

import React, {useEffect, forwardRef, useImperativeHandle, useRef, useState} from "react";

export default forwardRef((props, ref) => {
    const [value, setValue] = useState();

    if (value !== ! props.value) {
        setValue(!props.value);
    }

    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return value;
            }
        };
    });

    const onChange= e => {
        setValue(!value);
    }

    return (<div  style={{paddingLeft: "15px"}}><input type="checkbox" ref={inputRef} defaultChecked={value} onChange={onChange}  /></div>);
})

I also have the following cell renderer which is nice

       cellRenderer: params => {
            return `<i class="fa fa-${params.value?"check-":""}square-o" aria-hidden="true"></i>`;
        },

Saidel

You cannot mutate the state so doing setValue(!value) is not correct, you should do setValue((prev)=>!prev). I'll edit your answer to fix that – Omar

Answer 9

The array of the string values doesn't work for me, but array of [true,false] is working.

{
    headerName: 'Refunded',
    field: 'refunded',
    cellEditor: 'popupSelect',
    cellEditorParams: {
        cellRenderer: RefundedCellRenderer,
        values: [true, false]
    }
},

function RefundedCellRenderer(params) {
    return params.value;
}

Colly

Answer 10

In the columnDefs, add a checkbox column. Don't need set the cell property editable to true

columnDefs: [ { headerName: '', field: 'checkbox', cellRendererFramework: CheckboxRenderer, width:30}, ...]

The CheckboxRenderer

export class CheckboxRenderer extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            value:props.value
        };
        this.handleCheckboxChange=this.handleCheckboxChange.bind(this);
    }

    handleCheckboxChange(event) {
        this.props.data.checkbox=!this.props.data.checkbox;
        this.setState({value: this.props.data.checkbox});
    }

    render() {
        return (    
        <Checkbox
            checked={this.state.value}
            onChange={this.handleCheckboxChange}></Checkbox>);
    }
}

Bannock

Answer 11

import React, { Component } from 'react';

export class CheckboxRenderer extends Component {
  constructor(props) {
    super(props);
    if (this.props.colDef.field === 'noRestrictions') {
      this.state = {
        value: true,
        disable: false
      };
    }
    else if (this.props.colDef.field === 'doNotBuy') {
      this.state = {
        value: false,
        disable: true
      };
    }
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);

  }

  handleCheckboxChange(event) {
    //this.props.data.checkbox=!this.props.data.checkbox; ={this.state.show}
    //this.setState({value: this.props.data.checkbox});
    if (this.state.value) { this.setState({ value: false }); }
    else { this.setState({ value: true }); }
    alert(this.state.value);
    //check for the last row and check for the columnname and enable the other columns
  }

  render() {
    return (
      <input type= 'checkbox' checked = { this.state.value } disabled = { this.state.disable } onChange = { this.handleCheckboxChange } />
    );
  }
}


export default CheckboxRenderer;

import React, { Component } from 'react';
import './App.css';

import { AgGridReact } from 'ag-grid-react';
import CheckboxRenderer from './CheckboxRenderer';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';

class App extends Component {
  constructor(props) {
    super(props);
    let enableOtherFields = false;
    this.state = {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        {
          headerName: 'noRestrictions', field: 'noRestrictions',
          cellRendererFramework: CheckboxRenderer,
          cellRendererParams: { checkedVal: true, disable: false },
          onCellClicked: function (event) {
            // event.node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal=!event.node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal;
            // event.node.data.checkbox=!event.data.checkbox;   
            let currentNode = event.node.id;
            event.api.forEachNode((node) => {

              if (node.id === currentNode) {
                node.data.checkbox = !node.data.checkbox;
              }
              //if(!node.columnApi.columnController.gridColumns[1].colDef.cellRendererParams.checkedVal){ // checkbox is unchecked
              if (node.data.checkbox === false && node.data.checkbox !== 'undefined') {
                enableOtherFields = true;
              } else {
                enableOtherFields = false;
              }
              //alert(node.id);
              //alert(event.colDef.cellRendererParams.checkedVal);
            }); alert("enable other fields:" + enableOtherFields);
          }
        },
        {
          headerName: 'doNotBuy', field: 'doNotBuy',
          cellRendererFramework: CheckboxRenderer,
          cellRendererParams: { checkedVal: false, disable: true }
        },
        { headerName: 'Price', field: 'price', editable: true }
      ],
      rowData: [
        { make: "Toyota", noRestrictions: true, doNotBuy: false, price: 35000 },
        { make: "Ford", noRestrictions: true, doNotBuy: false, price: 32000 },
        { make: "Porsche", noRestrictions: true, doNotBuy: false, price: 72000 }
      ]
    };
  }


componentDidMount() {
  }

  render() {
    return (
      <div className= "ag-theme-balham" style = {{ height: '200px', width: '800px' }}>
          <AgGridReact enableSorting={ true }
                        enableFilter = { true}
                        //pagination={true}
                        columnDefs = { this.state.columnDefs }
                        rowData = { this.state.rowData } >
          </AgGridReact>
      </div>
    );
  }
}

export default App;

Dolli

Answer 12

You can use boolean (true or false)

I try this and it's work :

var columnDefs = [
  {
    headerName: 'Refunded', 
    field: 'refunded',
    editable: true,
    cellEditor: 'booleanEditor',
    cellRenderer: booleanCellRenderer
  },
];

Function checkbox editor

function getBooleanEditor() {
    // function to act as a class
    function BooleanEditor() {}

    // gets called once before the renderer is used
    BooleanEditor.prototype.init = function(params) {
        // create the cell
        var value = params.value;

        this.eInput = document.createElement('input');
        this.eInput.type = 'checkbox'; 
        this.eInput.checked = value;
        this.eInput.value = value;
    };

    // gets called once when grid ready to insert the element
    BooleanEditor.prototype.getGui = function() {
        return this.eInput;
    };

    // focus and select can be done after the gui is attached
    BooleanEditor.prototype.afterGuiAttached = function() {
        this.eInput.focus();
        this.eInput.select();
    };

    // returns the new value after editing
    BooleanEditor.prototype.getValue = function() {
        return this.eInput.checked;
    };

    // any cleanup we need to be done here
    BooleanEditor.prototype.destroy = function() {
        // but this example is simple, no cleanup, we could
        // even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup
    BooleanEditor.prototype.isPopup = function() {
        // and we could leave this method out also, false is the default
        return false;
    };

    return BooleanEditor;
}

And then booleanCellRenderer function

function booleanCellRenderer(params) {
    var value = params.value ? 'checked' : 'unchecked';

    return '<input disabled type="checkbox" '+ value +'/>';
}

Let the grid know which columns and what data to use

var gridOptions = {
    columnDefs: columnDefs,
    pagination: true,
    defaultColDef: {
        filter: true,
        resizable: true,
    },
    onGridReady: function(params) {
        params.api.sizeColumnsToFit();
    },
    onCellValueChanged: function(event) {
        if (event.newValue != event.oldValue) { 
            // do stuff
            // such hit your API update
            event.data.refunded = event.newValue; // Update value of field refunded
        }
    },
    components:{
        booleanCellRenderer: booleanCellRenderer,
        booleanEditor: getBooleanEditor()
    }
};

Setup the grid after the page has finished loading

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(gridDiv, gridOptions);

    fetch('$urlGetData').then(function(response) {
        return response.json();
    }).then(function(data) {
        gridOptions.api.setRowData(data);
    })
});

Shoulders

Answer 13

I found a good online example for this feature:

https://stackblitz.com/edit/ag-grid-checkbox?embed=1&file=app/ag-grid-checkbox/ag-grid-checkbox.component.html

The background knowledge is based on the cellRendererFramework : https://www.ag-grid.com/javascript-grid-components/

Buggery

Answer 14

Even though it's an old question, I developed a solution that may be interesting.

You can create a cell renderer component for the checkbox then apply it to the columns that must render a checkbox based on a boolean value.

Check the example below:

/*
  CheckboxCellRenderer.js
  Author: Bruno Carvalho da Costa (brunoccst)
*/

/*
 * Function to work as a constructor.
 */
function CheckboxCellRenderer() {}

/**
 * Initializes the cell renderer.
 * @param {any} params Parameters from AG Grid.
 */
CheckboxCellRenderer.prototype.init = function(params) {
  // Create the cell.
  this.eGui = document.createElement('span');
  this.eGui.classList.add("ag-icon");

  var node = params.node;
  var colId = params.column.colId;
  
  // Set the "editable" property to false so it won't open the default cell editor from AG Grid.
  if (params.colDef.editableAux == undefined)
      params.colDef.editableAux = params.colDef.editable;
  params.colDef.editable = false;

  // Configure it accordingly if it is editable.
  if (params.colDef.editableAux) {
    // Set the type of cursor.
    this.eGui.style["cursor"] = "pointer";

    // Add the event listener to the checkbox.
    function toggle() {
      var currentValue = node.data[colId];
      node.setDataValue(colId, !currentValue);

      // TODO: Delete this log.
      console.log(node.data);
    }
    this.eGui.addEventListener("click", toggle);
  }

  // Set if the checkbox is checked.
  this.refresh(params);
};

/**
 * Returns the GUI.
 */
CheckboxCellRenderer.prototype.getGui = function() {
  return this.eGui;
};

/**
 * Refreshes the element according to the current data.
 * @param {any} params Parameters from AG Grid.
 */
CheckboxCellRenderer.prototype.refresh = function(params) {
  var checkedClass = "ag-icon-checkbox-checked";
  var uncheckedClass = "ag-icon-checkbox-unchecked";

  // Add or remove the classes according to the value.
  if (params.value) {
    this.eGui.classList.remove(uncheckedClass);
    this.eGui.classList.add(checkedClass);
  } else {
    this.eGui.classList.remove(checkedClass);
    this.eGui.classList.add(uncheckedClass);
  }

  // Return true to tell the grid we refreshed successfully
  return true;
}

/*
  The code below does not belong to the CheckboxCellRenderer.js anymore.
  It is the main JS that creates the AG Grid instance and structure.
*/

// specify the columns
var columnDefs = [{
  headerName: "Make",
  field: "make"
}, {
  headerName: "Model",
  field: "model"
}, {
  headerName: "Price",
  field: "price"
}, {
  headerName: "In wishlist (editable)",
  field: "InWishlist",
  cellRenderer: CheckboxCellRenderer
}, {
  headerName: "In wishlist (not editable)",
  field: "InWishlist",
  cellRenderer: CheckboxCellRenderer,
  editable: false
}];

// specify the data
var rowData = [{
  make: "Toyota",
  model: "Celica",
  price: 35000,
  InWishlist: true
}, {
  make: "Toyota 2",
  model: "Celica 2",
  price: 36000,
  InWishlist: false
}];

// let the grid know which columns and what data to use
var gridOptions = {
  columnDefs: columnDefs,
  defaultColDef: {
    editable: true
  },
  rowData: rowData,
  onGridReady: function() {
    gridOptions.api.sizeColumnsToFit();
  }
};

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {
  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
</head>

<body>
  <div id="myGrid" style="height: 115px;" class="ag-fresh"></div>
</body>

</html>

Please note that I needed to disable the editable property before ending the init function or else AG Grid would render the default cell editor for the field, having a weird behavior.

Lynnette

Answer 15

You can keep a checkbox on display and edit as following:

headerName: 'header name',
field: 'field',
filter: 'agTextColumnFilter',
cellRenderer: params => this.checkBoxCellEditRenderer(params),

And then create an renderer:

checkBoxCellEditRenderer(params) {
   const input = document.createElement('input');
   input.type = 'checkbox';
   input.checked = params.value;
   input.addEventListener('click', () => {
      params.value = !params.value;
      params.node.data[params.coldDef.field] = params.value;
      // you can add here code

    });
      return input;
}

Bouley

Answer 16

With recent version of Ag-Grid, there is an out-of-the-box 'boolean' cell data type, so you can write a column defs like this:

  public columnDefs: ColDef[] = [
    { field: 'athlete' },
    { field: 'age', minWidth: 100 },

    // this will be display as a checkbox (editable or not, etc.)
    { field: 'hasGold', headerName: 'Gold', cellDataType:'boolean' },

    { field: 'dateObject', headerName: 'Date' },
    { field: 'date', headerName: 'Date (String)' },
    { field: 'countryObject', headerName: 'Country' },
  ];

cellDataType : 'boolean' will force the type to be handled with checkbox if inference doesn't work for you (for example if you omit json boolean values when they are set to false)

Hammerhead

Answer 17

Boolean data in present part:

    function booleanCellRenderer(params) { 
        var valueCleaned = params.value;
        if (valueCleaned === 'T') {
            return '<input type="checkbox" checked/>';
        } else if (valueCleaned === 'F') {
            return '<input type="checkbox" unchecked/>';
        } else if (params.value !== null && params.value !== undefined) {
            return params.value.toString();
        } else {
            return null;
        }
    }

    var gridOptions = { 
        ...
        components: {
            booleanCellRenderer: booleanCellRenderer,
        }
    };

    gridOptions.api.setColumnDefs(
      colDefs.concat(JSON.parse('[{"headerName":"Name","field":"Field", 
        "cellRenderer": "booleanCellRenderer"}]')));

Jelene

Answer 18

Here's a solution that worked for me. It's mandatory to respect arrow functions to solve context issues.

Component:

import React from "react";

class AgGridCheckbox extends React.Component {

  state = {isChecked: false};

  componentDidMount() {
    let boolValue = this.props.value.toString() === "true";
    this.setState({isChecked: boolValue});
  }

  onChanged = () => {
    const checked = !this.state.isChecked;
    this.setState({isChecked: checked});
    this.props.setValue(checked);
  };

  render() {
    return (
      <div>
        <input type={"checkbox"} checked={this.state.isChecked} onChange={this.onChanged}/>
      </div>
    );
  }
}

export default AgGridCheckbox;

Column definition object inside columnDefs array:

{
  headerName: "yourHeaderName",
  field: "yourPropertyNameInsideDataObject",
  cellRendererFramework: AgGridCheckbox
}

JSX calling ag-grid:

<div
    className="ag-theme-balham"
  >
    <AgGridReact
      defaultColDef={defaultColDefs}
      columnDefs={columnDefs}
      rowData={data}
    />
</div>

Crape

Answer 19

gridOptions = {
  onSelectionChanged: (event: any) => {
    let rowData = [];
    event.api.getSelectedNodes().forEach(node => {
      rowDate = [...rowData, node.data];
    });
    console.log(rowData);
  }
}

Amoebaean

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Absolutism

Answer 20

This is an old question but there is a new answer available if you are using AdapTable in conjunction with AG Grid. Simply define the column as a Checkbox Column and AdapTable will do it all for you - create the checkbox, check it if the cell value is true, and fire an event each time it is checked: See: https://demo.adaptabletools.com/formatcolumn/aggridcheckboxcolumndemo

Kwangju

Answer 21

So in the end I somewhat got what I wanted, but in a slightly different way, I used popupSelect and cellEditorParams with values: ['true', 'false']. Of course I don't have an actual check box like I wanted, but it behaves good enough for what I need

{
    headerName: 'Refunded', 
    field: 'refunded',
    cellEditor: 'popupSelect',
    cellEditorParams: {
        cellRenderer: RefundedCellRenderer,
        values: ['true', 'false']
    }
},

function RefundedCellRenderer(params) {
    return params.value;
}

Finsen