Dynamically Setting Properties for ag-Grid

Question

I am having an issue with dynamically changing properties for ag-Grid.

I have created a plunker to demonstrate the issue (see link below).

I created 4 buttons. Each button updates a single grid property (sideBar, enableFilter, enableSorting, and suppressMenuHide specifically).

Each button will call a function for their 'click' event to toggle their respective property to true or false.

The unexpected behavior I am seeing is that toggling the sideBar and enableFilter properties properly update the UI to show/hide sidebar and filtering respectively. However toggling enableSorting and suppressMenuHide do not update the UI.

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-enterprise";

@Component({
selector: "my-app",
template: `<button (click)="toggleSidebar()">toggle sidebar</button>
<button (click)="toggleFilter()">toggle filter</button>
<button (click)="toggleSorting()">toggle sorting</button>
<button (click)="toggleMenuHide()">toggle menu hiding</button>
<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  [rowData]="rowData"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [sideBar]="sideBar"
  [enableFilter]="enableFilter"
  [enableSorting]="enableSorting"
  [suppressMenuHide]="suppressMenuHide"
  (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private sideBar:boolean = false;
  private enableFilter:boolean = true;
  private enableSorting:boolean = true;
  private suppressMenuHide:boolean = false;

  toggleSidebar(){
    this.sideBar = !this.sideBar;
    console.log('sidebar set to', this.sideBar);
  }

  toggleFilter(){
    this.enableFilter = !this.enableFilter;
    console.log('filtering set to', this.enableFilter);
  }

  toggleSorting(){
    this.enableSorting = !this.enableSorting;
    console.log('sorting set to', this.enableSorting);
  }

  toggleMenuHide(){
    this.suppressMenuHide = !this.suppressMenuHide;
    console.log('menu hide set to', this.suppressMenuHide);
  }

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter"
      },
      {
        field: "age",
        width: 90
      },
      {
        field: "country",
        width: 120
      },
      {
        field: "year",
        width: 90
      },
      {
        field: "date",
        width: 110
      },
      {
        field: "gold",
        width: 100
      },
      {
        field: "silver",
        width: 100
      },
      {
        field: "bronze",
        width: 100
      },
      {
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      enableRowGroup: true,
      enablePivot: true
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

https://plnkr.co/edit/DyiMUslXbG1f9ppiIQEb?p=preview

Just a tought, make the attributes used in the template public instead of private. And can you tell us the version of Ag-Grid you're using ? — JFPicard
Possible duplicate of Repopulate ag-grid with data gridOptions doesn't support live changes. — un.spike
Even when using the pluker of the official example, changing EnableSorting seems to have no effect at runtime. — JFPicard

Pratik Bhat Pratik Bhat · Accepted Answer · 2018-10-17T05:36:37

I played around with your plunker and got it working when I added this line this.gridApi.refreshHeader(); to toggleMenuHide() and toggleSorting()
You need to do this if you dynamically update any property on the header.

From the docs -

refreshHeader() Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.

Dynamically Setting Properties for ag-Grid

1 Answers