Issue
I have several pages of datatables that implement pagination through AG Grid. We are using Angular 12 with a custom CSS framework that supports AG Grid built by my company. When I click a header column to sort the column, the onGridReady event fires, which makes an api call to reset the grid row options, so sorting never happens.
AG Grid options for my component:
public gridFlex: customGridOptions = {
name: 'Data Panel',
rowSelection: 'single',
rowModelType: 'serverSide',
serverSideStoreType: this.serverSideStoreType,
pagination:true,
paginationPageSize: this.pageSize,
cacheBlockSize:this.pageSize,
cacheOverflowSize:1,
maxBlocksInCache:1,
maxConcurrentDatasourceRequests:1,
infiniteInitialRowCount:1,
onGridReady: this.onGridReady.bind(this),
onPaginationChanged:this.onPageChange.bind(this),
}
HTML
<custom-table
[girdOptions]="gridFlex"
[colDefs]="colsGrid"
>
</custom-table>
Function causing refresh:
onGridReady(params:any){
this.gridApi = params.api
this.gridColumnApi=params.columnApi
if(this.request !== undefined && this.request !== null){
let filterModel = {
request: {type: 'equals', filter: this.request}
};
this.gridApi.setFilterModel(filterModel)
}
let datasource = {
getRows: (params:any) => {
let filterModel = params.request.filterModel
let page = params.request.endRow/this.pageSize
let formData:any = {"start": params.request.startRow, "page": page, "size": this.pageSize}
if(!this.isObjEmpty.transform(filterModel)){
for(let key in filterModel){
if(filterModel[key].filter=='#000'){
formData[key]=""
} else {
formData[key]=filterModel[key].filter
}
}
formData['filter']='filtered'
}
this.apiService.getTableDetails(formData).subscribe(data => {
params.successCallback(data.data, data.count)
})
}
}
params.api.setServerSideDatasource(datasource)
}
I know the api call in the onGridReady function is causing the refresh. I am just not sure on a workaround to set the data I need on pagination changes, but not have it refresh when the header is sorted. Because of the framework I'm using, I don't have an option to not bind the data to the custom component and I have to use this framework as it's standardized.
Solution
So I just completely overlooked the server side rendering here. What was happening was, we use 1 page that does server side sorting, and the rest don't. When the pages were created, they were all created as if server side sorting was being done. I didn't need the callback function at all because it was only for server side sorting. Removing it and removing the server side options from the grid options resolved the issue.
Answered By - James
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.