Why doesn't ui-grid in Angular Meteor show its data when filter is activated?

Question

Hello I have a problem

Working:

• Meteor
• Angular Meteor
• ui-grid

I follow the plunker example in documentation ui-grid link The problem is that the data don't show when filters are activated.

I have no errors in console.

I put my code:

html file

<button id='toggleFiltering' ng-click="inventario.toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="inventario.gridOptions" class="grid"></div>

js file

class Inventario {
    constructor($scope, $reactive, $uibModal, $http, uiGridConstants) {
        'ngInject';
        $reactive(this).attach($scope);
        this.$uibModal = $uibModal;
        var today = new Date();
        var nextWeek = new Date();

        this.highlightFilteredHeader = (row, rowRenderIndex, col, colRenderIndex) => {
            if( col.filters[0].term ){
                return 'header-filtered';
            } else {
                return '';
            }
        };

        this.gridOptions = {
            enableFiltering: true,
            onRegisterApi: (gridApi) => {
                this.gridApi = gridApi;
            },
            columnDefs: [
                // default
                { field: 'name', headerCellClass: this.highlightFilteredHeader },
                // pre-populated search field
                { field: 'gender', filter: {
                    term: '1',
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
                },
                    cellFilter: 'mapGender', headerCellClass: this.highlightFilteredHeader },
                // no filter input
                { field: 'company', enableFiltering: false, filter: {
                    noTerm: true,
                    condition: (searchTerm, cellValue) => {
                        return cellValue.match(/a/);
                    }
                }},
                // specifies one of the built-in conditions
                // and a placeholder for the input
                {
                    field: 'email',
                    filter: {
                        condition: uiGridConstants.filter.ENDS_WITH,
                        placeholder: 'ends with'
                    }, headerCellClass: this.highlightFilteredHeader
                },
                // custom condition function
                {
                    field: 'phone',
                    filter: {
                        condition: (searchTerm, cellValue) => {
                            var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
                            return strippedValue.indexOf(searchTerm) >= 0;
                        }
                    }, headerCellClass: this.highlightFilteredHeader
                },
                // multiple filters
                { field: 'age', filters: [
                    {
                        condition: uiGridConstants.filter.GREATER_THAN,
                        placeholder: 'greater than'
                    },
                    {
                        condition: uiGridConstants.filter.LESS_THAN,
                        placeholder: 'less than'
                    }
                ], headerCellClass: this.highlightFilteredHeader},
                // date filter
                { field: 'mixedDate', cellFilter: 'date', width: '15%', filter: {
                    condition: uiGridConstants.filter.LESS_THAN,
                    placeholder: 'less than',
                    term: nextWeek
                }, headerCellClass: this.highlightFilteredHeader
                },
                { field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%',
                }
            ]
        };

        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
            .success((data) => {
                this.gridOptions.data = data;
                this.gridOptions.data[0].age = -5;

                data.forEach( function addDates( row, index ){
                    row.mixedDate = new Date();
                    row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
                    row.gender = row.gender==='male' ? '1' : '2';
                });
            });

        this.toggleFiltering = () => {
            this.gridOptions.enableFiltering = !this.gridOptions.enableFiltering;
            this.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
        };

    }
}

const name = 'inventario';

// Módulo
export default angular
    .module(name, [
        uiRouter,
        EditarArticulo
    ])
    .component(name, {
        templateUrl: `imports/ui/components/${name}/${name}.html`,
        controllerAs: name,
        controller: Inventario
    })
    .config(config)
    .filter('mapGender', function() {
    var genderHash = {
        1: 'male',
        2: 'female'
    };

    return function(input) {
        if (!input){
            return '';
        } else {
            return genderHash[input];
        }
    };
});

Answer 1

Given that everything seems to work when filtering is disabled, you must have a problem with the (multiple) filters you have declared.

It is most likely a combination of the filters that is excluding all of your data. Start by commenting out all of the filters (you should see all the data), and then re-introduce the filters one by one until you see the problem again.

This will narrow down the problem, and allow you to see which filter is wrong.