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

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?

4 Answers

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 = { // state: [ { colId: field, sort: sortDir } ] } event.columnApi.applyColumnState(columnState);
}

with

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

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 [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.

I don't know if it will be a good solution for you. But in ColDef[]{ you can set the sort: asc | desc and set initialSortIndex: 1 | 2.

Example:

ColDef[] { return [ .... { headerName: 'columnName1', field: 'columnField1', sort: 'desc', initialSortIndex: 1 { headerName: 'columnName2', field: 'columnField2', sort: 'asc', initialSortIndex: 2 }, ... }

And in template part you can set the 'ctrl' key as key to use to multi sort in ag-grid like

<ag-grid-angular
...
[multiSortKey]="'ctrl'"
...
</ag-grid-angular>

If you are looking into sorting grouped rows by default:

 autoGroupColumnDef: ColDef = { field: 'yourFieldName', sort: 'orientation' // 'asc' or 'desc' };

 this.gridOptions = { autoGroupColumnDef: this.autoGroupColumnDef };