How to reset the count display at the bottom of ui-grid

Question

I have a need of filtering the ui-grid data, but not from the native header filters provided by the grid rather on a button click.

So on my Filter button's listener I filter my original data array and re-assigning the filtered entries to the $scope.gridData object. I have a reset button too. On clicking reset I re-assign original data array to $scope.gridData object.

With this the filtering works fine. However I face a issue when: The data is filtered using the external Filter button. Internal (grid filters) filters are applied on a column. Data is reset using Reset button.

On this reset, the grid maintains the entries filtered by the internal filters. However in the row count display the grid shows n-10 out of total items. The total item here is the count of original data array while the grid currently hold the filtered data.

Is their any way to manually change the grid count display.

Tim Harker Tim Harker · Accepted Answer · 2017-03-27T19:42:32

If I understand you correctly, you could override ui-grid footer and make your adjustments:

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function($scope) {
  var adjustedGridFooterTemplate =
    //same as normal template, but with:  + ' (+/- my adjustment)' AND  + ' (+/- another adjustment)'
    "<div class=\"ui-grid-footer-info ui-grid-grid-footer\"><span>{{'search.totalItems' | t}} {{grid.rows.length + ' (+/- my adjustment)'}}</span> <span ng-if=\"grid.renderContainers.body.visibleRowCache.length !== grid.rows.length\" class=\"ngLabel\">({{\"search.showingItems\" | t}} {{grid.renderContainers.body.visibleRowCache.length + ' (+/- another adjustment)'}})</span></div>";
  $scope.gridOptions = {
    enableFiltering: true,
    showGridFooter: true,
    gridFooterTemplate: adjustedGridFooterTemplate,
    data: [{name: "Moroni", age: 50},
           {name: "Tiancum", age: 43},
           {name: "Jacob", age: 27}]
  }
}]);

div[ui-grid] {
  height: 200px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="gridStyle">
  </div>
</div>

Update (from comment below)

When you say you re-assign $scope.gridData, make sure you use angular.copy() to do the re-assigning, something like $scope.gridData = angular.copy(newData); as it'll ensure the internal grid watches also re-fire.

Hope that helps, let me know if you have any other questions.

How to reset the count display at the bottom of ui-grid

1 Answers