Here is part 2 of the question: Ag-grid viewport: cannot read property 'bind' of undefined
Even though I have defined all the necessary functions for the viewport interface, I am still facing difficulties loading data into the grid. You can check out the issue in this plunker:
https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK
Specifically, the following stages mentioned in the documentation do not seem to be triggered:
The datasource responds with the size of the data (e.g. 1,000 rows) and calls params.setRowCount(1000). The grid should adjust its vertical scroll to accommodate 1,000 rows.
The grid determines it can display 20 rows at a time due to its physical size on the screen. With the scroll position at the beginning, it should call datasource.setViewportRange(0,19) to inform the datasource about the needed data. Currently, the grid shows blank rows instead.
I've implemented a function to populate the grid:
WatcherTable.prototype.setRowData =function ($http) {
// Mock server setup - actual code will interact with your real server
var mockServer = new MockServer();
$http.get('data.json').then(function(response){
mockServer.init(response.data);
});
var viewportDatasource = new ViewportDatasource(mockServer);
var that=this;
this.table.api.setViewportDatasource(viewportDatasource);
// Delay 'size cols to fit' to consider scrolling
setTimeout(function () {
that.table.api.sizeColumnsToFit();
}, 100);
}
This function is called when the grid is ready:
onGridReady:WatcherTable.prototype.setRowData.bind(this,$http)
However, the grid remains empty. Any insights on why this might be happening?
Thank you!