ua_boaz ua_boaz - 1 month ago 47x
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,

$ [
{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?


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