Ag-grid : hide column sidebar when clicked outside of side bar panel in angular

Question

Does anyone know how to hide ag-grid side bar when clicked outside of it? I am able to do it on button click but not able to find how to do collapse it when clicked outside of sidebar

Answer 1

You need to set it as false

this.gridApi.setSideBarVisible(false)  // hide
this.gridApi.setSideBarVisible(true)    // show

You can handle events using:-

https://www.ag-grid.com/react-data-grid/grid-events/#reference-selection

Check available grid events like onCellClicked, onCellFocused etc:-

https://www.ag-grid.com/react-data-grid/side-bar/#side-bar-api

Also:-

componentDidMount() {
  window.addEventListener('keydown', this.onKeyDown);
}

  onKeyDown = (e) => {      
      // check sidebar is visible
   
     if(this.gridApi.isSideBarVisible()){
    // code here
     }
  }