CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
antonyboom
antonyboom

Reputation: 1181

Select filter doesn't work with cellTemplate, angular ui-grid

I'm working with angular ui-grid library and faced with the problem. I cannot understand how to apply filter for cell with multiple values. Columns category has an inner array, which I display thru cellTemplate like this 

cellTemplate: "<div ng-repeat='item in row.entity[col.field]'>{{item.name}}</div>"

also in category column I have select filter with dynamic array, which I'm getting thru services

 filter: {
                type: uiGridConstants.filter.SELECT,
                selectOptions: $scope.categories
            },

where $scope.categories comes from

 lovServices.categories().then(function (result) {
                angular.forEach(result, function (value) {
                    $scope.categories.push({
                        value: value.id,
                        label: value.name
                    });
                });
            });

But when I'm selecting any category filter it shows me an empty grid, I understand that grid filter cannot find any value, but the reason of it I cannot understand.

Could anybody help me to find my mistake? I appreciate any help.

Code: 

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

        $scope.categories = [];

        // Get Grid Data
        var getData = function () {
            lovServices.eventTypes()
                .then(function (response) {
                    //Initial Data
                    $scope.gridOptions.data = response;
                });
        };
        var getOptions = function () {
            lovServices.categories().then(function (result) {
                angular.forEach(result, function (value) {
                    $scope.categories.push({
                        value: value.id,
                        label: value.name
                    });
                });
            });
        };

        // Ui-Grid Options
        $scope.gridOptions = {
            enableFiltering: true,
            rowHeight: 60
        };

        // Ui-Grid Columns
        $scope.gridOptions.columnDefs = [
            {
                displayName: 'Name',
                field: 'name',
                sort: {
                    direction: uiGridConstants.ASC
                }
            },
            {
                field: 'description',
            },
            {
                field: 'category',
                enableSorting: false,
                filter: {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: $scope.categories
                },
                cellTemplate: "<div ng-repeat='item in row.entity[col.field]'>{{item.name}}</div>"
            }
        ];

        $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.gridApi = gridApi;

        };

        //Get data
        getData();
        getOptions();

    });

This is a plunker with my problem

Upvotes: 1

Views: 1668

Answers (1)

Daedalus
Daedalus

Reputation: 7722

Because the data you are filtering against is an array, and not a flat value, it must be compared through iteration.

That is to say, a anonymous function must be supplied as the condition key to the filter object, in order to iterate through the column values and figure out which one matches the search term.

Documentation

Example:

filter: {
    condition: function(searchTerm, cellValue, row, column) {
        var filtered = false;
        for (var i = 0; i < cellValue.length; i++) {
            filtered = cellValue[i].id === searchTerm;
            if (filtered) {
                break;
            }
        }
        return filtered;
    },
    type: uiGridConstants.filter.SELECT,
    selectOptions: $scope.categories
},

Updated plunkr

Upvotes: 3

Related Questions