How to change boolean data with checkbox in ag-grid?

Question

I am using a checkbox to display boolean data (the checkbox will be checked in the case of 'Y' and will not be checked in the case of 'N' or (null)). While the cell/data is displaying correctly in the grid, when I click on the checkbox, I would also like for the data in the cell to be changed - not just the checkbox (in other words, two way binding, but in ag grid with values that are not true/false - but rather, 'Y' and 'N', and have the check/uncheck change the very cell value(s) themselves).

I am currently using cellRenderer to display the checkbox based off of the data of the cell.

Here is the code in which I define my grid:

var columnDefs = [
    {headerName: 'name', field: 'a', editable: true, valueParser: numberValueParser},
    {headerName: 'read', field: 'b', editable: true, cellRenderer: checkboxCellRenderer},
    {headerName: 'write', field: 'c', editable: true, cellRenderer: checkboxCellRenderer},
    {headerName: 'delete', field: 'd', cellRenderer: checkboxCellRenderer},
    {headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},
];

function createRowData() {
    var rowData = [];

    for (var i = 0; i<20; i++) {
        rowData.push({
            a: Math.floor( ( (i + 323) * 25435) % 10000),
            b: Math.floor( ( (i + 323) * 23221) % 10000)<5000,
            c: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
            d: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
            e: Math.floor( ( (i + 323) * 468276) % 10000)<5000
        });
    }

    return rowData;
}

function numberValueParser(params) {
    return Number(params.newValue);
}

function formatNumber(number) {
    // this puts commas into the number eg 1000 goes to 1,000,
    // i pulled this from stack overflow, i have no idea how it works
    return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}

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

var gridOptions = {
    defaultColDef: {
        valueFormatter: function (params) {
            return formatNumber(params.value);
        },
        cellClass: 'align-right'
    },
    columnDefs: columnDefs,
    rowData: createRowData(),
    enableColResize: true
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
    gridOptions.api.sizeColumnsToFit();
});

Much like like this working plunker, https://plnkr.co/edit/cV5wFLY4nnyQgVIcnGrF?p=preview

Sure you can click on the checkbox and the check inside the box will go away, but that won't necessarily also change the value of the cell as well. In both these examples (both my code and the plunker I provided), you have to double click on the cell and manually change the value of the cell yourself - for the cell value to be changed. I would like for the checkbox to be able to change the cell-value.

Any help/suggestions would be much appreciated!

Answer 1

Plunker main.js checkboxCellRenderer function modify :

function checkboxCellRenderer (params){
if(params.value !== 'Y' && params.value !== 'N'){
  params.setValue(params.value === true || params.value === 'Y' ? 'Y' : 'N');
}else{
 var input = document.createElement("input");

input.type = "checkbox";
input.value = params.value === true || params.value === 'Y' ? 'Y' : 'N';
input.checked = params.value === true || params.value === 'Y' ? true : false;

input.onclick = function(){
  params.setValue(this.checked === true ? 'Y' : 'N');
}

return input;
}
}

Working plunker : https://plnkr.co/edit/qMXxp2axYbeLwssAuueZ?p=preview