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.

editable: ()=>false , so you can check previous cell and return condition here — ABOS, Dec 13 '18 at 15:23
@ABOS _I want the field to be disabled/enabled as soon as the other field's value changes (not once editing stops)_ — ViqMontana, Dec 13 '18 at 15:24
there are many event hooks on ag grid documentation page, have you tried? — ABOS, Dec 13 '18 at 15:31
I don't see any easy way to toggle the second cell with out of box options from ag grid. I tried grab input element from the id column and then add event listener to watch its value change. then query the row object and toggle the status of the second cell. Perhaps this can work, but a lot of work — ABOS, Dec 13 '18 at 16:05
@ABOS maybe a work around could be my best option. Could you illustrate this in a SlackBlitz? — ViqMontana, Dec 13 '18 at 16:07
here you are https://stackblitz.com/edit/angular-ag-grid-angular-picuvu, I have not put in any toggle logic since I am not familiar with it ...Good luck — ABOS, Dec 13 '18 at 16:12
an easy approach will be to create a variable of boolean type. — omostan, Jun 27 '22 at 16:53

score 2 · Answer 1 · answered Dec 13 '18 at 21:09

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

score 0 · Answer 2 · answered Jun 27 '22 at 17:49

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

}

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

2 Answers2