angular - La mejor manera de establecer un ordenamiento predeterminado en una columna dinámica en agGrid
Estoy trabajando en un agGrid, donde no definimos explícitamente las columnas. Por más que lo intento, no puedo entender cómo establecer un ordenamiento predeterminado en una de mis columnas. Al iniciar hacemos esto:
public ngOnInit(): void {
this.gridOptions.defaultColDef = this.selectable ? this.getDefaultColumnsDefinition() : null;
this.showSpinner = true;
this.getAllRefreshJobs();
}
Es una de las columnas en getDefaultColumnsDefinition() que quiero que se ordene inicialmente. Intenté
public onGridReady(params): void {
this.gridApi = params.api;
const sortModel = [
{colId: 'recordStartTime', sort: 'desc'}
];
this.gridApi.setSortModel(sortModel);
this.gridApi.sizeColumnsToFit();
}
pero no funciona. La cuadrícula se ve igual. ¿Alguien puede ayudar?
Respuesta #1
¡Gracias a @Jon Black por ayudarme a empezar!
Después de que supe que setSortModel está obsoleto, esto fue lo que funcionó para mí:
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);
}
con
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')
},
}
Respuesta #2
Por lo que has indicado, estás llamando a la API antes de que todo esté inicializado. No estoy 100% seguro de cómo tienes esto configurado, pero deberías hacer estos ajustes en la función onGridReady de tu código. Dentro de onGridReady puedes hacer algo similar a esto:
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);
}
Esto expone el gridApi actual y te permite hacer cualquier modificación posterior a la inicialización.
