How disabled whole grid regardless of colDef editable value in ag-Grid?

Question

Hi I want to make ag grid disabled. Of course, I know I can make it disabled by setting false on editable of every colDef.

But I want to do it by another way to separate grid status with editable and no editable mode. And If the grid is on no editable mode, every column should not be editable even if it is defined editable on it's colDef.

I know I can change every editable value of column def when the grid is no editable mode. But I want to believe there is another general way to accomplish it. But I couldn't find it.

Do you have any idea?

Thanks.

Answer 1

I understand your concern. It depends when you set your grid status as No Editable Mode. So Lets just say if I have data for grid and in that data you can add one more column as rowIsNotEditable name can be vary. So that means which row you want as editable its in your hands now and on the basis of row, every column in the row will be editable/non editable according to its value. For this to be work- you have to set your column editable definition like this as callback function

editable: (params) => {
        if(params.data.rowIsNotEditable)
          return false;
        else
          return true;
      }

Here is complete working example

Answer 2

I know I am coming late to the party but a way to disable the entire grid is by using the overlay is in the html add this line:

   <ag-grid-angular
        #agGrid
        [overlayLoadingTemplate]="overlayLoadingTemplate"
...
 
    </ag-grid-angular>

In the component set the

 overlayLoadingTemplate =
    '<span></span>';

Then in the component use this function to set the overlay when you want it to be disabled:

this.gridApi.showLoadingOverlay();

Not sure from your question if you were trying to disable the whole grid but this worked like a charm for me hope it can help others.