Can anybody help me to resolve ng-grid filtering in a multi row Grid

Question

Here is the plunker: http://plnkr.co/edit/fGVVOOIwvf4GrEj3XtJ6?p=preview

I have created a multi row grid and I would like to filter the grid data for each column header.

If I put an input box outside the grid it is working fine. If I put an input box inside the column header filtering is not working

Please see the code and help me for this.

Rob Rob · Accepted Answer · 2014-01-22T19:12:12

Use this filterBar plugin. (I cannot take credit for this, I do not remember where I found it.)

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.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
                        searchQuery += col.displayName + ": " + filterText;
                    }
                });
                return searchQuery;
            }, function(searchQuery) {
                filterBarPlugin.scope.$parent.filterText = searchQuery;
                filterBarPlugin.grid.searchProvider.evalFilter();
            });
        },
        scope: undefined,
        grid: undefined,
    };

Change your header cell input ng-model to: col.filterText

<input type="text" placeholder="MY NAME" ng-model="col.filterText" ng-change="activateFilter()"/>

Add plugin to gridOptions

...
plugins: [filterBarPlugin],
...

Updated Plunker: Plunker

Can anybody help me to resolve ng-grid filtering in a multi row Grid

2 Answers