Temporarily disable row selection in AG Grid (Angular)

Question

My grid looks as follows (community edition), allowing the user to select rows (checkbox defined on column definition)

    <ag-grid-angular 
        *ngIf='!isLoading && model.length > 0'
        style="height: 70vh;" class="ag-theme-balham"
        [rowData]="model" 
        [animateRows]="true" 
        [gridOptions]="gridOptions" 
        [rowSelection]='rowSelection'
        [enableCellTextSelection]="true" 
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        (cellDoubleClicked)="onCellDoubleClicked($event)"
        (selectionChanged)="onRecordSelected($event)" 
        (firstDataRendered)="onFirstDataRendered($event)"
        (gridReady)="onGridReady($event)">
      </ag-grid-angular>

One half of the page show the grid, the other part an edit for for the selected record.

While the form get saved, I'd like to disable selection in the grid. Is this possible? (maybe i'm being stupid, but could not figure out a way)

check the approved answer, hope this is what you are asking https://stackoverflow.com/questions/50862009/how-to-disable-selection-of-cells-in-ag-grid . — Nisheanthan, May 14 '20 at 17:53

jpf · Answer 1 · 2020-05-14T19:05:19.927

4

AG Grid documentation indicates that for a row click selection (like using a checkbox selection), you can set suppressRowClickSelection to true to disable selection.

You can hold a boolean value in a component property - eg. suppressRowClick and set suppressRowClickSelection in the template equal to suppressRowClick.

You can update suppressRowClick in the component via a method that suits your project:

@Input() from a parent component, or
Create a service to manage suppressRowClick and update from sibling component, or
Use a state management framework like NgRX or Akita (overkill unless already using)

edited May 14 '20 at 19:05

answered May 14 '20 at 18:52

jpf

165
10

I realize now that `suppressRowClickSelection` can be used binding it to a property I already have (isBusy). However this does not prevent the user from changing the selection using the checkboxes. – Nico May 15 '20 at 20:15
Also it is possible to click custom cellRendererFramework I got for one column (pretty much render a link). So seems nothing available to say "disable this entire grid". – Nico May 15 '20 at 20:17

score 0 · Answer 2 · answered Jun 10 '21 at 17:11

It seems like you want to disable the entire grid a way to disable the entire grid is by using the overlays, which you are using already so perhaps I am misunderstanding the question. if you don't want to see the loading box, in the html this line does that:

   <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();

This worked for me hope it can help others.

Temporarily disable row selection in AG Grid (Angular)

2 Answers2