CODEWITHSUNDEEP
angularag-grid
Marin Takanov
Marin Takanov

Reputation: 1138

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

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.

Upvotes: 4

Views: 8893

Answers (2)

un.spike
un.spike

Reputation: 5133

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

Update: singleClickEdit

Set to true to enable Single Click Editing for cells, to start editing with a single click. See Single Click Editing. Default: false

Upvotes: 12

Mike Gledhill
Mike Gledhill

Reputation: 29213

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

Upvotes: 1

Related Questions