Angular ui-grid filtering based on date is null or not null

Question

In my application i am using Angular ui-grid to display set of data in a grid format . I want to filter these data based on a Date field called actionDate . I want to filter data where the actionDate is null or not null. I am using a simple dropdown to select this .

But the filtering doesn't work when this actionDate field is not null . I think the reason this doesn't work is that the actionDate field has different values and the ui-grid filter fails to understand that .

I have reproduced this issue in the following plunker. http://plnkr.co/edit/8rIJeA92hDYQ9vHDUC1C?p=preview

Appreciate if anyone can point me in the right direction .

Bennett Adams Bennett Adams · Accepted Answer · 2016-02-20T18:31:16

I fixed your issues in this fork of your plunker.

UPDATE: Ok, well, the solution I've employed is to add a hidden column called dateActionedKey at the end of your colDefs:

{ 
   field: 'dateActionedKey', 
   filter: {
     term: $scope.term
   }, 
   visible: false 
}

The problem was that you were filtering the column by a property you assigned after the fact -- if has no actionDate, value is '1', else value is actionDate -- but your filter selector filters by id, looking for values '1' or '2'.

So you need to change your forEach function from:

_.forEach(data, function (value) {
    value.dateActioned = value.dateActioned===null ? '1' : value.dateActioned;
});

to:

_.forEach(data, function (value) {
    value.dateActionedKey = value.dateActioned===null ? '1' : '2';
});

By adding in the extra property dateActionedKey, you can just assign it the binary 1 or 2 value and nothing changes in your display. And since this invisible column is now the last of seven, you need to update the filter term assignment to:

$scope.gridApi.grid.columns[6].filter.term = $scope.term;

Hope this helps you.

Angular ui-grid filtering based on date is null or not null

1 Answers