on the initial load of the component, all data is displayed as intended. But when switched to the next page, the grid clears and following error is displayed on the console:
ERROR Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.
Without the valueGetter in the devices column, the pagination works, but I need it to alter the devices array which comes from the service.
I tried it also with an cellRenderer, but the problem is, the content is not updated upon pagination and is always empty on the following pages.
Here's the component code:
import { Component, OnInit } from "@angular/core";
import { SensorsListService } from "../services/sensors-list.service";
import { Sensor } from "src/app/shared/models/sensor.model";
import { IDatasource, IGetRowsParams } from "ag-grid-community";
@Component({
selector: "app-sensors-list",
templateUrl: "./sensors-list.component.html",
styleUrls: ["./sensors-list.component.scss"]
})
export class SensorsListComponent implements OnInit {
sensorsList: Sensor[];
frameworkComponents: any;
columnDefs: any;
rowData: any;
gridApi: any;
gridColumnApi: any;
constructor(
private sensorsListService: SensorsListService,
) {
this.columnDefs = [
{
headerName: "Field ID",
field: "fieldId",
sortable: true,
filter: true,
autoHeight: true,
suppressSizeToFit: true,
width: 100
},
{
headerName: "Name",
field: "name",
sortable: true,
filter: "agTextColumnFilter",
autoHeight: true,
width: 300
},
{
headerName: "Device",
valueGetter: function(params) {
const devices = [];
if (params.data.devices.length) {
params.data.devices.forEach(device => {
devices.push(device.commNr);
});
}
return devices;
},
sortable: true,
filter: true,
autoHeight: true,
suppressSizeToFit: true,
width: 300
}
];
}
dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
const page = params.startRow / (params.endRow - params.startRow);
if (Object.keys(params.filterModel).length) {
this.sensorsListService
.getFilteredSensorList(params.filterModel.name.filter)
.subscribe(response => {
params.successCallback(
response.body.content,
response.body.totalElements
);
});
} else {
this.sensorsListService.getAllSensors(page).subscribe(response => {
params.successCallback(
response.body.content,
response.body.totalElements
);
});
}
}
};
ngOnInit() {}
onGridReady(params) {
this.gridApi = params.api;
this.gridApi.setDatasource(this.dataSource);
this.gridColumnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
}
}
