Angular ag-grid cell renderer checkbox not refresh value

Question

I created cell renderer for checkbox input but when I click checkbox it change the value inside but not on the cell.

See plunker example: Plunker

refresh method should be called on change but somehow it is not.

onCellClicked function returns still same value no matter how I click on checkbox.

I tried cellEditor: 'agRichSelect' with two possible values true and false which worked fine but I need checkbox.

Thaks for any ideas!

Answer 1

First, for tracking changes of ngModel you need to use (ngModelChange) instead of (onChange).

Second, you shouldn't use params.value for ngModel binding, params - is a part of grid, so just avoid mixing things and keep it separately.

Third, in refresh function inside cellRenderer you shouldn't update params, refresh function used internally for grid.

// Mandatory - Get the cell to refresh. Return true if the refresh succeeded, otherwise return false.
// If you return false, the grid will remove the component from the DOM and create
// a new component in its place with the new values.
refresh(params: any): boolean;

Fourth, if you want to update value inside cellRenderer you should use ICellEditorComp interface instead of ICellRendererComp(ICellRendererAngularComp and ICellEditorAngularComp on Angular case)

Fifth, you forgot to setup checkbox field editable: true in columnDefs

And the last one - you've just created checkbox (out of grid scope) which is looked like a working sample, but it's not.

You need to understand the full edit process if ag-grid, so just check here details about cell rendering, cell editing and much more.

And here you can see how exactly custom checkbox renderer will work :

function booleanCellRenderer(params) {
    var valueCleaned = booleanCleaner(params.value);
    if (valueCleaned === true) {
        return "<span title='true' class='ag-icon ag-icon-tick content-icon'></span>";
    } else if (valueCleaned === false) {
        return "<span title='false' class='ag-icon ag-icon-cross content-icon'></span>";
    } else if (params.value !== null && params.value !== undefined) {
        return params.value.toString();
    } else {
        return null;
    }
}