Angular UI-Grid Custom Filter Button

Question

I have some data using Angular UI-Grid that I want to filter for a single column value using a single filter button.

The filter input works but the Filter Button does not work yet. Is it possible to pragmatically have a filter button?

Plunker: http://plnkr.co/edit/R6PhMiBbaeqj9ErjdvY1?p=preview

HTML:

<div ng-controller="MainCtrl">

  <p><button ng-click='filterBtn()'>Filter for "Company = Mixers"</button></p>

  <p><input ng-model='filterValue'/><button ng-click='filter()'>Filter</button></p>

  <div id="grid1" ui-grid="gridOptions" class="grid"></div>

</div>

JS:

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  var today = new Date();
  $scope.gridOptions = {
    enableFiltering: false,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
    },
    columnDefs: [
      { field: 'name' },
      { field: 'company' }
    ]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
  });

  $scope.filterText = 'Mixers';

  $scope.filterBtn = function() {
    $scope.gridApi.grid.columns[1].filters[0] = {
      condition: uiGridConstants.filter.EXACT,
      term: 'Mixers'
    };

    $scope.gridOptions.enableFiltering = true
    $scope.gridApi.grid.refresh(); 
  }

  $scope.filter = function() {
    $scope.gridApi.grid.refresh();
  };

  $scope.singleFilter = function( renderableRows ){
    var matcher = new RegExp($scope.filterValue);
    renderableRows.forEach( function( row ) {
      var match = false;
      [ 'name', 'company' ].forEach(function( field ){
        if ( row.entity[field].match(matcher) ){
          match = true;
        }
      });
      if ( !match ){
        row.visible = false;
      }
    });
    return renderableRows;
  };
}]);

what exactly do you require because you have a filter button in your plunkr — johan
– johan, Commented May 18, 2016 at 16:49
The filter with input works but the filter button does not. I need to get the Filter Button working. — simple
– simple, Commented May 18, 2016 at 16:54

johan · Accepted Answer · 2016-05-18 17:34:38Z

4

Ok I got it to work with both buttons:

http://plnkr.co/edit/25r5aBC0wAtDTEE8gOcO?p=preview

$scope.filterText = '';

  $scope.filterBtn = function() {
    $scope.filterText = 'Mixers';
    $scope.gridApi.grid.refresh(); 
  }

  $scope.filter = function() {
    $scope.filterText = $scope.filterValue;
    $scope.gridApi.grid.refresh();
  };

answered May 18, 2016 at 17:34

johan

1,0129 silver badges20 bronze badges

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

1 Comment

Gary Over a year ago

Small point. In your plnkr the singleFilter does not need to be on the $scope. That just adds to the $digest cycle. I hadn't tried using registerRowsProcessor before, so thank you for showing that.

biruk1230 · Accepted Answer · 2020-02-27 09:37:02Z

Controller:

/**
 * Appuser User Controller
 */

(function() {

     Appuser.controller('AppuserColumnFilterModalCtrl', function( $scope, $compile, $timeout,$rootScope ,uiGridConstants,$translate,localStorageService,coriUtility) {
        var $elm;
        $scope.showitem=true;

        $scope.showcolor=true;
        angular.forEach($scope.$parent.grid.columns, function (value, key) {

            if($scope.$parent.col.colDef.field ==value.field)
            {
                var value= coriUtility.getfiltercheck(value.field);
                if(value)
                {
                    $scope.showitem =false;
                }
                else {
                    $scope.showitem =true;
                }


            }


        });



        $scope.showFilterModal = function() {
            $scope.listOfFilters = [];
            $scope.columnname=$scope.col.colDef.field;
            $scope.columnnameDisplay=$scope.col.colDef.displayName;
            $scope.col.grid.rows.forEach( function ( row ) {
                // if(row.entity[$scope.columnname]==$scope.columnname) {
                if(row.entity[$scope.columnname]==null)
                {
                    row.entity[$scope.columnname]='-';
                }

                if ($scope.listOfFilters.indexOf(row.entity[$scope.columnname]) === -1) {
                    $scope.listOfFilters.push(row.entity[$scope.columnname]);
                }
                //}
            });
            $scope.listOfFilters.sort();

            $scope.gridOptions = {
                data: [],
                enableColumnMenus: false,
                enableFiltering: true,
                field:  $scope.columnname,
                displayName:  $scope.columnnameDisplay,
                headerCellFilter: 'translate',
                headerCellClass: 'ui-grid-header-with-filter ui-gridcustom',
                placeholder: $scope.columnnameDisplay,
                columnLocalType: 'filter',
                filter:
                    {  placeholder: $scope.columnnameDisplay,
                        filterName: "containsFilter",
                        condition: uiGridConstants.filter.CONTAINS,
                    },
                onRegisterApi: function( gridApi) {
                    $scope.gridApi = gridApi;
                    if ( $scope.colFilter && $scope.colFilter.listTerm ){
                        $timeout(function() {
                            $scope.colFilter.listTerm.forEach( function( column ) {
                                if(column==null){ column="."}
                                var entities = $scope.gridOptions.data.filter( function( row ) {
                                    if(row.column==null|| row.column==".") row.column="-";
                                    return row.column === column;
                                });

                                if( entities.length > 0 ) {

                                    $scope.gridApi.selection.selectRow(entities[0]);
                                }
                            });


                        });
                    }


                }
            };



            $scope.listOfFilters.forEach(function( column ) {
                $scope.gridOptions.data.push({column: column});
            });

            var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content custompopup"><div class="modal-header">{{ columnnameDisplay | translate }}</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection  class="modalGrid"></div></div><div class="modal-footer"><button id="buttonReset" class="btn btn-primary" ng-click="reset()">{{ "COMMONFILTERBUTTONRESET" | translate }}</button><button id="buttonClose" class="btn btn-primary" ng-click="close()">{{ "COMMONFILTERBUTTONFILTER" | translate }}</button></div></div></div></div>';
            $elm = angular.element(html);
            angular.element(document.body).prepend($elm);

            $compile($elm)($scope);

        };

        $scope.close = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm;
            $scope.colFilter.listTerm = [];
            $scope.filternull="";
            columns.forEach( function( column ) {
                if(column.column==null || column.column=="" )column.column="-";
                $scope.colFilter.listTerm.push( column.column );
            });
            $scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            // $scope.colFilter.condition =2;
            if($scope.colFilter.listTerm.length==1)
            {
                $scope.colFilter.condition = uiGridConstants.filter.EXACT;
            }
            else {

                $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            }



            if ($elm) {
                $elm.remove();
            }
        };


        $scope.reset = function() {
            var columns = $scope.gridApi.selection.getSelectedRows();
            $scope.colFilter.listTerm = [];
            $scope.filternull="";

            $scope.colFilter.term = "";
            if($scope.colFilter.term.length>0)
            {
                $scope.showitem=false;
            }
            else {
                $scope.showitem=true;
            }
            $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
            $scope.gridApi.selection.clearSelectedRows();
            if ($elm) {
                $elm.remove();
            }
        };
        if( $scope.showitem==false){
        }
    }).directive('filterCustomModal', function() {


        return {
            restrict: "A",
                template: '<div style="font-size: 14px; padding-right: 0px; padding-bottom: 2px;float: right !important;" ><md-icon class="pull-left" ng-if="showitem" style="font-size: 14px;color: silver;"  ng-click="showFilterModal()">filter_list</md-icon> <md-icon class="pull-left" ng-if="!showitem" style="font-size: 14px;font-weight: bold;color: #008080;" ng-click="showFilterModal()">filter_list</md-icon> </div>',
              controller: 'AppuserColumnFilterModalCtrl',

        };
    });// Appuser Area Controller

}).call(this);

===================================

HTML

in gridoption:
       Let columndefination:       {
                 field: 'columnname',
                    displayName: 'CONTROLLER_GRID_COLUMNNAME',
                    placeholder: 'CONTROLLER_GRID_COLUMNNAME',
                    headerTooltip:
                        function( col ) {
                            return ' ' + col.displayName;
                        },
                    headerCellFilter: 'translate',
                    filterHeaderTemplate: '<div class="uigrid-customfilter" ng-repeat="colFilter in col.filters"><div filter-custom-modal style="right !important;"></div></div>',
}

Collectives™ on Stack Overflow

Angular UI-Grid Custom Filter Button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related