Disable ag-grid when showing loading- or any overlay

Question

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?

Answer 1

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!