asked on

Implement virtual paging in ag-grid

Index.chtml:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Virtual Paging Example</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="ag-grid.css">
    <link rel="stylesheet" type="text/css" href="theme-fresh.css">
    <base href="@System.Configuration.ConfigurationManager.AppSettings["BaseUrlPath"].ToString()" /> 
</head>

<body ng-app="example" ng-controller="exampleCtrl">
        
    <div ag-grid="gridOptions" style="height: 100%;" class="ag-fresh"></div>

    <script src="angular.js"></script>
    <script src="ag-grid.js"></script>
    <script src="virtualPaging.js"></script>
   

</body>
</html>

Open in new window

virualPaging.js:

agGrid.initialiseAgGridWithAngular1(angular);

var module = angular.module("example", ["agGrid"]);

module.controller("exampleCtrl", function ($scope, $http, $timeout) {

    var columnDefs = [
        // this row shows the row index, doesn't use any data from the row
        {
            headerName: "#", width: 50, cellRenderer: function (params) {
                return params.node.id + 1;
            }
        },

        { headerName: "Athlete", field: "athlete", width: 150 },
        { headerName: "Age", field: "age", width: 90 },
        { headerName: "Country", field: "country", width: 120 },
        { headerName: "Year", field: "year", width: 90 },
        { headerName: "Date", field: "date", width: 110 },
        { headerName: "Sport", field: "sport", width: 110 },
        { headerName: "Gold", field: "gold", width: 100 },
        { headerName: "Silver", field: "silver", width: 100 },
        { headerName: "Bronze", field: "bronze", width: 100 },
        { headerName: "Total", field: "total", width: 100 }
    ];

    $scope.gridOptions = {
        enableColResize: true,
        virtualPaging: true,
        rowSelection: 'single',
        rowDeselection: true,
        columnDefs: columnDefs
    };    
    
    try
    {    
        $http.get("olympicWinners.json")
       .then(function (result) {
           var allOfTheData = result.data;
           var dataSource = {
               rowCount: null, // behave as infinite scroll
               pageSize: 100,
               overflowSize: 100,
               maxConcurrentRequests: 2,
               maxPagesInCache: 2,
               getRows: function (params) {
                   var pageRows = allOfTheData.slice(params.startRow, params.endRow);
                   var lastRow = -1;
                   if (pageRows && pageRows.length > 0) {
                       if (pageRows[pageRows.length - 1].RowID >= pageRows[0].TotalRows)
                           lastRow = pageRows[0].TotalRows; //The end of scrolling has been reached
                   }
                   else
                       lastRow = 0;
                   params.successCallback(pageRows, lastRow);
               }
           }
           $scope.gridOptions.api.setDatasource(dataSource);         
       });
    }
    catch (e)
    {
        alert(e);
    }   

});

Open in new window

Above is my attempt to make the example at https://www.ag-grid.com/angular-grid-virtual-paging/index.php work. But all I see is the header. No rows.

I am really struggling with this. Thanks for any help.

ASKER CERTIFIED SOLUTION

BigRat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hardus Lombaard

ASKER

Thank you. I'll give it a shot and let you know.