ag-grid cell level checkbox select

问题

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?

回答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!

回答2:

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},

回答3:

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);
    })
});

回答4:

fwiw -- they finally published a working example:

https://www.ag-grid.com/example-angular-material-design/

if you change the material checkbox to a regular input checkbox, it works as expected.

来源：https://stackoverflow.com/questions/48383952/ag-grid-cell-level-checkbox-select

标签

select

checkbox

ag-grid