ngGrid How can I create filters on multiple columns like Excel Data Filter?

Question

We are using ngGrid. I wanted to know if there is a way to create multi column filter like in Excel?

Have been searching on the net but most that I could find was having a single text box filter for filtering all the columns (only one at a time though).

Any help will be appreciated.

Thanks!

Answer 1

Maybe try the filterBar plugin.

var filterBarPlugin = {
    init: function(scope, grid) {
        filterBarPlugin.scope = scope;
        filterBarPlugin.grid = grid;
        $scope.$watch(function() {
            var searchQuery = "";
            angular.forEach(filterBarPlugin.scope.columns, function(col) {
                if (col.visible && col.filterText) {
                    var filterText = col.filterText +'; ';
                    searchQuery += col.displayName + ": " + filterText;
                }
            });
            return searchQuery;
        }, function(searchQuery) {
            filterBarPlugin.scope.$parent.filterText = searchQuery;
            filterBarPlugin.grid.searchProvider.evalFilter();
        });
    },
    scope: undefined,
    grid: undefined,
};

Here is a Plunker to show it in action.

This plugin wasn't written by me, and I don't remember where I found it. I just used it in this Question. (see the comment)