I am using AG-Grid v26 for my development and we have arrived at a situation where we need to refresh the grid to get the latest records from the server. We are using server side data model with infinite scrolling. We have set autoHeight with wrap-text on a column to show complete data on a particular column in a row. But when we call gridApi.refreshServerSideStore(undefined) i could see the agGrid fetches the refreshes and brings up the latest data from the server, but it disturbs the scroll positions in the grid and scroll bar shifts down.
<ag-grid-angular
style="width: 100%; height: 400px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
<button (click)="refreshServerData()">Refresh Server Data</button>
In component.ts file
import { Component } from "@angular/core";
import { GridApi } from "ag-grid-angular";
@Component({
selector: "app-my-grid",
templateUrl: "./my-grid.component.html",
styleUrls: ["./my-grid.component.css"],
})
export class MyGridComponent {
gridApi: GridApi;
columnDefs = [
{ headerName: "Column 1", field: "col1", autoHeight: true, wrapText: true },
{ headerName: "Column 2", field: "col2" }, //
];
onGridReady(params) {
this.gridApi = params.api;
const dataSource = this.createDataSource();
params.api.setServerSideDatasource(datasource);
}
createDataSource() {
const getServerSideDatasource = (server: any): IServerSideDatasource => {
return {
getRows: (params) => {
// code to get data from server
//...
if (response.success) {
// call the success callback
params.success({
rowData: dataFromServer,
rowCount: response.lastRow,
});
} else {
// inform the grid request failed
params.fail();
}
},
};
};
}
refreshServerData() {
this.gridApi.refreshServerSideStore(undefined);
}
}
If i remove autoHeight or set to false, row height gets calculated correctly after refreshing the server side data and scroll position is maintained, else row height changes which results in the change of scroll position on the grid.