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

Answer 1

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.

Answer 2

To update defaultColDef in agGrid you can use setDefaultColDef method in gridApi passing there the brand new colDef. And do not forget to refresh all headers.

this.gridApi.api.setDefaultColDef({
        ...this.defaultColDef,
        floatingFilter: true
    });
    this.gridApi.api.refreshHeader();

Hope this will help