CODEWITHSUNDEEP
javascriptangularjsag-grid
Igino Boffa
Igino Boffa

Reputation: 451

Ag-grid: viewport not loading data

This is the part 2 of this question: Ag-grid viewport: cannot read property 'bind' of undefined

I correctly defined all the functions requested by viewport interface, but I'm not able to load data into the grid, as you can see in this plunker:

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

In particular, these stages described in the documentation don't seem to be fired:

  1. The datasource responds with the size of the data (eg 1,000 rows) and calls params.setRowCount(1000). The grid responds by sizing the vertical scroll to fit 1,000 rows.

  2. The grid, due to it's physical size on the screen, works out it can display 20 rows at any given time. Given the scroll position is at the start, it calls datasource.setViewportRange(0,19) informing the datasource what data it needs. The grid will display blank rows for the moment.

I fired the grid population event defining this function:

WatcherTable.prototype.setRowData =function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    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);
    // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
    setTimeout(function () {
        that.table.api.sizeColumnsToFit();
    }, 100);
}

and calling it when grid is ready:

onGridReady:WatcherTable.prototype.setRowData.bind(this,$http)

Why does the grid remain empty?

Thank you

Upvotes: 1

Views: 1800

Answers (1)

Sean Landsman
Sean Landsman

Reputation: 7177

You have a timing issue in your plunker - your MockServer is trying to process data before it's available.

You need to do two things to resolve this - the first is to only try set the data source once the data is available in the MockServer:

WatcherTable.prototype.setRowData = function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    var mockServer = new MockServer();
    var that = this;
    $http.get('data.json').then(function (response) {
        mockServer.init(response.data);
        var viewportDatasource = new ViewportDatasource(mockServer);
        that.table.api.setViewportDatasource(viewportDatasource);
        // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
        setTimeout(function () {
            that.table.api.sizeColumnsToFit();
        }, 100);
    });
}

Secondly, along the same theme, you need to prevent the periodic updates from trying to process data before its ready. Here you can either kick off the periodical updates AFTER the data is available, or more simply add a check before you try use it:

MockServer.prototype.periodicallyUpdateData = function() {
    if(!this.allData) return;

I've forked your plunker (with the above changes) here: https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview

Upvotes: 1

Related Questions