Remove focus from AG-Grid

Question

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?

Karyotin

Answer 1

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();
    }
})

Vereeniging

@iPhoneJavaDev, I suppose you are doing something wrong, cuz both samples work as expected. – Vereeniging

I'm using chrome and the blue border still shows for both examples – Rubidium

so, read the main question again and again, and if isn't clear after all, the solution is for CLICK-OUTSIDE the grid. (for you case click selection could be configured over ag-grid settings) – Vereeniging

@Vereeniging Hi, This is not working when i am using mat select component in ag grid. Example - plunker Please change dropdown value, value wont change because of this. I've used this code const body = document.body; body.addEventListener('mouseup', (e) => { const container = this.commonAgGrid.nativeElement; if (!container.contains(e.target)) { this.gridApi.clearFocusedCell(); } }); – Ease

@VishalMittal Please create a new question and post the link here cuz your question is a little bit different and would require different solution I suppose – Vereeniging

@Vereeniging here is new question – Ease

Answer 2

Add the following snippet to your css

.ag-cell-focus, .ag-cell {
    border: none !important;
}

Example - https://next.plnkr.co/edit/xO5N5u84U8n4HgK5

Lowbred

Answer 3

Apple below code to the global style.css file

    .ag-cell-focus {
        --ag-range-selection-border-color: transparent !important;
 }

Quatrefoil