ag-grid: Disable cells based on content in other cells on the same row

Question

I'm looking for help about a feature I will implement using ag-grid. Here is a plunker.

I have a table with X items and 3 columns. In the the first column, I have some readonly text and in the second and third columns I have custom cellEditor (on click a dropdown menu is displayed).

Target: I want the cells in the third column to be disabled by default (on click, the dropdown is not displayed) and the dropdown is displayed (in a cell in the third column) only if the cell on the second column on the same row has value (an item is selected from the dropdown).

enter code here (must have code in order to put plunker links :/)

Example: On row one: column 1 has value (by default) and the user select an item from the dropdown on column 2. Then and only then he is able to select an item from the dropdown in the third column. The user is not able to select an item from the third column on other rows since their column two is empty.

Answer 1

You can handle editable mode dynamically

headerName: 'C',
field: 'c',
cellEditor: 'searchEditor',
editable: (params:IsColumnFuncParams)=>{ return params.data.b },
cellEditorParams: {
    values: this.c
}

Set to true if this col is editable, otherwise false. Can also be a function to have different rows editable.

editable?: boolean | IsColumnFunc;

ag-grid-community\src\ts\entities\colDef.ts

export interface IsColumnFuncParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi;
    columnApi: ColumnApi;
}

Answer 2

Just to expand on AlexRebula's excellent tip, here's what you can do, with editable:

header: 'username',
editable: (params:IsColumnFuncParams)=> { return this.canCellBeEdited(params) },
cellRenderer: 'searchEditor',

. . . 

    canCellBeEdited(params) {
        //  Don't let the user edit the "First Name" cell, if the current value is "mike".
        if (params.colDef.field == 'firstName' && params.data[params.colDef.field] == 'mike') {
            return false;
        }
        return true;
    }