How to hide certain rows in a ui-grid based on its values?

Question

I have a simple user interface grid with these options:

$scope.transactionGrid = { enableSorting : true, enableColumnResize : true, enableScrollbars : true, enablePaginationControls : false, minRowsToShow : 6, onRegisterApi : function(gridApi) { $scope.gridEventsApi = gridApi; } }; 

I want to hide lines that have a specific value, deleted: "y" .

 $scope.transactionGrid.data = [ { Name: "First", deleted: "y" }, { Name: "Second", deleted: "y" }, { Name: "Third", deleted: "n" }, { Name: "Fourth", deleted: "n" } ]; 

Without actually modifying the data, can it be filtered out of rows?

Answer 1

One way is to set up a pattern-repeater-pattern to check for some specific string value and make the show / hide string this way. I created a tablet demonstrating a possible solution.

First you need to create your line check function:

 appScopeProvider: { showRow: function(row) { return row.deleted !== 'y'; } }, 

Then you customize your template by adding this check to your line repeater

 $templateCache.put('ui-grid/uiGridViewport', ... ng-if=\"grid.appScope.showRow(row.entity)\" ... } 

Answer 2

You can hide it by creating cell templates and hide them based on the row value for each field:

 $scope.transactionGrid = { enableSorting : true, enableColumnResize : true, enableScrollbars : true, enablePaginationControls : false, minRowsToShow : 6, onRegisterApi : function(gridApi) { $scope.gridEventsApi = gridApi; } // Column template definitions: columnDefs: [ { name: 'Name', displayName: 'Name', cellTemplate : '<div ng-if="row.entity.deleted">{{row.entity.Name}}</div>' } ] }; 

I did Plunk to demonstrate a viable technique to solve this problem: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Answer 3

I know that you specifically said “without actually changing the data”, but assigning a filtered data set to the grid would not change the data set, but only the data for the grid. It may also be a relevant and relevant solution for other cases like this.

I forked CMR Plunk to demonstrate this: http://plnkr.co/edit/NntwWb?p=preview

The key part is simply adding a filter when assigning a dataset:

 $scope.gridOptions = { data: $scope.myData.filter(function(row) { return row.deleted !== "y"; }) };