Angular v15 Ag-Grid Server Side Row Model (SSRM) not working

I'm trying to switch our ag-grid implementation from client-side to server-side and I'm running into issues populating the row data to the grid. I'm able to load my column definitions that I'm getting back from a service call response. I'm also getting a successful response for the data to populate the rows, but the row data will not display in the grid. Any help is greatly appreciated.

Angular Version:

"@angular/core": "15.2.9",


Ag-Grid Version:

"@ag-grid-community/angular": "^29.2.0",
"@ag-grid-community/core": "^29.2.0",
"@ag-grid-enterprise/core": "^29.2.0",
"@ag-grid-enterprise/server-side-row-model": "^29.2.0",
"@ag-grid-enterprise/column-tool-panel": "^29.2.0",
"@ag-grid-enterprise/filter-tool-panel": "^29.2.0",
"@ag-grid-enterprise/master-detail": "^29.2.0",
"@ag-grid-enterprise/range-selection": "^29.2.0",
"@ag-grid-enterprise/set-filter": "^29.2.0",
"@ag-grid-enterprise/side-bar": "^29.2.0",


Grid Options:

export const GridDefaultSetting: GridOptions = {
rowModelType: 'serverSide',
cacheBlockSize: 50,
maxBlocksInCache: 2,
floatingFiltersHeight: 47,
headerHeight: 47,
multiSortKey: 'ctrl',
rowHeight: 47,
rowSelection: 'multiple',
suppressCellSelection: false,
suppressContextMenu: true,
suppressRowClickSelection: true,
unSortIcon: true,
pagination: true,
paginationAutoPageSize: false,
suppressPaginationPanel: false,
debug: true,
defaultColDef: {
sortingOrder: ['asc', 'desc'],
resizable: false,
},
animateRows: false,
suppressColumnMoveAnimation: true,
components: {
renderDate: RenderDateComponent,
renderIcon: RenderIconComponent,
renderLink: RenderLinkComponent,
renderAction: RenderActionComponent,
renderDNC: RenderDncComponent,
renderTime: RenderTimeComponent,
renderTaskStatus: RenderTaskStatusComponent,
customDatePicker: CustomDatePickerComponent,
customDropDown: CustomDropdownFilterComponent,
customLoadingOverlay: CustomOverlayComponent,
customTextFilter: CustomTextFilterComponent,
customMultiSelectFilter: CustomMultiSelectFilterComponent,
openRapidApp: StartRapidAppComponent,
viewSourceDetails: SourceDetailsComponent,
customDetailRenderer: DetailRendererComponent,
renderStatusIcons: RenderStatusIconsComponent,
renderLock: RenderLockComponent,
},
loadingOverlayComponent: 'customLoadingOverlay',
};


HTML View:

<ag-grid-angular #mainGrid
class="workqueue ag-theme-material"
[class.ag__shrink]="isImpersonationOn"
[gridOptions]="gridOptions"
[modules]="modules"
[masterDetail]="false"
[detailRowAutoHeight]="false"
[accentedSort]="true"
[sideBar]="false"
[serverSideInfiniteScroll]="false"
[rowBuffer]="0"
(rowGroupOpened)="rowOpened($event)"
(gridReady)="onGridReady($event)"
(sortChanged)="onSortChanged()"
(filterChanged)="onFilterChanged()"
(filterModified)="onFilterModified($event)"
(rowDataChanged)="onRowDataChanged()"
(columnVisible)="onColumnsChanged($event)"
(dragStarted)="dragStarted()"
(columnMoved)="onColumnDrag()"
(rowClicked)="onRowClicked($event)"
(selectionChanged)="onSelectedRows()">
</ag-grid-angular>


On Grid Ready

public onGridReady(params: GridReadyEvent<any>): void {
this.params = params;
this.gridApi = params.api;
this.workqueueService.setGridApi(this.gridApi);
this.gridColumnApi = params.columnApi;
this.sortFilterInfo = undefined;
this.gridReady = true;
this.activePage = 1;

if (this.currentQueue) {
this.isSelectable(this.router.url.split('/')[1] === 'tasks');
this.loadGridData(this.currentQueue);
this.setSaveFilterAction.emit(false);
this.resetFilterList();
this.setSortAndFilter();
this.addGridEventListeners();
this.gridApi.redrawRows();
}
}


Load Grid Data

private loadGridData(data: WorkqueueResponse): void {
/*
* NOTE: Doing a bunch of stuff in here
*/

this.gridApi.setServerSideDatasource(this.createServerDatasource());
}


Create Server Data Source

private createServerDatasource(): IServerSideDatasource {
return {
getRows: params => {
const request: GetPaginatedWqDataRequest = {
userId: this.userId,
viewListId: 3,
viewType: this.viewType ?? 'deal',
pageNumber: 1,
pageSize: 50,
};

this.workqueueService.getPaginatedWorkqueueData(request).subscribe({
next: resp => {
this.rowData = resp.data;

params.success({
rowData: resp.data,
rowCount: resp.totalCount,
});
},
error: () => params.fail(),
});
},
};
}

Continue reading...