Handling filter event in ui-grid - angularjs

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: '<i class="pencil-icon"></i>'
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!