/**
 * Grid Filtering spec document
 */ import { EventHandler , ChildProperty , EmitType , Browser } from '@syncfusion/ej2-base' ; import { extend , getValue } from '@syncfusion/ej2-base' ; import { createElement , remove } from '@syncfusion/ej2-base' ; import { Grid , FilterSettings } from '../../../src/grid/base/grid' ; import { StringFilterUI } from '../../../src/grid/renderer/string-filter-ui' ; import { Filter } from '../../../src/grid/actions/filter' ; import { FilterMenuRenderer } from '../../../src/grid/renderer/filter-menu-renderer' ; import { ColumnMenu } from '../../../src/grid/actions/column-menu' ; import { Group } from '../../../src/grid/actions/group' ; import { Sort } from '../../../src/grid/actions/sort' ; import { Reorder } from '../../../src/grid/actions/reorder' ; import { Page } from '../../../src/grid/actions/page' ; import { CellType } from '../../../src/grid/base/enum' ; import { ValueFormatter } from '../../../src/grid/services/value-formatter' ; import { Column } from '../../../src/grid/models/column' ; import { Selection } from '../../../src/grid/actions/selection' ; import { DropDownList , AutoComplete } from '@syncfusion/ej2-dropdowns' ; import { DatePicker , DateTimePicker } from '@syncfusion/ej2-calendars' ; import { NumericTextBox } from '@syncfusion/ej2-inputs' ; import { Query , DataManager } from '@syncfusion/ej2-data' ; import { filterData } from '../base/datasource.spec' ; import '../../../node_modules/es6-promise/dist/es6-promise' ; import { createGrid , destroy , getKeyUpObj , getClickObj , getKeyActionObj } from '../base/specutil.spec' ; Grid . Inject ( Filter , Page , Selection , Group , Sort , Reorder , ColumnMenu ) ; describe ( 'filter menu module =>' , ( ) => { let gridObj ; describe ( 'filter menu with ui render test =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'filter icon render based on column visibility' , ( ) => { expect ( gridObj . element . querySelectorAll ( '.e-icon-filter' ) . length ) . toBeLessThan ( gridObj . getColumns ( ) . length ) ; } ) ; it ( 'number filter ui render testing' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let flm = new FilterMenuRenderer ( gridObj , gridObj . filterSettings as FilterSettings , gridObj . serviceLocator ) ; expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; let element ; let numberuiObj = document . querySelector ( '#numberui-' + gridObj . getColumns ( ) [ 0 ] . uid ) [ instances ] [ 0 ] ; numberuiObj . value = 10248 ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns [ 0 ] . field ) . toEqual ( 'OrderID' ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 1 ) ; element = gridObj . element . querySelectorAll ( '.e-icon-filter' ) [ 0 ] ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'number filter functionalites testing' , ( done ) => { let instances = 'ej2_instances' ; actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let numberuiObj1 = document . querySelector ( '#numberui-' + gridObj . getColumns ( ) [ 0 ] . uid ) [ instances ] [ 0 ] ; expect ( gridObj . filterSettings . columns [ 0 ] . value ) . toEqual ( numberuiObj1 . value ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-cancelbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'string filter ui render testing' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; let struiObj = document . querySelector ( '#strui-' + gridObj . getColumns ( ) [ 1 ] . uid ) [ instances ] [ 0 ] ; struiObj . value = 'Vinet' ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns [ 0 ] . field ) . toEqual ( 'CustomerID' ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 1 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'string filter functionalites testing' , ( done ) => { let instances = 'ej2_instances' ; actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let struiObj1 = document . querySelector ( '#strui-' + gridObj . getColumns ( ) [ 1 ] . uid ) [ instances ] [ 0 ] ; expect ( gridObj . filterSettings . columns [ 0 ] . value ) . toEqual ( struiObj1 . value ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-cancelbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'string filter with null values' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; gridObj . clearFiltering ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'string filter with model value retain' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let args = { column : gridObj . getColumns ( ) [ 1 ] , filteredValue : '' } ; let strUI = new StringFilterUI ( gridObj , gridObj . serviceLocator , gridObj . filterSettings as FilterSettings ) ; strUI . write ( args ) ; gridObj . clearFiltering ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'date filter ui render testing' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; let element ; let dateObj = document . querySelector ( '#dateui-' + gridObj . getColumns ( ) [ 3 ] . uid ) [ instances ] [ 0 ] ; dateObj . value = new Date ( '07/4/1996' ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns [ 0 ] . field ) . toEqual ( 'OrderDate' ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 1 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderDate' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'date filter functionalites testing' , ( done ) => { let instances = 'ej2_instances' ; let element ; actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let dateObj1 = document . querySelector ( '#dateui-' + gridObj . getColumns ( ) [ 3 ] . uid ) [ instances ] [ 0 ] ; expect ( gridObj . filterSettings . columns [ 0 ] . value . toString ( ) ) . toEqual ( dateObj1 . value . toString ( ) ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-cancelbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderDate' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'date filter with null values' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; gridObj . clearFiltering ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderDate' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'boolean filter ui render testing' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; let boolObj = document . querySelector ( '#bool-ui-' + gridObj . getColumns ( ) [ 4 ] . uid ) [ instances ] [ 0 ] ; boolObj . value = 'true' ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns [ 0 ] . field ) . toEqual ( 'Verified' ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 1 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'Verified' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'boolean filter functionalites testing' , ( done ) => { let instances = 'ej2_instances' ; actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( gridObj . filterSettings . columns [ 0 ] . value ) . toEqual ( gridObj . filterSettings . columns [ 0 ] . value ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-cancelbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 0 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'Verified' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; describe ( 'filter menu with datetime filtering  =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' , type : 'datetime' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'datetime filter ui render testing' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; let element ; let dateObj = document . querySelector ( '#dateui-' + gridObj . getColumns ( ) [ 3 ] . uid ) [ instances ] [ 0 ] ; dateObj . value = new Date ( ) ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns [ 0 ] . field ) . toEqual ( 'OrderDate' ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 1 ) ; gridObj . actionBegin = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderDate' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; describe ( 'filter menu with multiple filtering  =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'mutipe filter testing string column' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let instances = 'ej2_instances' ; let struiObj = document . querySelector ( '#strui-' + gridObj . getColumns ( ) [ 1 ] . uid ) [ instances ] [ 0 ] ; struiObj . value = 'Vinet' ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 1 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'mutipe filter testing number column' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { let instances = 'ej2_instances' ; let numberuiObj = document . querySelector ( '#numberui-' + gridObj . getColumns ( ) [ 0 ] . uid ) [ instances ] [ 0 ] ; numberuiObj . value = 10248 ; ( < HTMLInputElement > document . querySelector ( '.e-flmenu-okbtn' ) ) . click ( ) ; expect ( gridObj . element . querySelectorAll ( '.e-filtered' ) . length ) . toBe ( 2 ) ; expect ( gridObj . filterSettings . columns . length ) . toBe ( 2 ) ; expect ( gridObj . filterSettings . columns [ 0 ] . value ) . toBe ( 'Vinet' ) ; expect ( gridObj . filterSettings . columns [ 1 ] . value ) . toBe ( 10248 ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'OrderID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; describe ( 'reorder column with filtering menu  =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , allowReordering : true , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'reorder columns with filtering menu=>' , ( ) => { gridObj . reorderColumns ( 'OrderID' , 'CustomerID' ) ; expect ( gridObj . element . querySelectorAll ( '.e-icon-filter' ) . length ) . toBeLessThan ( gridObj . getColumns ( ) . length ) ; gridObj . reorderColumns ( 'Freight' , 'Verified' ) ; expect ( gridObj . element . querySelectorAll ( '.e-icon-filter' ) . length ) . toBeLessThan ( gridObj . getColumns ( ) . length ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; describe ( 'DataManager with filtering menu  =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : new DataManager ( filterData ) , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , allowReordering : true , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'DataManager with string column filtering menu=>' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; it ( 'DataManager with boolean column filtering menu' , ( done ) => { let instances = 'ej2_instances' ; actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; let instances = 'ej2_instances' ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'Verified' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; describe ( 'filtering menu with column type  =>' , ( ) => { let gridObj ; let androidPhoneUa = 'Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JWR66Y) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.92 Safari/537.36' ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { Browser . userAgent = androidPhoneUa ; gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' } , allowReordering : true , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' , filter : { type : 'Menu' } } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' , filter : { type : 'CheckBox' } } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'filtering menu open based on its column type =>' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { let desktop = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36' ; Browser . userAgent = desktop ; destroy ( gridObj ) ; } ) ; } ) ; describe ( 'filtering menu template and custom filter operators  =>' , ( ) => { let gridObj ; let actionBegin ; let actionComplete ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : filterData , allowFiltering : true , allowPaging : true , filterSettings : { type : 'Menu' , operators : { stringOperator : [ { value : 'startsWith' , text : 'starts with' } , { value : 'endsWith' , text : 'ends with' } , { value : 'contains' , text : 'contains' } ] , numberOperator : [ { value : 'equal' , text : 'equal' } ] } } , allowReordering : true , columns : [ { field : 'OrderID' , type : 'number' } , { field : 'CustomerID' , type : 'string' , filter : { ui : { create : ( args ) => { let db = new DataManager ( filterData ) ; let flValInput = createElement ( 'input' , { className : 'flm-input' } ) ; args . target . appendChild ( flValInput ) ; this . dropInstance = new DropDownList ( { dataSource : new DataManager ( filterData ) , fields : { text : 'CustomerID' , value : 'CustomerID' } , placeholder : 'Select a value' , popupHeight : '200px' } ) ; this . dropInstance . appendTo ( flValInput ) ; } , write : ( args ) => { this . dropInstance . value = args . filteredValue ; } , read : ( args ) => { args . fltrObj . filterByColumn ( args . column . field , args . operator , this . dropInstance . value ) ; } } } } , { field : 'Freight' , format : 'C2' , type : 'number' , allowFiltering : false } , { field : 'OrderDate' , format : 'yMd' } , { field : 'Verified' } ] , actionBegin : actionBegin , actionComplete : actionComplete } , done ) ; } ) ; it ( 'custom control with filtering menu =>' , ( done ) => { actionComplete = ( args ? ) : void => { if ( args . requestType === 'filterafteropen' ) { expect ( ( gridObj . filterModule as any ) . filterModule . isDialogOpen ) . toEqual ( true ) ; gridObj . actionComplete = null ; done ( ) ; } } ; gridObj . actionComplete = actionComplete ; ( gridObj . filterModule as any ) . filterIconClickHandler ( getClickObj ( gridObj . getColumnHeaderByField ( 'CustomerID' ) . querySelector ( '.e-filtermenudiv' ) ) ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; } ) ; } ) ; } ) ;