If you have been working on AngularJS you must have come across a business requirement to display data in a tabular format with all basic features such as “sorting”, “filtering”, “pagination”, “showing / hiding columns”, “exporting data,” etc. Well, most developers have their own preference for executing the stated requirement using their beloved plugin. Some of the mostly preferred plugins are UiGrid, JqGrid, DataTables, and Smart Table etc.

I’m very fond of using UI-Grid for handling the above requirement. If you are not aware of what UI-Grid is please take a look at the below link.

In this article we’ll discuss about how we can create a custom multi-select filter for UI-Grid. By default UI-Grid provides us with a single selection filter. Take a look at the below link which describes how we can use single selection filter in UI-Grid.

http//ui-grid.info/docs/#/tutorial/103_filtering

In one of my project requirements I came across a situation where we need a multi-select filter for filtering UI-Grid data. The main advantage of UI-Grid is that it is fully extensible. You are free to customize each and every part of the UI-Grid right from the top headers columns template to the page navigation template of the UI-Grid. In this article we’ll be customizing the default filterHeaderTemplate template with our custom one. Our final application will look like the below figure.

data

Note

  1. Two of the filters are custom multi-select and the salary filter is the default single select filter.
  2. For Multi-select filter I’m going to use the Angular dropdown multi-select plugin. For more information about this plugin please go thorough the below link

To help you understand the concept I’m going to use AngularJs(1.x), Typescript as my technology stack and for editor I’m using VS2015. So let’s get started.

I’ve created a VS2015 empty Asp.NET web application solution named “UiGridCustomFilter”. Now we’ll add our required technology stack i.e. A ngularJs and Typescript. Below is how I built my application architecture.

data

Just to give a brief description, our application architecture contains the below files/folders

  1. “app” is the main folder for the AngularJs application. It contains Angular main module registration and we register our application’s sub modules i.e. app.core, app.widgets&app.modulesetc
  2. “app.core” where we register our third party librariesangular module as dependency
  3. “app.route” is the application routing file
  4. “app.config” is the application configuration file
  5. “assets” is the container for application “css”, “js”, “imgs” & “libs”
  6. “modules” is the container for application modules such as “home”, “menus” etc
  7. “modules.module.ts” contains angular module registration
  8. “widgets” is the container for application reusable components/directives
  9. “widgets.module.ts” contains angular module registration
  10. “Scripts/typings” is folder which contains our d.ts. files

We are done setting up our application framework, now we are ready for coding. To start with I’ve created a Ts file with named “app.ts” which is the bootstrap of our application and also for folders named “modules” & “widgets” we’ve created a ts files named “modules.module.ts” & “widgets.module.ts”. All these files basically register Angular module with Javascript IIFE (Immediately invoked function expression).

App.ts

Main application file. Here we reigster the sub modules i.e. core, widgets etc.

  1. (() void => {
  2. "use strict";
  3. angular.module("app", [
  4. /application dependencies/
  5. "app.core", "app.widgets", "app.modules",
  6. ]);
  7. })();
App.core.ts

Registers an angular module named "app.core".

In this module we list our angular as well as any third party plugins we'll be using in this application.
  1. /*
  2. Registers an angular module named "app.core".
  3. In this module we list our angular as well as any third party plugins we'll be using in this application.
  4. */
  5. (() void => {
  6. "use strict";
  7. angular.module("app.core", [
  8. /*modules or Libraries used*/
  9. 'ui.router', 'ui.grid', 'ui.grid.pagination', 'ui.grid.pinning', 'ui.grid.resizeColumns', 'ui.grid.autoResize', 'ui.grid.exporter', 'ui.grid.selection',
  10. //For multiselect control we are using angularjs-Dropdown-Multiselect plugin.
  11. 'angularjs-dropdown-multiselect',
  12. ]);
  13. })();
  14. App.Route.ts
  15. //JS IIFE
  16. (() void => {
  17. "use strict";
  18. /*
  19. Angular Route Configuration class.
  20. */
  21. angular.module("app").config(routeConfig);
  22. //Injecting the dependencies
  23. routeConfig.$inject = ["$stateProvider"];
  24. functionrouteConfig($stateProvider ng.ui.IStateProvider) {
  25. $stateProvider.state('index', {
  26. url "/index",
  27. templateUrl "app/index.html",
  28. controller "indexController",
  29. controllerAs "idxc"
  30. })
  31. }
  32. });
  33. Modules.module.ts
  34. /*
  35. Registers an angular module named "app.modules".
  36. */
  37. (() void => {
  38. "use strict";
  39. angular.module("app.modules", [
  40. /*modules or Libraries used*/
  41. ]);
  42. })();
  43. Widgets.module.ts
  44. /*
  45. Registers an angular module named "app.widgets".
  46. */
  47. (() void => {
  48. "use strict";
  49. angular.module("app.widgets", [
  50. /*modules or Libraries used*/
  51. ]);
  52. })();
  53. Note“ Typescript modules” has no relation with“ angular modules” & vice versa.
  54. Now we’ ll create our reusable directive in widgets / uigrid - multiselectddl folder with name“ uigrid - multiselectddl.directive.ts”.This directive will be used
  55. for displaying custom multi - select in the ui - grid filter header template.Below is the code snippet
  56. for the same.
  57. uigrid - multiselectddl.directive.ts
  58. moduleapp.widgets.uigrid.multiselectddl {
  59. "use strict";
  60. interfaceIDropDown {
  61. id number;
  62. label string;
  63. $$hashKey ? string;
  64. }
  65. /**
  66. * DropDown
  67. */
  68. classDropDownimplementsIDropDown {
  69. id number;
  70. label string;
  71. $$hashKey string;
  72. constructor(id number, label string, $$hashKey ? string) {
  73. this.id = id;
  74. this.label = label;
  75. this.$$hashKey = $$hashKey
  76. }
  77. }
  78. interfaceIMultiSelectDDLDirectiveScopeextendsng.IScope {
  79. selectedDataModel IDropDown[];
  80. eventListeners Object;
  81. extraSettings Object;
  82. checkboxes boolean;
  83. colFilter uiGrid.IFilterOptions;
  84. }
  85. /**
  86. * MultiSelectDDL Directive Controller Class.
  87. */
  88. classMultiSelectDDLController {
  89. static $inject = ["$scope", "uiGridConstants"];
  90. constructor(private $scope IMultiSelectDDLDirectiveScope, privateuiGridConstants uiGrid.IUiGridConstants) {
  91. let self = this;
  92. //initializing the selectedModel to empty array
  93. $scope.selectedDataModel = [];
  94. //binding the events
  95. $scope.eventListeners = {
  96. /**
  97. * Func for item Select
  98. * @paramcheckedItem Selected Item Label
  99. */
  100. onItemSelect(checkedItem string) => {
  101. self.doFilter();
  102. },
  103. /**
  104. * Func for item Deselect
  105. * @paramuncheckedItem Deselected Item Label
  106. */
  107. onItemDeselect(unCheckedItem string) => {
  108. self.doFilter();
  109. },
  110. /**
  111. * Func for select all elements
  112. */
  113. onSelectAll() => {
  114. self.doFilter();
  115. },
  116. /**
  117. * Func for deselecting all elements
  118. */
  119. onDeselectAll(sendEvent any) => {
  120. //emptying the array
  121. self.$scope.selectedDataModel.splice(0, self.$scope.selectedDataModel.length);
  122. self.doFilter();
  123. }
  124. };
  125. //extra Settings for the MultiSelect control
  126. $scope.extraSettings = {
  127. externalIdProp '',
  128. displayProp 'label',
  129. idProp 'value',
  130. showCheckAll true,
  131. showUncheckAll true,
  132. buttonDefaultText "",
  133. scrollable false,
  134. buttonClasses "btnfilterBtn"
  135. }
  136. }
  137. /**
  138. * Func for filter UI-Grid Data
  139. */
  140. doFilter() {
  141. let self = this;
  142. self.$scope.colFilter.term = self.$scope.selectedDataModel.map(function(element) {
  143. returnelement.label
  144. }).join(",")
  145. self.$scope.colFilter.condition = newRegExp(self.$scope.selectedDataModel.map(function(element) {
  146. returnelement.label
  147. }).join("|"));
  148. }
  149. }
  150. /**
  151. * AngularJsMultiSelectDropDown Directive
  152. */
  153. exportclassMultiSelectDDLDirectiveimplementsng.IDirective {
  154. //Restricting the directive to be used as either "element" or "attribute"
  155. public restrict string = "EA";
  156. //view for the directive
  157. publictemplateUrl string = "widgets/uigrid-multiselectddl/uigrid-multiselectddl.html";
  158. //replace property of directive
  159. public replace = false;
  160. //default scope i.e. Shared scope
  161. public scope = false;
  162. //controller for the directive
  163. controller = MultiSelectDDLController;
  164. //default constructor
  165. constructor() {}
  166. static instance() ng.IDirective {
  167. returnnewMultiSelectDDLDirective();
  168. }
  169. }
  170. //Registering the directive with app.widgets angular module
  171. angular.module("app.widgets").directive("app.widgets.uigrid.multiselect", MultiSelectDDLDirective.instance);
  172. }
  173. uigrid - multiselectddl.directive.html < div > < style > div.dropdown - multiselect > ul.dropdown - menu > liaspan {
  174. font - weight bold;
  175. color black!important;
  176. } < /style> < divname = "multiDDL"
  177. ng - dropdown - multiselect = ""
  178. options = "colFilter.selectOptions"
  179. selected - model = "selectedDataModel"
  180. events = "eventListeners"
  181. extra - settings = "extraSettings"
  182. checkboxes = "true" > < /div> < /div>
Now we’ll head towards creating our indexController.ts which will be a part of modules/home folder.

Index.controller.ts
  1. moduleapp.modules {
  2. /
  3. Used for converting boolean string representation to Boolean value
  4. /
  5. classStringToBooleanConverter {
  6. static Convert(value string) boolean {
  7. return (value === "true");
  8. }
  9. }
  10. /
  11. Dropdown option and value
  12. /
  13. interfaceIOption {
  14. value string;
  15. label string;
  16. }
  17. /
Employee Model
  1. interfaceIEmployee {
  2. empId number;
  3. name string;
  4. age number;
  5. designation string;
  6. expertiseIn string;
  7. salary number;
  8. }
  9. /
UiGrid Column Definition

You can add more properties to this class as required which may include "custom properties" as well as "uiGrid Col definition" properties
  1. /
  2. interfaceIUiGridColDefinition {
  3. //#region uiGrid Properties"
  4. name string;
  5. displayName string;
  6. field string;
  7. filterHeaderTemplate ? string;
  8. cellClass ? string;
  9. cellFilter ? string;
  10. enableFiltering ? string;
  11. //#endregion
  12. //#region Custom Properties
  13. useCustomFilterHeaderTemplate ? string;
  14. //#endregion
  15. }
  16. interfaceIIndexController {
  17. gridApi uiGrid.IGridApi;
  18. gridOptions uiGrid.IGridOptions;
  19. dataSource IEmployee[];
  20. gridColumnDefinitions IUiGridColDefinition[];
  21. bindData() void;
  22. getGridSettings() void;
  23. configureGrid() void;
  24. }
  25. /
Index Controller
  1. classIndexControllerimplementsIIndexController {
  2. gridOptions uiGrid.IGridOptions;
  3. gridApi uiGrid.IGridApi;
  4. dataSource IEmployee[];
  5. gridColumnDefinitions IUiGridColDefinition[];
  6. static $inject = ["$scope", "$http", "$window", "uiGridConstants", "uiGridExporterConstants", "uiGridExporterService"];
  7. constructor(private $scope ng.IScope, private $http ng.IHttpService, private $window ng.IWindowService, privateuiGridConstants uiGrid.IUiGridConstants, privateuiGridExporterConstants uiGrid.exporter.IUiGridExporterConstants, privateuiGridExporterService uiGrid.exporter.IGridExporterApi) {
  8. let self = this;
  9. //initializing the dataSource to empty array
  10. self.dataSource = [];
  11. self.gridColumnDefinitions = [];
  12. //Initializing ui-Grid Options
  13. self.gridOptions = {
  14. excludeProperties['__metadata'],
  15. enableSorting true,
  16. showGridFooter true,
  17. showColumnFooter true,
  18. enableFiltering true,
  19. enableColumnResizing false,
  20. enablePinning false,
  21. enableHorizontalScrollbar true,
  22. minRowsToShow 10,
  23. enablePagination true,
  24. paginationPageSizes[10, 20, 30],
  25. paginationPageSize 10,
  26. rowHeight 22,
  27. multiSelect true,
  28. onRegisterApi
  29. function(gridApi uiGrid.IGridApi) {
  30. self.gridApi = gridApi;
  31. }
  32. }
  33. //load the grid settings
  34. self.getGridSettings();
  35. }
  36. /
GET the UI-Grid settings
  1. getGridSettings() void {
  2. let self = this;
  3. //forming the data.jsonurl
  4. letserviceUrl = self.$window.location.protocol + '//' + self.$window.location.hostname + (self.$window.location.port ? '' + self.$window.location.port '') + "/app/modules/home/grid.settings.json";
  5. self.$http.get(serviceUrl).then((successCallBack ng.IHttpPromiseCallbackArg < {} > ) => {
  6. if (successCallBack.status === 200 && successCallBack.data != null) {
  7. self.gridColumnDefinitions = < IUiGridColDefinition[] > successCallBack.data;
  8. self.bindData();
  9. }
  10. });
  11. }
  12. /
Get the Employee Data
  1. /
  2. bindData() void {
  3. let self = this;
  4. //forming the data.jsonurl
  5. letserviceUrl = self.$window.location.protocol + '//' + self.$window.location.hostname + (self.$window.location.port ? '' + self.$window.location.port '') + "/app/modules/home/data.json";
  6. //initially setting the columnDefs to an empty array;
  7. self.gridOptions.columnDefs = [];
  8. self.$http.get(serviceUrl).then((successCallBack ng.IHttpPromiseCallbackArg < {} > ) => {
  9. if (successCallBack.status === 200 && successCallBack.data != null) {
  10. console.log(successCallBack.data);
  11. self.dataSource = < IEmployee[] > successCallBack.data;
  12. self.configureGrid();
  13. }
  14. });
  15. }
  16. /
Configuring the Grid
  1. /
  2. configureGrid() void {
  3. let self = this;
  4. let props = Object.keys(self.dataSource[0]);
  5. console.log(props);
  6. for (let prop of props) {
  7. //Defining column definition
  8. letcolDef uiGrid.IColumnDefOf < any > = {
  9. name prop,
  10. field prop,
  11. enablePinning false,
  12. cellTooltip true,
  13. enableColumnResizing true,
  14. enableHiding false
  15. }
  16. $.each(self.gridColumnDefinitions, function(index, jsonObject) {
  17. if (jsonObject.name == prop) {
  18. colDef.displayName = jsonObject.displayName;
  19. colDef.cellClass = jsonObject.cellClass;
  20. colDef.cellFilter = jsonObject.cellFilter;
  21. if (StringToBooleanConverter.Convert(jsonObject.enableFiltering)) {
  22. let options IOption[] = [];
  23. //iterating over the dataSource for building options dynamically
  24. $.each(self.dataSource, function(index, objModel) {
  25. if (objModel[prop] != null) {
  26. if (options.length == 0) {
  27. options.push({
  28. value objModel[prop],
  29. label objModel[prop]
  30. });
  31. } else {
  32. letoptionAlreadyExists boolean = false;
  33. $.each(options, function(idx, objOption) {
  34. if (objOption.label == objModel[prop]) {
  35. optionAlreadyExists = true;
  36. //breaking the looop
  37. returnfalse;
  38. }
  39. });
  40. if (!optionAlreadyExists) {
  41. options.push({
  42. value objModel[prop],
  43. label objModel[prop]
  44. });
  45. }
  46. }
  47. }
  48. });
  49. //sorting the options array
  50. options = options.sort((a, b) => {
  51. if (a.label > b.label) {
  52. return 1;
  53. }
  54. if (a.label < b.label) {
  55. return -1;
  56. }
  57. return 0;
  58. });
  59. //forming the column filter
  60. colDef.filter = {
  61. term '',
  62. placeholder jsonObject.name,
  63. selectOptions options,
  64. }
  65. if (StringToBooleanConverter.Convert(jsonObject.useCustomFilterHeaderTemplate)) {
  66. //overriding the default template
  67. colDef.filterHeaderTemplate = jsonObject.filterHeaderTemplate;
  68. } else {
  69. //use the default template for dropdown filter i.e.single select
  70. colDef.filter.type = self.uiGridConstants.filter.SELECT;
  71. }
  72. } else {
  73. colDef.enableFiltering = false;
  74. }
  75. //for breaking the $.each loop once we are done with the current property been iterated
  76. returnfalse;
  77. }
  78. });
  79. //adding the column definition to the gridOption
  80. self.gridOptions.columnDefs.push(colDef);
  81. }
  82. //binding the datasource to the grid data.
  83. self.gridOptions.data = self.dataSource;
  84. }
  85. }
  86. //Registering the angular Controller with angular module named "app.modules"
  87. angular.module("app.modules").controller("indexController", IndexController);
  88. }
Note
  1. For the sake of simplicity I’m using json file which is holding some dummy employee details. I’ve created this file inside the modules/home folder with name “data.json”.
  2. Also I’ve created “grid.settings.json” which is holding the UI-Grid column definition settings such as the column name, column header css, footer css, any custom filter needs to be applied on column etc. It’s not mandatory to create this file, but it provides me more easy maintenance instead of hardcoding things at the controller level. Inside this file we are setting the Filter Header template for ui-grid column “Expertise-In” & “Designation”. Please look at this file for more information.
  3. Both these files have been loaded in index.controller.ts using $http service.

Grid.settings.json

  1. {
  2. "empId" {
  3. "cellClass"
  4. "ui-grid-number-cell", "cellFilter"
  5. "number", "displayName"
  6. "Emp ID", "enableFiltering"
  7. "false", "field"
  8. "{{COL_FIELD}}", "name"
  9. "empId"
  10. }, "name" {
  11. "cellClass"
  12. "ui-grid-cell", "displayName"
  13. "Name", "enableFiltering"
  14. "false", "field"
  15. "{{COL_FIELD}}", "name"
  16. "name"
  17. }, "age" {
  18. "cellClass"
  19. "ui-grid-number-cell", "cellFilter"
  20. "number", "displayName"
  21. "Age", "enableFiltering"
  22. "false", "field"
  23. "{{COL_FIELD}}", "name"
  24. "age"
  25. }, "expertiseIn" {
  26. "cellClass"
  27. "ui-grid-cell", "displayName"
  28. "Expertise In", "enableFiltering"
  29. "true", "filterHeaderTemplate"
  30. "<div class='ui-grid-filter-container' ng-repeat='colFilter in col.filters'><app.widgets.uigrid.multiselect></app.widgets.uigrid.multiselect></div>", "useCustomFilterHeaderTemplate"
  31. "true", "field"
  32. "{{COL_FIELD}}", "name"
  33. "expertiseIn"
  34. }, "designation" {
  35. "cellClass"
  36. "ui-grid-cell", "displayName"
  37. "Designation", "enableFiltering"
  38. "true", "field"
  39. "{{COL_FIELD}}", "filterHeaderTemplate"
  40. "<div class='ui-grid-filter-container' ng-repeat='colFilter in col.filters'><app.widgets.uigrid.multiselect></app.widgets.uigrid.multiselect></div>", "useCustomFilterHeaderTemplate"
  41. "true", "name"
  42. "designation"
  43. }, "salary" {
  44. "cellClass"
  45. "ui-grid-number-cell", "cellFilter"
  46. "number", "displayName"
  47. "Salary", "enableFiltering"
  48. "true", "field"
  49. "{{COL_FIELD}}", "useCustomFilterHeaderTemplate"
  50. "false", "name"
  51. "salary"
  52. }
  53. }
Here is our index.html
  1. <!DOCTYPEhtml>
  2. <htmlng-app="app">
  4. <head>
  5. <title>Index</title>
  6. <metaname="viewport" content="width=device-width, initial-scale=1.0" />
  7. <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <metahttp-equiv="X-UA-Compatible" content="IE=edge">
  9. <linkhref="favicon.ico" rel="shortcut icon" type="image/x-icon" />
  10. <linkhref="assets/libs/bootstrap/bootstrap.min.css" rel="stylesheet" />
  11. <linkhref="assets/libs/angular-ui/ui-bootstrap-csp.css" rel="stylesheet" />
  12. <linkhref="assets/css/ui-grid/ui-grid.min.css" rel="stylesheet" />
  13. <linkhref="assets/css/angular-dropdown-multiselect/angular-dropdown-multiselect.css" rel="stylesheet" />
  14. <linkhref="assets/libs/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  15. <linkhref="assets/css/site.css" rel="stylesheet" />
  16. <scriptsrc="assets/libs/angularjs/angular.min.js">
  17. </script>
  18. <scriptsrc="assets/libs/jquery/jquery-1.10.2.min.js">
  19. </script>
  20. <scriptsrc="assets/libs/bootstrap/bootstrap.min.js">
  21. </script>
  22. <scriptsrc="assets/libs/angular-ui/ui-bootstrap.min.js">
  23. </script>
  24. <scriptsrc="assets/libs/angularjs/angular-ui-router.min.js">
  25. </script>
  26. <scriptsrc="assets/js/ui-grid/ui-grid.min.js">
  27. </script>
  28. <scriptsrc="assets/js/loadash/loadash.min.js">
  29. </script>
  30. <scriptsrc="assets/js/angular-dropdown-multiselect/angular-dropdown-multiselect.min.js">
  31. </script>
  32. <scriptsrc="app.js">
  33. </script>
  34. <scriptsrc="app.config.js">
  35. </script>
  36. <scriptsrc="app.core.js">
  37. </script>
  38. <scriptsrc="app.route.js">
  39. </script>
  40. <scriptsrc="widgets/widgets.module.js">
  41. </script>
  42. <scriptsrc="modules/modules.module.js">
  43. </script>
  44. <scriptsrc="widgets/uigrid-multiselectddl/uigrid-multiselectddl.directive.js">
  45. </script>
  46. <scriptsrc="modules/home/index.controller.js">
  47. </script>
  48. </head>
  49. <bodyng-controller="indexControllerasidxc">
  50. <divclass="container" style="margin-top150px;">
  51. <divclass="row">
  52. <divclass="col-lg-12">
  53. <divid="grid1" ui-grid="idxc.gridOptions" ui-grid-paginationui-grid-pinningui-grid-resize-columnsui-grid-exporterui-grid-auto-resizeclass="ui-grid">
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </body>
  60. </html>
Please run the application and you’ll be able to see the below output.

data

On checking of any item it will filter out the UI-Grid data.

data

Here is the filtered output

data

Also you could simply try to use another filter too which will further restrict the UI-Grid data.

data