1

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.

Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82

1 Answers1

1

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.

Tim Harker
  • 2,367
  • 1
  • 15
  • 28
  • Appreciate your effort to write that template :) . Surely this can be a way to tackle the issue. However, can you suggest if this can be done without custom template. Are there any objects exposed by grid itself which can be manipulated. – Saurabh Tiwari Mar 28 '17 at 09:09
  • Without seeing more of your code it's hard to tell for sure, but I did provide an update above. Let me know if you have any other questions. Always happy to help! – Tim Harker Mar 28 '17 at 12:24
  • Used your initial approach – Saurabh Tiwari Apr 01 '17 at 14:25
  • No worries, glad I could help. If you'd be so kind as to mark my answer as "helpful" and/or "accepted" for the next persons benefit, that'd be great. Feel free to post any other questions, I can try to help further. – Tim Harker Apr 01 '17 at 14:40