CODEWITHSUNDEEP
javascriptangularreactjsag-grid
Ihor Lavs
Ihor Lavs

Reputation: 2463

Ag-grid opposite method to cellFocused

folks! Does anyone know the opposite method to cellFocused in ag-grid? I need to detect when the focused cell loses its focus and run some actions.

Thanks for your responses.

enter image description here

Upvotes: 1

Views: 5309

Answers (2)

horseshoe
horseshoe

Reputation: 1477

If one action you want to run is, that the cell looses it's focus you can use

stopEditingWhenCellsLoseFocus={true}

or another action could be

 onCellEditingStopped={onCellEditingStopped}

where

const onCellEditingStopped = useCallback(
    (params) => {
       ... DO SOMETHING 
    },
    []
);

Upvotes: 0

Ihor Lavs
Ihor Lavs

Reputation: 2463

I've found a way to support onBlur event. Since ag-grid doesn't have a built-in method, I created wy own event listener to the focus cell node and remove it after losing the focus state.

So, my code looks like this. Inside the react class I have 3 additional methods:

removeCellBlurListener = () => {
    const target = document.activeElement;
    if (target) {
        target.removeEventListener('blur', this.onCellBlur);
    }
};

addCellBlurListener = () => {
    const target = document.activeElement;
    if (target) {
        target.addEventListener('blur', this.onCellBlur);
    }
};

onCellBlur = () => {
    ...do something on blur
};

render () {
    return (
        <AgGridReact
              {...restProps}
              onCellFocused={(e) => this.addCellBlurListener()}
              onGridReady={this.onGridReady}
         />
    );
}

Upvotes: 4

Related Questions