Binding Boolean Values to Checkboxes in ag-Grid

Binding boolean values to checkboxes in ag-Grid is easy. In this post we'll show you how you can bind boolean values to checkboxes in ag-Grid with React, Angular, Vue.js and vanilla JavaScript.

• Frameworks - React/Angular/Vue.js
  • React
  • Angular
  • Vue.js
• Vanilla JavaScript
• What's next?

Frameworks - React/Angular/Vue.js

Whenever you need extra flexibility in the presentation and behavior of ag-Grid cell content, you can use a cell renderer. You can learn more about cell renderers in our documentation.

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 examples of this in our documentation in Angular, React and Vue.js.

In this case, we'll create a native framework component displaying a bound checkbox.

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

Angular

Vue.js

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:

What's next?

I hope you find this article useful when binding boolean values to checkboxes in ag-Grid. Please check out our other blog posts and documentation for a great variety of scenarios you can implement with ag-Grid.

If you would like to try out ag-Grid check out our getting started guides (JS / React / Angular / Vue)

Happy coding!