Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Editable and non-editable some ag-grid cells dynamically

Tags:

ag-grid

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

like image 943
Subhash Chandra Avatar asked Aug 02 '18 11:08

Subhash Chandra


People also ask

How do you make rows editable on ag-Grid?

To enable full row editing, set the grid option editType = 'fullRow' . If using custom cell editors, the cell editors will work in the exact same way with the following additions: focusIn : If your cell editor has a focusIn() method, it will get called when the user tabs into the cell.

How do I make rows disabled on ag-Grid?

There is no option in the library to make a single row disabled(both visually and keyboard event based), the only way we could make a single row disabled is by using a customCellRenderer for both header and subsequent cell checkboxes, this allows full control over the checkbox.

How do you get focused cells on ag-Grid?

var focusedCell = gridOptions. api. getFocusedCell();

How do you reinitialize ag-Grid?

There is a way you can achieve this. Have a flag for ngIf at the ag-grid-angular element level, and conditionally toggle it inside your event handler. This way, the grid will be reinitialised with the updated flag. Keep in mind that there is a performance cost involved here as the grid is being reinitialised.


1 Answers

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';
        },
    },
    // ...
];
like image 185
thirtydot Avatar answered Oct 05 '22 18:10

thirtydot