ua_boaz ua_boaz - 2 months ago 73
AngularJS Question

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

I have a simple UI 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 rows which 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 changing the data, can it be filtered out from rows?

CMR CMR
Answer

One way is to adjust the row-repeater-template to check for some row-specific value and make the row show/hide that way. I created a Plunkr showcasing a possible solution.

First you need to create your row-value-checker-function:

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

Then you adjust their template by adding that check to their row-repeater

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