Search code examples
javascriptangularreactjsag-grid

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


Solution

  • 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}
             />
        );
    }