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

Question

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

Daedalus · Accepted Answer · 2016-10-28 23:32:08Z

3

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

answered Oct 28, 2016 at 23:32

Daedalus

7,7125 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

antonyboom Over a year ago

The condition, that's it I couldn't understand how to apply, I have tried to impact on it thru for loop in filterChanged at the grid core but did't get any success. Thank you a lot for a help! I have to read docs more careful.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related