Ag-grid: make cell editing enabled/disabled dynamically (based on another field)

Question

I am using ag-grid in Angular, using full row editing. I want to disable editing of one of the fields based on another field, but I want the field to be disabled/enabled as soon as the other field's value changes (not once editing stops).

I have recreated my scenario here with a simple example: if the ID value is more than 0, enable the Value field, else, disable the Value field.

<div style="width: 200px;">
    <ag-grid-angular #agGrid style="height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
    private gridOptions: GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          // enable filtering 
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "id",
                width: 100,
                editable: true
            },
            {
                headerName: "Value",
                field: "value",
                width: 100,
                editable: true
            },

        ];
        this.gridOptions.rowData = [
            {id: 5, value: 10},
            {id: 10, value: 15},
            {id: 15, value: 20}
        ]
        this.gridOptions.rowSelection='single';
        this.gridOptions.editType='fullRow';
    }
}

Here is a SlackBlitz of my issue.

How can I achieve this? I was going down the route of using a computed to get the value of ID every time it changes it always gets the value saved, not the value just entered. I've also tried many of the event hooks that ag-grid provides such as rowValueChanged and rowEditingStopped but they are only called once you stop editing, not when something changes.

Answer 1

This is a long time ago but maybe someone can still find this answer useful.

That said, the easy approach will be to define a variable of Boolean type.

@Component({
selector: 'app-my-grid-application',
templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
private gridOptions: GridOptions;
isEditable: boolean = false; //<== define the variable here


constructor() {
    this.gridOptions = <GridOptions>{
      enableSorting: true,
      // enable filtering 
      enableFilter: true
    };
    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100,
            editable: true,
            valueSetter: (params: any) => { // set the value here

              params.value > 0 ? this.isEditable = true : this.isEditable = false;

              // === do your actual valueSetter stuffs for this field here === //
            }
        },
        {
            headerName: "Value",
            field: "value",
            width: 100,
            editable: this.isEditable //<== pass the variable as value here
        },

    ];
    this.gridOptions.rowData = [
        {id: 5, value: 10},
        {id: 10, value: 15},
        {id: 15, value: 20}
    ]
    this.gridOptions.rowSelection='single';
    this.gridOptions.editType='fullRow';
}

}

Answer 2

You can handle it like that:

editable: (params)=>{return params.data["id"]>0}

but this case wouldn't perfectly work as you might expect (editable function will be executed only on edit-start event, while editing it wouldn't track your changes)

for fully handling your requirements you have to create custom cellEditors for validation in 'live-time' changes

you could check this post to get more info about validation