Disable ag-grid when showing loading- or any overlay

5
votes

When showing the loading overlay (or any other overlay) by using the api call

gridOptions.api.showLoadingOverlay()

in ag-grid, the rows and all grid-functions (buttons, context-menu, etc.) below the overlay are still selectable/usable.

Is there any way that I can prevent that from happening? Are there any plans to change this behaviour in a future release?

3
javascriptag-grid

3 Answers

5
votes

Add this CSS rule:

.ag-bl-overlay {
    pointer-events: auto;
}

For some reason the default CSS for this selector is:

.ag-bl-overlay {
    height: 100%;
    left: 0;

    pointer-events: none;

    position: absolute;
    top: 0;
    width: 100%;
}

With pointer-events being set to none which is the source of all of this grief and misery!

3
votes

I was facing the same issue and didn't find any solution to disable the grid. so I have set the rowData to empty array before loadingOverlay so that user doesn't have the option to modify the old data while new data is being load.

gridOptions.api.setRowData([]);
gridOptions.api.showLoadingOverlay();
0
votes

For serverside ag grid you can do the following

gridOptions.api.purgeServerSideCache([],0)
gridOptions.api.showLoadingOverlay();