Angular: Best way to set a default sort on a dynamic column in agGrid

Question

I'm working on an agGrid, where we don't explicitly define the columns. I can't for the life of me figure out how to set a default sort on one of my columns. On init we do this:

public ngOnInit(): void {
    this.gridOptions.defaultColDef = this.selectable ? this.getDefaultColumnsDefinition() : null;
    this.showSpinner = true;
    this.getAllRefreshJobs();
}

It's one of the columns in getDefaultColumnsDefinition() that I want to be sorted initially. I tried

public onGridReady(params): void {
    this.gridApi = params.api;
    const sortModel = [
        {colId: 'recordStartTime', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
    this.gridApi.sizeColumnsToFit();
}

but it doesn't work. The grid looks the same. Can anyone help?

Answer 1

From what you have stated, you are calling the api before everything is initialized. I'm not 100% sure how you have this set up, but you should make these adjustments in the onGridReady function of your code. Within onGridReady you can do something similar to this:

HTML

<ag-grid-angular
    class="ag-theme-balham"
    [rowData]="data"
    [columnDefs]="columnDefs"
    (gridReady)="onGridReady($event)"></ag-grid-angular>

TypeScript

onGridReady(params): void {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    const sortModel = [
        {colId: 'recordStartTime', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
  }

This exposes the current gridApi and allows for you to make any post-initialization modifications.

Answer 2

Thanks to @Jon Black for getting me started!

After I learned that setSortModel is deprecated, this is what worked for me:

function sortGrid(event, field, sortDir) {
  const columnState = { // https://www.ag-grid.com/javascript-grid-column-state/#column-state-interface
    state: [
      {
        colId: field,
        sort: sortDir
      }
    ]
  }
  event.columnApi.applyColumnState(columnState);
}

with

this.gridOptions = {
      defaultColDef: {
        sortable: true // enable sorting on all columns by default https://www.ag-grid.com/javascript-grid-sorting/
      },
      columnDefs,
      onGridReady: function (event) {
        console.log('The grid is now ready', event);
        sortGrid(event, 'timestamp', 'asc')
      },
    }