I'm using AG Grid on a website. When the user clicks a cell, it is focused and gets a blue outline.
I need to remove this focus when the user clicks certain other elements on the site, but I don't know how to do it. Is there a method or property to set for that?
Add the following snippet to your css
.ag-cell-focus, .ag-cell {
border: none !important;
}
Angular2+ DEMO
ngAfterViewInit(){
let body = document.body;
body.addEventListener("mouseup", (e) => {
let container = this.agGrid._nativeElement;
if (!container.contains(e.target))
{
this.gridApi.clearFocusedCell();
}
})
}
JavaScript DEMO
var body = document.body;
body.addEventListener("mouseup", (e) => {
let gridDiv = document.querySelector('#myGrid')
if (!gridDiv.contains(e.target))
{
gridOptions.api.clearFocusedCell();
}
})
Apple below code to the global style.css file
.ag-cell-focus {
--ag-range-selection-border-color: transparent !important;
}