4

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

Tom
  • 3,807
  • 4
  • 33
  • 58

3 Answers3

2

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.

un.spike
  • 4,857
  • 2
  • 18
  • 38
0

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()));
    }
  }
Dominik Januvka
  • 39
  • 6
0

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;
  }
}
ben
  • 71
  • 1
  • 4