how to do pagination in ag-grid for angular 2

Question

i am developing a grid with pagination component in angular 2 using ag-grid already tried the following code in the html.

[gridOptions]="gridOptions"
                 [columnDefs]="columnDefs"
                 [showToolPanel]="showToolPanel"
                 [rowData]="rowData"

                 enableColResize
                 debug
                 rowHeight="30"
                 rowSelection="multiple"
                 rowModelType="pagination"
                 paginationPageSize = "15"

this result a grid with pagination buttons but the rowData is not loading but column headings are coming.I am loading the rowData and columnDefs from a service is that the reason why its not working ? am i doing it in the correct way ? any help is much appreciated

This answer helped me to get the pagination work stackoverflow.com/questions/36934207/… — Shan

Sean Landsman Sean Landsman · Accepted Answer · 2016-11-05T14:09:54

You need to supply a datasource for pagination - take a look at the [Pagination Documenation][1] for more information, but in a nutshell:

var dataSource = {
        rowCount: 100, // for example
        getRows: function (params) { 
                var rowsThisPage = someService.getData(params.startRow, params.endRow);
                params.successCallback(rowsThisPage, lastRow);
        };
}

gridOptions.api.setDatasource(dataSource);

Update

Please take a look at the first [Pagination Example][2] - this illustrates how to do exactly what you're after.

I've modified the example slightly to fit into the code snippet below - this shows you how to load a file and set the datasource all in one block (although it would be better to separate these into separate methods):

// setup the grid after the page has finished loading
var allOfTheData = [];
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../olympicWinners.json');  // your static json file would go here
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            allOfTheData = JSON.parse(httpRequest.responseText);

            var dataSource = {
                rowCount: 20,
                getRows: function (params) {
                    // take a chunk of the array, matching the start and finish times
                    var rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);

                    // see if we have come to the last page. if we have, set lastRow to
                    // the very last row of the last page. if you are getting data from
                    // a server, lastRow could be returned separately if the lastRow
                    // is not in the current page.
                    var lastRow = -1;
                    if (allOfTheData.length <= params.endRow) {
                        lastRow = allOfTheData.length;
                    }
                    params.successCallback(rowsThisPage, lastRow);
                }
            };

            gridOptions.api.setDatasource(dataSource);
        }
    };
});

how to do pagination in ag-grid for angular 2

1 Answers