In ag-grid, is it possible to stop row click(includes not to highlight row in blue color) to happen dynamically based on state or prop in reactJS?

Question

Scenario: When a user is trying to edit a row and in meanwhile if they select another row then a warning dialog should be shown stating that "If you proceed further, ongoing changes will be lost" with two buttons i.e. Go Back and OK. Here, we should allow selection only when user clicks on OK else the previous selection(edited row) should be honoured.

Question: I agree that it's an implementation issue but does ag-grid provides any flexible solution to stop the selection until user confirms.

Areas I explored: 1. I explored isRowSelectable feature, this mainly runs at initialization time and stops the selection itself. But in my scenario, I need to stop row selection based on some state/prop in reactJS(not based on the row data) 2. Also tried suppressing rowClickSelection in rowClicked and cellClicked events, it stops firing selectionChanged event but still I see the row is highlighted in blue color.

Can someone suggest the best solution to this problem?

Answer 1

[suppressRowClickSelection]=true stops the rows being selected.Set this and handle selection yourself. When a row selects set a different style for the background and then you can control when it is switched on or off (add a hidden column to your data to 'flag' the style).

If restricting the user to one row is of such inportance then make the grid non-editable and on cell focus open a dialog with your key data then when they have finished manually update the row. That row they could not leave without dealing with the dialog.

Other alternates can include not worrying about them moving but highlightinhg cells that are invalid if the user has started editing (but not satisfactorarily completed editing) and moved off.