Angular

Filtering In UI-Grid With AngularJS And WebAPI

If you would like to know how to get started with UI-Grid and how to set up a project in AngularJS and Web API, read the articles given below first.

Once we are done with displaying the data in UI-Grid, using Web API, let’s do Filter functionality. Here is my grid with all the data and other features.

Single Filter

Provide a Single Filter box, which searches across the multiple columns in the grid.

Add a new input and a button above the grid.

  1. <div ng-app="employeeapp" ng-controller="employeecontroller"> <input ng-model='filterValue' /><button ng-click='filter()'>Filter</button>  
  2.     <div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid" ui-grid-auto-resize> </div>  
  3. </div>  

Module

  1. //Module  
  2. var employeeapp = angular.module('employeeapp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);  

Service

  1. //Service  
  2. employeeapp.service("employeeservice", function($http) {  
  3.     //Function to call get genre web api call  
  4.     this.GetEmployee = function() {  
  5.         var req = $http.get('api/EmployeesAPI');  
  6.         return req;  
  7.     }  
  8. });  

Controller

  1. //Controller  
  2. employeeapp.controller("employeecontroller", function($scope, employeeservice, $filter, $window, $interval) {  
  3.     GetEmployee();  
  4.   
  5.     function GetEmployee() {  
  6.         employeeservice.GetEmployee().then(function(result) {  
  7.             $scope.Employees = result.data;  
  8.             console.log($scope.Employees);  
  9.         }, function(error) {  
  10.             $window.alert('Oops! Something went wrong while fetching genre data.');  
  11.         })  
  12.     }  
  13.     //Columns  
  14.     $scope.columnDefs = [{  
  15.         name: 'photo',  
  16.         enableSorting: false,  
  17.         field: 'PhotoPath',  
  18.         cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>",  
  19.         enableCellEdit: false,  
  20.         enableFiltering: false  
  21.     }, {  
  22.         name: 'First Name',  
  23.         field: 'FirstName',  
  24.         headerCellClass: 'tablesorter-header-inner',  
  25.         enableCellEdit: true,  
  26.         enableFiltering: true  
  27.     }, {  
  28.         name: 'Last Name',  
  29.         field: 'LastName',  
  30.         headerCellClass: 'tablesorter-header-inner',  
  31.         enableCellEdit: true,  
  32.         enableFiltering: true  
  33.     }, {  
  34.         name: 'Title',  
  35.         field: 'Title',  
  36.         headerCellClass: 'tablesorter-header-inner',  
  37.         enableCellEdit: true,  
  38.         enableFiltering: false  
  39.     }, {  
  40.         name: 'City',  
  41.         field: 'City',  
  42.         headerCellClass: 'tablesorter-header-inner',  
  43.         enableCellEdit: true,  
  44.         enableFiltering: true  
  45.     }, {  
  46.         name: 'Country',  
  47.         field: 'Country',  
  48.         headerCellClass: 'tablesorter-header-inner',  
  49.         enableCellEdit: true,  
  50.         enableFiltering: true  
  51.     }, {  
  52.         name: 'Notes',  
  53.         field: 'Notes',  
  54.         headerCellClass: 'tablesorter-header-inner',  
  55.         enableCellEdit: true,  
  56.         enableFiltering: false  
  57.     }];  
  58.     //Used to bind ui-grid  
  59.     $scope.gridOptions = {  
  60.         enableFiltering: false,  
  61.         onRegisterApi: function(gridApi) {  
  62.             $scope.gridApi = gridApi;  
  63.             $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);  
  64.         },  
  65.         columnDefs: $scope.columnDefs,  
  66.         data: 'Employees',  
  67.     };  
  68.     $scope.filter = function() {  
  69.         $scope.gridApi.grid.refresh();  
  70.     };  
  71.     $scope.singleFilter = function(renderableRows) {  
  72.         var matcher = new RegExp($scope.filterValue);  
  73.         renderableRows.forEach(function(row) {  
  74.             var match = false;  
  75.             ['FirstName', 'LastName'].forEach(function(field) {  
  76.                 if (row.entity[field].match(matcher)) {  
  77.                     match = true;  
  78.                 }  
  79.             });  
  80.             if (!match) {  
  81.                 row.visible = false;  
  82.             }  
  83.         });  
  84.         return renderableRows;  
  85.     };  
  86. });  

You can filter by name or any character by typing in textbox and click Filter.

Inline Filter

Let’s see how we can make use of an Inline Filter by every column of the grid.

Add the code given below on Controller.

  1. //Columns  
  2. $scope.columnDefs = [{  
  3.     name: 'photo',  
  4.     enableSorting: false,  
  5.     field: 'PhotoPath',  
  6.     cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>",  
  7.     enableCellEdit: false,  
  8.     enableFiltering: false  
  9. }, {  
  10.     name: 'First Name',  
  11.     field: 'FirstName',  
  12.     headerCellClass: 'tablesorter-header-inner',  
  13.     enableCellEdit: true,  
  14.     enableFiltering: true  
  15. }, {  
  16.     name: 'Last Name',  
  17.     field: 'LastName',  
  18.     headerCellClass: 'tablesorter-header-inner',  
  19.     enableCellEdit: true,  
  20.     enableFiltering: true  
  21. }, {  
  22.     name: 'Title',  
  23.     field: 'Title',  
  24.     headerCellClass: 'tablesorter-header-inner',  
  25.     enableCellEdit: true,  
  26.     enableFiltering: false  
  27. }, {  
  28.     name: 'City',  
  29.     field: 'City',  
  30.     headerCellClass: 'tablesorter-header-inner',  
  31.     enableCellEdit: true,  
  32.     enableFiltering: true  
  33. }, {  
  34.     name: 'Country',  
  35.     field: 'Country',  
  36.     headerCellClass: 'tablesorter-header-inner',  
  37.     enableCellEdit: true,  
  38.     enableFiltering: true  
  39. }, {  
  40.     name: 'Notes',  
  41.     field: 'Notes',  
  42.     headerCellClass: 'tablesorter-header-inner',  
  43.     enableCellEdit: true,  
  44.     enableFiltering: false  
  45. }];  
  46. //Used to bind ui-grid  
  47. //$scope.selectedItem = null;  
  48. $scope.gridOptions = {  
  49.     //For inline filter  
  50.     enableRowSelection: true,  
  51.     paginationPageSizes: [5, 10, 20, 30, 40],  
  52.     paginationPageSize: 10,  
  53.     enableSorting: true,  
  54.     enableFiltering: true,  
  55.     enableSelectAll: false,  
  56.     columnDefs: $scope.columnDefs,  
  57.     data: 'Employees',  
  58. };  

As you can see in the screenshot, first name, last name, city and country has enabled Filter option. Now, type something in any textbox.

Or

Type some text in City and Country field.

Conclusion

In this article, we have seen how to use filter data, using Angular UI-Grid with Web API with an Entity Framework in MVC. If you have any question or comments, drop me a line in the comments section.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found