Handling filter event in ui-grid

Question

I am using angular ui-grid in my application to show data. I have colmnDef set as follows.

$scope.grid =
data: 'userList'
enableColumnResizing: true
enableFiltering: true
enableRowSelection: true
enableRowHeaderSelection: false
enableSorting: true
minRowsToShow: 30
multiSelect: false
columnDefs: [
  {
    name: 'id'
    field: 'id'
    displayName: 'ID'
    enableFiltering: false
    maxWidth: 100
  }
  { name: 'username', field: 'email' }
  { name: 'firstName', field: 'first_name' }
  { name: 'lastName', field: 'last_name' }
  { name: 'lastLoggedIn', field: 'last_sign_in_at', cellFilter: 'date : "medium"', enableFiltering: false }
  { name: 'locked', field: 'locked', displayName: 'Locked?', enableFiltering: false, maxWidth: 100 }
  {
   name: 'Impersonate',
   cellTemplate: '<a class="small-button" ng-controller="AuthController" ng-click="impersonateUser({{row.entity.id}})">
    <i class="fa fa-users"></i></a>',
   enableFiltering: false,
   enableSorting: false,
   visible: $scope.hideImpersonate
  }
  {
    name: 'Edit'
    cellTemplate: '<a href="/admin/users/{{row.entity.id}}/edit" class="small-button"><i class="pencil-icon"></i></a>'
    enableFiltering: false
    enableSorting: false
    width: 100
  }
  {
    name: 'Delete'
    cellTemplate: deleteCellTemplate1 + deleteCellTemplate2
    enableFiltering: false
    enableSorting: false
    width: 100
  }
]
onRegisterApi: (gridApi) -> $scope.gridApi = gridApi

I want to show message 'No Data Found' in the grid when user searches for a 'username' mentioned above which doesn't exist.
I tried following code, but it didn't work for me. I would like to know better approach towards this.

$scope.grid.$on('ngGridEventFilter', function(){
  console.log('filter called');
});

Answer 1

Wow, seems like this should be a lot easier to accomplish... After a good bit of searching around, I found one way to determine the number of results is with the gridApi.grid.renderContainers.body.visibleRowCache object.

So I modified the filter example plunker on the ui-grid tutorial and incorporated a technique described in one of their github issue threads.

To accomplish it, you can transclude a conditional div into the ui-grid div, and show it when no results are found:

<div id="grid1" ui-grid="gridOptions" class="grid">
    <div class="no-rows" ng-if="noFilteredResults">
        <div class="msg">
            <span>No Data Found</span>
        </div>
    </div>
</div>

In your controller you have to set a $watch on the gridApi.grid.renderContainers.body.visibleRowCache object:

  $scope.noFilteredResults = false;

  $scope.$watch(function() { return $scope.gridApi.grid.renderContainers.body.visibleRowCache.length; }, 
      function(newVal, oldVal) {
          if ( newVal === 0 ) {
              $scope.noFilteredResults = true; 
              console.log('no rows!');
          } else {
              $scope.noFilteredResults = false;
          }
     }); 

If there's an easier way to get it done, it's not easy to find :) Hope that helps!