title: AG-Grid (Enterprise) Column Menu Listener
body: <p>Is there a way to set a listener to column-menu, so that an event is fired when I open and close the menu?</p>
  
  <p>Feature description: <a href="https://www.ag-grid.com/javascript-grid-column-menu/" rel="nofollow noreferrer">https://www.ag-grid.com/javascript-grid-column-menu/</a></p>
  
  <p>I already searched in the official documentation, but didn't find an answer.</p>
  
  <p>Background is:
  I want to store the table state with displayed cols, sorting, position of cols, filter etc. in a database. Of course I could use the listeners like <code>onFilterChanged</code>, <code>onDisplayedColumnsChanged</code> or <code>onSortChanged</code>. 
  Problem is, that it will be fired every time when something changes and so there are produced a lot of unwanted api-calls.</p>
  
  <p>Thats why I want to perform <strong>one</strong> call when the column-menu is closed.</p>
  
  <hr>
  
  <blockquote>
    <h2>Update</h2>
    
    <p>As Viqas said in his <a href="https://stackoverflow.com/a/56750477/5142496">Answer</a>, there is no official way to do it. I
    tried to avoid the solution with <code>postProcessPopup</code> and tried to find a cleaner
    solution for my problem - to store the table state.</p>
    
    <p>For a workaround with a callback when ColumnMenu is closed <a href="https://stackoverflow.com/a/56750477/5142496">Viqas Answer</a> is more appropriate.</p>
    
    <p><strong>Notice that this is no workaround for the callback itself - it is just a (possible) solution to store the table state and perform ONE API Call</strong></p>
    
    <p>I used the <code>ngOnDestory()</code> function of Angular.</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>ngOnDestory(): void {
    const tableState = {
      columnState: this.gridOptions.columnApi.getColumnState(),
      columnGroupState: this.gridOptions.columnApi.getColumnGroupState(),
      sortState: this.gridOptions.api.getSortModel(),
      filterState: this.gridOptions.api.getFilterModel(),
      displayedColumns: this.gridOptions.columnApi.getAllDisplayedColumns()
    };
  
    // submit it to API
  }</code></pre>
  </div>
  </div>
  </p>