Editable and non-editable some ag-grid cells dynamically

Subhash Chandra picture Subhash Chandra · Aug 2, 2018 · Viewed 7.8k times · Source

I have to implement editable/non-editable of the corresponding cells in a particular row depending on datatype selection. When we select datatype="NUMERIC" then it should be editable particular that cell in a row only under Min and Max column instead of full column.

Example
```
    $scope.gridOptions.onCellValueChanged = function(event) {
        if (event.colDef.field === 'validation_type') {
            if (event.newValue.name === 'NUMERIC') {
                event.columnApi.getColumn('min_value').editable = true;
            }
        }
    }
```

Then it allow all cells of that column editable. But as per my requirement it should be editable only one particular cell. Please suggest. Screenshots: enter image description here

Answer

thirtydot picture thirtydot · Aug 3, 2018

The easiest place to do this is in your column definitions:

const columnDefs = [
    // ...
    {
        headerName: 'Data Type',
        field: 'validation_type',
    },
    {
        headerName: 'min',
        field: 'min_value',
        editable: function(params) {
            // allow `min_value` cell to be edited for rows with correct `validation_type`
            return params.node.data.validation_type === 'NUMERIC';
        },
    },
    {
        headerName: 'max',
        field: 'max_value',
        editable: function(params) {
            return params.node.data.validation_type === 'NUMERIC';
        },
    },
    // ...
];