angular-ui-grid pagination missing

Question

I have an ui-grid options as follows

      {  
   "enableHorizontalScrollbar":false,
   "enableHiding":false,
   "enableColumnResizing":true,
   "enableSorting":true,
   "enableColumnResize":true,
   "paginationPageSize":20,
   "enablePagination":true,
   "enablePaginationControls":true,
   "columnDefs":[  
      // skipped for clarity
   ],
   "data":"griddata",
   "excludeProperties":[  
      "$$hashKey"
   ],
   "enableRowHashing":true,
   "showHeader":true,
   "headerRowHeight":30,
   "rowHeight":30,
   "maxVisibleRowCount":200,
   "minRowsToShow":10,
   "showFooter":false,
   "footerRowHeight":30,
   "columnWidth":50,
   "maxVisibleColumnCount":200,
   "virtualizationThreshold":20,
   "columnVirtualizationThreshold":10,
   "excessRows":4,
   "scrollThreshold":4,
   "excessColumns":4,
   "horizontalScrollThreshold":2,
   "scrollThrottle":70,
   "enableFiltering":false,
   "enableColumnMenus":true,
   "enableVerticalScrollbar":1,
   "minimumColumnSize":10,
   "headerTemplate":null,
   "footerTemplate":null,
   "cellEditableCondition":true,
   "enableCellEditOnFocus":false
}

so I expect some pagination to happen, but it does not. I see scroller instead. What could be the reason?

I aim for client side pagination.

Answer 1

You have to add the directive to the grid:

<div ui-grid="grid" ui-grid-pagination class="grid"></div>

And add ui.grid.pagination to your module dependence.

Answer 2

Your HTML may be like this:

<div class="grid" ui-grid="gridOptions" ui-grid-pagination></div>

And your ui-grid options:

$scope.gridOptions = {
    //all your code
  };

Answer 3

Sometimes, one can forget to add 'ui.grid.pagination' module in app.js. Check your app.js and if you also forgot to add, add it and it will be working.