Angular

How To Create A Custom Multi-Select Filter For UI Grid In AngularJS 1.x

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">  
  3.   
  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>  
  59.   
  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 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs