CODEWITHSUNDEEP
datagridag-gridag-grid-angular
Simone
Simone

Reputation: 163

How do I make my boolean column in ag-grid show checkboxes

I have a boolean column in my grid which is currently displaying 'true' or 'false' but I want it to show a checkbox instead.
How should I do this.
We are using ag-grid 25 with Angular and Adaptable.

Upvotes: 3

Views: 5230

Answers (2)

Jonny Wolfson
Jonny Wolfson

Reputation: 121

As you say that you are using AdapTable then you can just add the name of the column to the CheckBoxColumns list in PredefinedConfig / UserInterface

See: https://docs.adaptabletools.com/docs/predefined-config/user-interface-config#checkboxcolumns

So something like:

    export default {
        UserInterface: {
            CheckboxColumns: ['myBooleanColumn'],
        },
    } as PredefinedConfig;

That will dynamically create a CellRenderer very similar to the one which NearHuscarl suggests.

If the column is ReadOnly the checkboxes will be disabled.

Its worth noting that the CheckboxColumnClickedEvent will fire each time a cell in the column is clicked.

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81390

You can write your own cell renderer that renders a checkbox instead of a string. Below is an example:

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

@Component({
  selector: 'checkbox-renderer',
  template: `
    <input 
      type="checkbox" 
      (click)="checkedHandler($event)"
      [checked]="params.value"
    />
`,
})
export class CheckboxRenderer implements ICellRendererAngularComp, OnDestroy {
  private params: any;

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

  checkedHandler(event) {
      let checked = event.target.checked;
      let colId = this.params.column.colId;
      this.params.node.setDataValue(colId, checked);
  }
}

import { CheckboxRenderer } from "./checkbox-renderer.component";

this.frameworkComponents = {
  checkboxRenderer: CheckboxRenderer
};

Live Demo

Resource

Upvotes: 3

Related Questions