ag-grid and angular, how to switch grid options dynamically

Question

I have two different grid configurations (represented as two gridOption objects). One is loading local data, where the other one is using an elasticsearch datasource with the infinite row model.

If I wire them in the template [gridOptions]="localOptions", [gridOptions]="elasticGridOptions" both work perfectly well.

This is my current component and (schematically) what I want to achieve:

@Component({
  selector: 'app-gridtest',
  styleUrls: ['./gridtest.component.css'],
  template: `
    <ag-grid-angular
      id="grid"
      style="width: 100vw;"
      [style.height] = 'height'
      class="ag-theme-balham ag-grid"
      [columnDefs]="columnDefs"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
    <button (click)="switchOptions()"></button>
  `
})
export class GridtestComponent implements OnInit{

  constructor(
    private esDs: ElasticDatasource
  ) {}

  height = '0px';
  gridApi: any;
  columnsApi: any;
  gridOptions: {};

  columnDefs = [
    {headerName: 'Id', field: 'id'},
    {headerName: 'Title', field: 'title'}
  ];

  elasticGridOptions = {
    rowModelType: 'infinite'
  };

  localOptions = {
    rowData: [
      {id: '1', title: 'foo'},
      {id: '2', title: 'bar'},
      {id: '3', title: 'baz'}
    ]
  };

  @HostListener('window:resize', ['$event'])
  resizeGrid(){
    this.height = `${$(window).innerHeight()-60}px`;
  }

  ngOnInit(): void {
    this.elasticGridOptions['datasource'] = this.esDs;
  }

  onGridReady(params){
    this.resizeGrid();
    this.gridApi = params.api;
    this.columnsApi = params.columnApi;
  }

  isElastic = false;
  switchOptions(){
    if(this.isElastic){
      this.gridOptions = this.localOptions;
      this.isElastic = false;
    }else{
      this.gridOptions = this.elasticGridOptions;
      this.isElastic = true;
    }

    //reinitialize / update options or grid??
  }

}

I wire [gridOptions] to a generic options object and then on a button click I try to switch between the two. The interesting thin is, even if I put this.gridOptions = this.localOptions; as a last line into onGridReady it also doesn't work. I have the feeling I need to somehow tell the grid to actually reload the options, or to reinitialize itself, but I couldn't find it in the documentation.

Cheers

Answer 1

Currently, gridOptions can't be reloaded dynamically. Check here:

Dynamically Setting Properties for ag-Grid

Repopulate ag-grid with data

You need to re-render your page. Anyway, you can handle requirement's on resolver part to prepare your options and then use it in component.

Ag-grid update 31

GridOptions Javascript - Mutating gridOptions after the grid has been created will no longer be picked up by the grid. Instead use api.setGridOption (property, newValue) to update grid options.

Since v31 its possible to update gridOptions via new API methods: setGridOption and updateGridOptions

Answer 2

I created pagination (let's say) mock. So basically it's a function that sets page-size property to predefined page size (100 for me), or to max rows size, so all rows will be visible.

This is closest I can get without bending grid API, or refreshing page/component

(You can also hide pagination controls if you wish to to have more UX feedback)

  /**
   * this is not real toggle nor ag-grid turning pagination dynamically on/off
   * because ag-grid does not support hot-reload of this grid option
   */
  paginationToggle() {
    this.pagination = !this.pagination;

    if(this.pagination){
      this.gridApi.paginationSetPageSize(Number(this.pageSize));
    }
    else{
      this.gridApi.paginationSetPageSize(Number(this.gridApi.paginationGetRowCount()));
    }
  }

Answer 3

Another solution is, to update the object itself (add or remove elements), without overriding it.

For example, in the case above, you can do the following:

setLocalOptions(){
  this.gridOptions.rowData = [
      {id: '1', title: 'foo'},
      {id: '2', title: 'bar'},
      {id: '3', title: 'baz'}
    ]
  //this.gridOptions...
  //If you need to remove unnecessary elements, then remove them here.
}

setElasticGridOptions(){
  //same as above
}

switchOptions(){
  if(this.isElastic){
    this.setLocalOptions();
    this.isElastic = false;
  }else{
    this.setElasticGridOptions();
    this.isElastic = true;
  }
}