How to update defaultColDef in agGrid

Question

I am having a custom column filter with a button toggle.By default, the column filter is set to false. When I click on the button the column filter is toggled by setting the floatingFilter: true. While the floatingFilter becomes true during the button click it doesn't show the filter.

Whereas if we make the floatingFilter to be true by default at that time it shows the filter after that if we toggle the button to show/hide the floatingFilter it works expected.

May i know how to update the defaultColDef dynamically in ag-grid to make the floatingFilter to be true during button click.

defaultColDef:

this.defaultColumnDefs = {
      suppressMenu: true,
      suppressMovable: true,
      sortable: true,
      resizable: true,
      floatingFilter: this.hasFloatingFilter
    };

toggleFilter:

toggleFloatingFilter() {
    this.hasFloatingFilter = !this.hasFloatingFilter;
    this.clearSelectedRows();
    this.gridApi.setRowData(this.rowData);
    this.defaultColumnDefs = {...this.defaultColumnDefs, floatingFilter: this.hasFloatingFilter};
    if (!this.hasFloatingFilter) {
      this.gridApi.setFilterModel(null);
      this.loadData();
    }
    setTimeout(() => {
      this.gridApi.refreshHeader();
    }, 0);
  }

GridHTML:

<app-data-grid
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColumnDefs"
          [overlayNoRowsTemplate]="overlayNoRowsTemplate"
          [frameworkComponents]="frameworkComponents"
          [rowData]="rowData"
          [hasMultipleRows]="rowSelection"
          [hasRowAnimation]="hasRowAnimation"
          [multiSortKey]="multiSortKey"
          (rowDataChanged)="onRowDataChanged()"
          (selectionChanged)="onSelectionChanged()"
          (rowClicked)="gotoDetailView($event)"
          (sortChanged)="onSortChanged($event)"
          (columnResized)="onColumnResized()"
          (gridReady)="OnGridReady($event)"
        >
        </app-data-grid>

AppDataGrid Component:

export class DataGridComponent {
  gridApi;
  gridColumnApi;

  constructor() {}
  @Input() columnDefs: DeviceColumns;
  @Input() rowData: any[];
  @Input() overlayNoRowsTemplate: any;
  @Input() defaultColDef: any;
  @Input() hasMultipleRows: boolean;
  @Input() hasRowAnimation: boolean;
  @Input() hasFloatingFilter: boolean;
  @Input() frameworkComponents: any;
  @Input() multiSortKey: string;
  @Output() gridReady = new EventEmitter();
  @Output() selectionChanged = new EventEmitter();
  @Output() rowClicked = new EventEmitter();
  @Output() rowDataChanged = new EventEmitter();
  @Output() sortChanged = new EventEmitter();
  @Output() columnResized = new EventEmitter();

  onGridReady(params): void {
    this.gridApi = params.api;
    this.gridReady.emit(params);
    this.gridApi.setGridAutoHeight(true);
  }

  onSelectionChanged(): void {
    this.selectionChanged.emit(this.gridApi);
  }

  onRowClicked(params): void {
    this.rowClicked.emit(params.data);
  }

  onRowDataChanged(): void {
    this.rowDataChanged.emit();
  }

  onSortChanged(params): void {
    this.sortChanged.emit(params.api.getSortModel());
  }

  onColumnResized() {
    this.columnResized.emit(this.gridApi);
  }
}

Ag-Grid HTML

<ag-grid-angular
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [overlayNoRowsTemplate]="overlayNoRowsTemplate"
  [frameworkComponents]="frameworkComponents"
  (selectionChanged)="onSelectionChanged()"
  (rowDataChanged)="onRowDataChanged()"
  (rowClicked)="onRowClicked($event)"
  (sortChanged)="onSortChanged($event)"
  [suppressRowClickSelection]="true"
  [rowSelection]="hasMultipleRows"
  [animateRows]="hasRowAnimation"
  [multiSortKey]="multiSortKey"
  (columnResized)="onColumnResized()"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

Example: https://plnkr.co/edit/w2UDNd4u657tdr0Q?preview

Current behavior Not showing the floating filter during button click (When the flaotingFilter is false by default and it is changed to true dynmically)

Expected behavior It should show the floating filter when

ag-Grid version: 23.2.1

There are a couple of answers here and here. If all don't work, consider filing an issue on github and hope for the best. — NearHuscarl
@NearHuscarl i have looked into those issues and i have implemented some of them in my code.The problem is when we set the floating filter dynamically then at that time floating filter is not shown.You can check the plunker which i have added — Nidhin Kumar
I don't use angular but the code in vue works (the second answer I linked). Though there may be something else wrong with newer versions of agGrid. — NearHuscarl

sandeep joshi sandeep joshi · Accepted Answer · 2020-09-30T10:41:54

you need to do this with columnDefs instead of defaultColDef. plunkr link

showFilter() {  
    /*  
    this.defaultColDef = {...this.defaultColDef, floatingFilter: true};

    setTimeout(() => {
      this.gridApi.refreshHeader();
    }, 0);*/
     var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function (colDef, index) {
    colDef.floatingFilter = true;
  });
  this.gridApi.setColumnDefs(columnDefs);
  }

Also AG grid merges defaultColDefs with colDefs while rendering the grid and then uses colDefs object in setupFloatingFilter method thus setting value in defaultColDefs is of no use.

Calling gridApi.setColumnDefs calls HeaderContainer.prototype.init thus rendering your filter component whereas calling refreshHeader interanlly calls gridPanel.setHeaderAndFloatingHeights and headerRootComp.refreshHeader but there is no call to init function which will render your filter component.

How to update defaultColDef in agGrid

1 Answers