agGrid programmatically configuration

Question

I just started implementing ag-grid in my application.

I want to configure it programatically, I want to put all agGrid configuration related code into a separate function in Helper.ts.

I want to use this function in all my application to configure agGrid so that I can manage the agGrid from a single place.

I am wrote below code for that, but looks like it is not working:

Helper Class Code:

   public ConfigureAgGrid(gridOptions: GridOptions): GridOptions {
         rowSelection: 'multiple',
         gridOptions.columnDefs = columnDefs;
         gridOptions.rowData = data;
         onSelectionChanged: this.onSelectionChanged,
        gridOptions.api.sizeColumnsToFit();

        return gridOptions;
    }

Component Code:

onGridReady(gridOptions: GridOptions) {
    this.helperService.ConfigureAgGrid(gridOptions);
}

Answer 1

From the ag-grid website Sometimes the gridReady grid event can fire before the Angular component is ready to receive it, so in an Angular environment its safer to rely on AfterViewInit instead before using the API.

Answer 2

you need gridOptions to initialize your grid, so onGridReady event will never fired. I suggest you this approach;

at onInit of your comoponent

ngOnInit() {
   this.gridOption = <GridOptions>this.helperService.ConfigureAgGrid(gridOptions);
}

Answer 3

I use abstract class for common setting

export abstract class AgGridDatasource {

  private _gridOptions: GridOptions = DEFAULT_GRID_OPTIONS;
  private _gridApi: GridApi;
  private _gridColumnApi: ColumnApi;

  protected constructor(gridOptions: GridOptions) {
    this._gridOptions = Object.assign({}, this._gridOptions, gridOptions);
  }

  refreshColumns(): void {
    if (this._gridApi) {
      this._gridApi.setColumnDefs(this.createColumns());
    }
  }

  abstract createColumns(): AbstractColDef[];

  onGridReady(event): void {
    this._gridApi = event.api;
    this._gridColumnApi = event.columnApi;
  }

  get gridOptions(): GridOptions {
    return this._gridOptions;
  }

  get gridApi(): GridApi {
    return this._gridApi;
  }

  get gridColumnApi(): ColumnApi {
    return this._gridColumnApi;
  }
}

Where DEFAULT_GRID_OPTIONS look

export const DEFAULT_GRID_OPTIONS: GridOptions =  {
  localeText: AgGridLocaleText,
  defaultColDef: AgGridDefaultColDef,
  rowData: null,
  suppressDragLeaveHidesColumns: true,
  suppressNoRowsOverlay: false,
  suppressLoadingOverlay: false,
  loadingOverlayComponent: 'customLoadingOverlayComponent',
  noRowsOverlayComponent: 'customNoRowsOverlayComponent'

}

And finally my infinity grid class with constructor where default grid options can be override

export abstract class AgGridInfinityDatasource<T> extends AgGridDatasource implements IDatasource {

  protected constructor(gridOptions: GridOptions,
    super(Object.assign({},
     {
      rowModelType: 'infinite',
      pagination: false,
      rowSelection: 'none',
      suppressCellSelection: true,
      cacheBlockSize: 100,
     }
     , gridOptions));


   (other code)