Angular UI-grid filter code not working

Question

The below code is similar to the one in the tutorial http://ui-grid.info/docs/#/tutorial/321_singleFilter but it does not display the data grid and I am not sure why

I checked on plunk and could not find any error, below is my code

var app = angular.module('app', ['ngTouch', 'ui.grid'])

app.controller('MainCtrl', function($scope) {

    $scope.gridOptions = {
        enableFiltering: false,
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
        },
        columnDefs: [
            {
                field: 'name'
            }, {
                field: 'last'
            }, {
                field: 'address'
            }, {
                field: 'name1'
            }, {
                field: 'last1'
            }, {
                field: 'address1'
            }, {
                field: 'last45'
            }
        ],
        data: [
            {
                "name": "test",
                "last": "test2",
                "address": "test3",
                "name1": "test",
                "last1": "test2",
                "address1": "test3",
                "last45": "op"
            }, {
                "name": "test",
                "last11": "test2",
                "address": "test2"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }, {
                "name": "test",
                "last": "test2",
                "address": "test3"
            }
        ]
    };


    $scope.filter = function() {
        $scope.gridApi.grid.refresh();
    };

    $scope.singleFilter = function(renderableRows) {
        var matcher = new RegExp($scope.filterValue);
        renderableRows.forEach(function(row) {
            var match = false;
            ['name', 'last', 'address'].forEach(function(field) {
                if (row.entity[field].match(matcher)) {
                    match = true;
                }
            });

            if (!match) {
                row.visible = false;
            }
        });
        return renderableRows;
    };
})

What part is not working? I see the grid in your plunk, and your data is populated. If you are having issues with the filter ... I see no actual filter function in your controller so ng-click='filter()' does nothing in your plunk. In your example code in your post you have enableFiltering: false, — Doug E Fresh
The only thing defined in your plnkr is the '$scope.gridOptions' variable. Maybe that is your problem. You are missing half of the code. — ilmgb
@Sapy $scope.filter is the function dont check the code in plunk I have changed it there — LeoG
@ilmgb : I didnt get you, please my code on stackoverflow, it contains everything plunk ignore — LeoG

Kathir Kathir · Accepted Answer · 2015-07-29T20:53:03

Your problem seems to be because of the data. Since your data does not have all the columns for each row. You will have to fix your singleFilter method to check for that case.

$scope.singleFilter = function(renderableRows) {
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach(function(row) {
  var match = false;
  ['name', 'last', 'address'].forEach(function(field) {

    if (row.entity[field] && row.entity[field].match(matcher)) {
      match = true;
    }
  });
  if (!match) {
    row.visible = false;
  }
});
return renderableRows;
};

Check this plnk for working version http://plnkr.co/edit/l7Uc3H0CnoyRkaHdNZ9P?p=preview

Angular UI-grid filter code not working

1 Answers