ag-grid cell level checkbox select

Question

I want to show all rows, all columns with checkbox as I want only true/false value. But I want to access single cell value i.e. each of the checkbox can be checked/unchecked. see image below.

As per my knowledge when I tick checkbox, all checkboxes of row get selected. So, can I check/uncheck single box?

Solution 1

I was trying to find out how it works today as well. What i could find out was, that the best way is to create a new Component and use cellRendererFramework instead of cellRenderer.

Here is a StackBlitz with an example:

Stackblitz example Checkbox in ag-grid

*Updated the Stackblitz example to show how to update the underlying model as well! Thank you for the hint!

Solution 2

      {
      headerName: 'Operator',
      checkboxSelection: false,
      headerCheckboxSelection: false,
      filter: false,
      sortable: false,
      field: 'operator',
      cellRenderer: function(params) {
        let operatorValue = params.value;
        const input = document.createElement('input');
        input.type = 'checkbox';
        if (operatorValue) {
            input.checked = true;
            params.data.operator = true;
        } else {
            input.checked = false;
            params.data.operator = false;
        }
        input.addEventListener('click', function (event) {
          input.checked != input.checked;
          params.data.operator  = input.checked;
        });
        return input;
    }
    }

Hope this will help for presentation as well as setting the value.

Solution 3

It sounds like you are using the checkboxSelection option in each column, this will definitely lead to the behavior you described. Instead you will want to use a cellRenderer like in this plunker.

relevant code:

function checkboxCellRenderer (params){
  var input = document.createElement("input")
  input.type = "checkbox";
  input.checked = params.value
  console.log(input)
  return input
}

simply refer to this function in the column with your data:

{headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},

Solution 4

You can use boolean (true or false)

I try this and it's work :

var columnDefs = [
  {
    headerName: 'Operator', 
    field: 'operator',
    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.operator = event.newValue; // Update value of field operator
        }
    },
    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);
    })
});

View more solutions

Comments

[ghetal]

yes.. I created cellRenderer finally. I am using angular2, so cannot use above code

[Kle]

how can you get the cells value?

[Chad Brockman]

I was very excited about this but -- it doesn't update the underlying model -- i.e. {cbox: true, remains true indefinitely.

[djnose]

Sry for my late reply. You can easily fix it by using the following code refresh(params: any): boolean { params.data.amount++; params.data.cbox = params.value; console.log(params.value); params.api.refreshCells(params); return false; }

[PRANSHU MIDHA]

Is there a way that in the above example, I can add a Checkbox in the Header to select the cells of that particular column only?

[Mike Gledhill]

Errr, yes. But when you're in edit mode (editing your second column containing text) and hit the Tab key, it completely skips the checkbox column. How do we get around that ?