Dynamic Column configuration in ag-grid

Question

I am trying to load table data dynamically in ag-grid. All column will be listed in sidebar(ToolPanel) check boxes and if user click on any unchecked box then a request will be sent to server and get data for that column and merge into the grid.

I am not sure this can be done with the ag-grid sideBar. I am thinking of capturing the click event in sideBar but can not found any relevant document.

Please let me know if there is any solution for this.

Paritosh Paritosh · Accepted Answer · 2020-02-20T05:55:14

If you are expecting any event from ag-grid, I think columnVisible might help you.

Have a look at this live example: https://plnkr.co/edit/KpFQp84rZvJgY2gjKRar?p=preview
Uncheck any column and then check.

<AgGridReact
   ...
   onColumnVisible={this.onColumnVisible}
/>

  onColumnVisible = params => {
    console.log(params);
    if (params.visible) {
      const colId = params.column.colId;
      alert(colId);
      // you could identify here, which column was checked
      // load data from server for that column
      // make sure you also retrieve ID and then associate the column data with appropriate row, i.e.
     this.yourHttpSvc.getColData(colId).subscribe(response => {
        // iterate through response & rowData appropriately
        this.stats.rowData[key][colId] = response[key][colId];
     })
    }
  }

Hope this helps!

Dynamic Column configuration in ag-grid

1 Answers