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

Question

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?

Braille

Answer 1

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)\"
  ...
}

Gauche

so it happens that i also have a celltemplate where i am using appscope, so after adding the code you suggested, this method EditTransaction() is not being called "cellTemplate": "<div style=\"padding-left:10px; padding-top:5px\"> <a href ng-click=\"grid.appScope.EditTransaction(row.entity)\"> {{row.entity.lossEventTransId}}</a> </div>" – Braille

hey, I added a celltemplate with ng-click in this plunkr plnkr.co/edit/AeuT6GqvuoXDDjFpYnWq?p=preview and it works. can you supply more info or create a not working plunkr? – Gauche

Answer 2

I know you specifically said "without actually changing the data", but assigning a filtered dataset to the grid would not change the dataset, just the data for the grid. Also it might be a relevant and valid solution for other cases like this.

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

The key part is just adding a filter when assigning the dataset:

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

Anthropometry

Answer 3

You can hide it by creating cell templates and hide it based on row value for every 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 made a Plunk to demonstrate a viable technique to solve this: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Pyrophyllite