@refinitiv-ui/efx-grid 6.0.83 → 6.0.84

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -1,15 +1,14 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { FilterBuilder, stringToDateObject } from "../../tr-grid-util/es6/FilterBuilder.js";
 import { FilterOperators } from "../../tr-grid-util/es6/FilterOperators.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { injectCss, prettifyCss, cloneObject } from "../../tr-grid-util/es6/Util.js";
+
 /** @event RowFilteringPlugin#click
 * @description click event is dispatched when a user clicks the column filter icon.
 */
-
 /** @event RowFilteringPlugin#beforeDialogOpened
 * @description Fired before the opening of filter dialog. This can be used to cancel the operation or set a dialog configuration at runtime.
 * @property {number} colIndex Column index
@@ -23,7 +22,6 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 *   e.dialogOptions = { sortLogic: func }; // To set a dialog configuration
 * },
 */
-
 /** @event RowFilteringPlugin#dialogCommitted
 * @description Fired after a user clicks done button from the filter dialog or changes sort order.
 * @property {number} colIndex
@@ -31,14 +29,12 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {number=} sortOrder When sort order is changed, the change will be passed through this property
 * @property {string=} fieldDataType
 */
-
 /** @event RowFilteringPlugin#iconCreated
 * @description iconCreated event is dispatched when a new column filter icon is created.
 * @property {Element} icon Filter icon element
 * @property {number} colIndex Column index
 * @property {Object} grid Core grid instance
 */
-
 /** @event RowFilteringPlugin#filterChanged
 * @description Fired whenever global or column filter is changed by either adding or removing. The change will not immediately applied to grid's data view
 * @property {string} filterType This can be either "global" or "column"
@@ -46,7 +42,6 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {number} colIndex Column index
 * @property {string} field specified by the current column
 */
-
 /** @event RowFilteringPlugin#refreshed
 * @description Fired after new filter is applied to grid's data view
 */
@@ -93,6 +88,7 @@ The expression can take various forms:<br>
 * @property {Function=} sortLogic This function for sorting filter item list in the dialog. The comparison will perform on raw values, and not formatted values
 * @property {Array=} itemList Item list to be shown in the dialog. If this is not specified, the list will be collected from existing data on the grid
 * @property {Array=} additionalItems Additional items to be put on the itemList
+* @property {(boolean|string)=} blankValues Display a "(Blanks)" item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
 */
 
 /** @typedef {Object} RowFilteringPlugin~Options
@@ -113,21 +109,25 @@ The expression can take various forms:<br>
 * @param {Object} cfo
 * @return {!RowFilteringPlugin~FilterExpression}
 */
-
 var toFilterExpression = function toFilterExpression(cfo) {
-  var ctx = cfo._context[0]; // TODO: Handle rawDataAccessor and formattedDataAccessor (saving and loading of functions)
-
+  var ctx = cfo._context[0];
+  // TODO: Handle rawDataAccessor and formattedDataAccessor (saving and loading of functions)
   return {
     field: cfo._field || "",
     expression: cfo._expressions[0],
     context: ctx != null && !ctx._autoGenerated ? ctx : null
   };
 };
+
+/** @type {string}
+* @private
+* @const
+*/
+var BLANKS = "(Blanks)";
+
 /** @constructor
 * @extends {GridPlugin}
 */
-
-
 var RowFilteringPlugin = function RowFilteringPlugin() {
   var t = this;
   t._onPreSectionRender = t._onPreSectionRender.bind(t);
@@ -147,122 +147,100 @@ var RowFilteringPlugin = function RowFilteringPlugin() {
   t._funcMap = {};
   t._nameMap = {};
 };
-
 Ext.inherits(RowFilteringPlugin, GridPlugin);
+
 /** @type {!Object.<string, Function>}
 * @private
 */
-
 RowFilteringPlugin.prototype._funcMap = null; // For preventing repetition of resolving the same expression
-
 /** @type {!Object.<string, Function>}
 * @private
 */
-
 RowFilteringPlugin.prototype._nameMap; // Mapping name to filter function for referencing
 
 /** @type {boolean}
 * @private
 */
-
 RowFilteringPlugin.prototype._disabled = false;
 /** @type {Object.<string, boolean>}
 * @private
 */
-
 RowFilteringPlugin.prototype._disablingIds = null; // For nested disabling
 
 /** @type {!Array.<Function>}
 * @private
 */
-
 RowFilteringPlugin.prototype._globalFilters;
 /** @type {!Array.<Object>}
 * @private
 */
-
 RowFilteringPlugin.prototype._globalContexts;
 /** @type {!Array.<Object>}
 * @private
 */
-
 RowFilteringPlugin.prototype._columnFilters;
 /** @type {Array.<Object>}
 * @private
 */
-
 RowFilteringPlugin.prototype._activeColFilters = null;
 /** @type {string}
 * @private
 */
-
 RowFilteringPlugin.prototype._iconActivation = "onActiveFilter";
 /** @type {number}
 * @private
 */
-
 RowFilteringPlugin.prototype._filterId = 0;
 /** @type {number}
 * @private
 */
-
 RowFilteringPlugin.prototype._uiTimerId = 0;
 /** @type {number}
 * @private
 */
-
 RowFilteringPlugin.prototype._filterTimerId = 0;
 /** @type {Function}
 * @private
 */
-
 RowFilteringPlugin.prototype._overridingFilter = null;
 /** @type {Function}
 * @private
 */
-
 RowFilteringPlugin.prototype._preTransform = null;
 /** @type {Function}
 * @private
 */
-
 RowFilteringPlugin.prototype._rowTransform = null;
 /** @type {Element}
 * @private
 */
-
 RowFilteringPlugin.prototype._filterDialog = null;
 /** @type {boolean}
 * @private
 */
-
 RowFilteringPlugin.prototype._dialogInitialized = false;
 /** @type {RowFilteringPlugin~FilterDialogOptions}
 * @private
 */
-
 RowFilteringPlugin.prototype._dialogOptions = null;
 /** @type {FilterBuilder}
 * @private
 */
-
 RowFilteringPlugin._filterBuilder = null;
 /** @type {string}
 * @private
 */
-
 RowFilteringPlugin._dialogTagName; // intentionally left undefined
 
 /** Array of DataView objects
 * @type {!Array.<Object>}
 * @private
 */
-
 RowFilteringPlugin.prototype._dvs;
+
 /** @public
 * @return {string}
 */
-
 RowFilteringPlugin.prototype.getName = function () {
   return "RowFilteringPlugin"; // Read Only
 };
@@ -270,115 +248,88 @@ RowFilteringPlugin.prototype.getName = function () {
 * @param {Object} host core grid instance
 * @param {Object=} options
 */
-
-
 RowFilteringPlugin.prototype.initialize = function (host, options) {
   if (this._hosts.indexOf(host) >= 0) {
     return;
   }
-
   this._hosts.push(host);
-
   if (!RowFilteringPlugin._styles) {
     RowFilteringPlugin._styles = prettifyCss([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon", ["display: flex;"], ".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon", ["display: none;"], ".floating-panel", ["position:relative;"], ".floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-color,inherit);"], ".title .floating-panel .title-filter-icon:hover", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".always-on-filter .floating-panel .title-filter-icon", ["color: var(--grid-header-txtcolor,inherit);"], ".always-on-filter .active-filter .floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", ["padding-left:0px;"], ".tiny-col.movable .cell .floating-panel .title-filter-icon:before", ["content: '.';", "position: absolute;", "margin-left: auto;", "margin-right: auto;", "left: 0;", "right: 0;", "top: -10px;", "font-size: 10px;", "font-family: monospace;", "color: var(--grid-title-dot-icon,inherit);", "text-align:center;"]]);
   }
-
   if (!host._rowFilteringStyles) {
     host._rowFilteringStyles = true;
     injectCss(RowFilteringPlugin._styles, host.getElement());
   }
-
   host.unloadPlugin("ColumnFilterPlugin");
   host.listen("preSectionRender", this._onPreSectionRender);
   host.listen("postDataSourceChanged", this._requestFilterRefresh); // TODO: Check if this is necessary
-
   host.listen("columnAdded", this._onColumnAdded);
   host.listen("columnRemoved", this._onColumnRemoved);
-  this.config(options); // In case of lazy loading
+  this.config(options);
+  // In case of lazy loading
   // TODO
 };
 /** @public
 * @param {Object} host core grid instance
 */
-
-
 RowFilteringPlugin.prototype.unload = function (host) {
   var at = this._hosts.indexOf(host);
-
   if (at < 0) {
     return;
   }
-
   this._hosts.splice(at, 1);
-
   host.unlisten("preSectionRender", this._onPreSectionRender);
   host.unlisten("postDataSourceChanged", this._requestFilterRefresh);
   host.unlisten("columnAdded", this._onColumnAdded);
   host.unlisten("columnRemoved", this._onColumnRemoved);
-
   if (!this._hosts.length) {
     if (this._uiTimerId) {
       clearTimeout(this._uiTimerId);
       this._uiTimerId = 0;
     }
-
     if (this._filterTimerId) {
       clearTimeout(this._filterTimerId);
       this._filterTimerId = 0;
     }
-
     this._hasPendingFilter = false;
-
     if (this._filterDialog) {
       this._filterDialog.hide(); // Remove the dialog from document
-
-
       this._filterDialog = null;
       this._dialogInitialized = false;
     }
   }
-
   this._dispose();
 };
 /**
 * @protected
 * @ignore
 */
-
-
 RowFilteringPlugin.prototype._afterInit = function () {
   if (!this._filterDialog) {
     this._filterDialog = RowFilteringPlugin._createDialog();
     this._dialogInitialized = false;
-
     if (this._filterDialog) {
       this._filterDialog.style.display = "none";
       document.body.appendChild(this._filterDialog);
       setTimeout(this._onPreLoadedDialog, 10);
     }
   }
-
   this._applyPendingFilter();
 };
+
 /** @private
 */
-
-
 RowFilteringPlugin.prototype._applyPendingFilter = function () {
   if (!this._initializedGrid) {
     return;
   }
-
   if (!this._hasPendingFilter) {
     return;
   }
-
   this._hasPendingFilter = false;
   var colCount = this.getColumnCount();
-
   for (var c = 0; c < colCount; ++c) {
     var colSettings = this._getUserColumnSettings(c);
-
     if (colSettings.expression) {
       this.addColumnFilter(c, colSettings.expression, colSettings.filterState);
     } else {
@@ -388,55 +339,44 @@ RowFilteringPlugin.prototype._applyPendingFilter = function () {
 };
 /** @private
 */
-
-
 RowFilteringPlugin.prototype._onPreLoadedDialog = function () {
   if (this._filterDialog) {
     this._filterDialog.style.display = "";
     var pn = this._filterDialog.parentNode;
-
     if (pn) {
       pn.removeChild(this._filterDialog);
     }
   }
 };
+
 /** @public
 * @param {Object=} options
 */
-
-
 RowFilteringPlugin.prototype.config = function (options) {
   if (!options) {
     return;
   }
-
   var rowFiltering = options["rowFiltering"];
-
   if (rowFiltering) {
     if (rowFiltering["disabledUI"] || rowFiltering["uiDisabled"]) {
       this._iconActivation = "none";
     }
-
     if (rowFiltering["emptySegmentFiltering"] != null) {
       // TODO: there is a chance that there is no DataView during the configuration
       this.enableEmptySegmentFiltering(rowFiltering["emptySegmentFiltering"] ? true : false);
     }
-
     if (rowFiltering["separatorFiltering"] != null) {
       // TODO: there is a chance that there is no DataView during the configuration
       this.enableSeparatorFiltering(rowFiltering["separatorFiltering"] ? true : false);
     }
-
     if (rowFiltering["iconActivation"]) {
       this._iconActivation = rowFiltering["iconActivation"];
-
       for (var index = 0; index < this._hosts.length; index++) {
         if (this._iconActivation === "onHover") {
           this._hosts[index].enableClass("hovering-filter-icon", true);
         } else {
           this._hosts[index].enableClass("hovering-filter-icon", false);
         }
-
         if (this._iconActivation === "always") {
           this._hosts[index].enableClass("always-on-filter", true);
         } else {
@@ -444,15 +384,12 @@ RowFilteringPlugin.prototype.config = function (options) {
         }
       }
     }
-
     if (rowFiltering["dialogOptions"]) {
       this._dialogOptions = rowFiltering["dialogOptions"];
     }
-
     if (rowFiltering["clicked"]) {
       rowFiltering["click"] = rowFiltering["clicked"];
     }
-
     this.addListener(rowFiltering, "click");
     this.addListener(rowFiltering, "beforeDialogOpened");
     this.addListener(rowFiltering, "dialogCommitted");
@@ -460,112 +397,99 @@ RowFilteringPlugin.prototype.config = function (options) {
     this.addListener(rowFiltering, "filterChanged");
     this.addListener(rowFiltering, "refreshed");
   }
-
   var columns = options["columns"];
-
   if (!columns) {
     return;
-  } // var host = this._hosts[0];
-
+  }
 
+  // var host = this._hosts[0];
   var len = columns.length;
-
   for (var i = 0; i < len; ++i) {
     var column = columns[i];
-
     this._setColumnOptions(i, column);
   }
-
   this._applyPendingFilter();
 };
 /** @public
 * @param {Object=} gridOptions
 * @return {!Object}
 */
-
-
 RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
   var obj = gridOptions || {};
   var columns = obj.columns;
-
   if (!columns) {
     columns = obj.columns = [];
   }
-
   var len = this.getColumnCount();
-
   for (var i = 0; i < len; ++i) {
     var column = columns[i];
-
     if (!column) {
       column = columns[i] = {};
     }
-
     var colSettings = this._getUserColumnSettings(i);
-
     var exp = colSettings.expression;
-
     if (exp && typeof exp !== "function") {
       // TODO: Accept function type
-      column.filter = exp; // This could be string, array, or object
+      if (_typeof(exp) === "object" && !Array.isArray(exp)) {
+        var expClone = cloneObject(exp);
+        if (expClone[""] || expClone["null"] || expClone["undefined"] || expClone["NaN"]) {
+          delete expClone[""];
+          delete expClone["null"];
+          delete expClone["undefined"];
+          delete expClone["NaN"];
+          expClone[BLANKS] = true;
+          column.filter = expClone; // This could be only object
+        } else {
+          column.filter = exp;
+        }
+      } else {
+        column.filter = exp; // This could be string or array
+      }
     }
 
     var ctx = colSettings.filterState;
-
     if (ctx != null) {
       if (_typeof(ctx) !== "object" || !ctx._autoGenerated) {
         column.filterState = ctx;
       }
     }
   }
-
   var extOptions = obj.rowFiltering;
   var dirty = false;
-
   if (!extOptions) {
     extOptions = {};
   }
-
   if (this._iconActivation !== "onActiveFilter") {
     extOptions.iconActivation = this._iconActivation;
     dirty = true;
   }
-
   if (this._dialogOptions) {
     extOptions.dialogOptions = this._dialogOptions; // TODO: dialogOptions should not contain any function
-
     dirty = true;
-  } // TODO: get emptySegmentFiltering setting from DataView
+  }
+  // TODO: get emptySegmentFiltering setting from DataView
   // TODO: get separatorFiltering setting from DataView
-
-
   if (dirty) {
     obj.rowFiltering = extOptions;
   }
-
   return obj;
 };
+
 /** All filter logics in DataView will be temporarily removed until re-enabling. This is useful when trying to insert an item at the specified index. After re-enabling, both logics and icons will be restored.
 * @public
 * @param {boolean=} opt_disabled
 * @param {string=} opt_id For handling nested called
 */
-
-
 RowFilteringPlugin.prototype.disable = function (opt_disabled, opt_id) {
   var disabled = opt_disabled !== false;
-
   if (!this._disablingIds) {
     this._disablingIds = {};
   }
-
   if (!opt_id) {
     opt_id = "_";
   }
-
   this._disablingIds[opt_id] = disabled;
   disabled = false;
-
   for (var key in this._disablingIds) {
     // Find cumulative state
     if (this._disablingIds[key]) {
@@ -573,22 +497,18 @@ RowFilteringPlugin.prototype.disable = function (opt_disabled, opt_id) {
       break;
     }
   }
-
   if (this._disabled !== disabled) {
     this._disabled = disabled;
-
     if (disabled) {
       this.refresh(); // Take an effect immediately
-
       this._updateAllColumnIcons();
     } else {
       this._requestFilterRefresh(); // Take an effect later
-
-
       this._setTimerForUpdatingIcons();
     }
   }
 };
+
 /** Add a global filter that is not related to any column. No filter icon is created in this way
 * @public
 * @param {RowFilteringPlugin~Expression} exp Expression or Function
@@ -597,39 +517,29 @@ RowFilteringPlugin.prototype.disable = function (opt_disabled, opt_id) {
 * @return {string} If success, function name is returned, otherwise empty string
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype.addFilter = function (exp, funcName, ctx) {
   var func = this._parseFilter(exp, -1);
-
   if (!func) {
     return "";
   }
-
   if (!funcName) {
     funcName = "_" + this._filterId++;
   }
-
   if (this._nameMap[funcName] || this._globalFilters.indexOf(func) >= 0) {
     return ""; // Function is already exists
   }
 
   ctx = ctx != null ? ctx : null;
   this._nameMap[funcName] = func;
-
   this._globalFilters.push(func);
-
   this._globalContexts.push(ctx);
-
   this._dispatch("filterChanged", {
     "filterType": "global",
     "changeType": "add",
     "colIndex": -1,
     "field": null
   });
-
   this._requestFilterRefresh();
-
   return funcName;
 };
 /** Add a global filter that is not related to any column. No filter icon is created in this way
@@ -639,8 +549,6 @@ RowFilteringPlugin.prototype.addFilter = function (exp, funcName, ctx) {
 * @return {string} If success, function name is returned, otherwise empty string
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype.addGridFilter = function (exp, ctx) {
   return this.addFilter(exp, null, ctx);
 };
@@ -650,43 +558,39 @@ RowFilteringPlugin.prototype.addGridFilter = function (exp, ctx) {
 * @param {*=} ctx
 * @return {Function}
 */
-
-
 RowFilteringPlugin.prototype._parseFilter = function (exp, colIndex, ctx) {
   if (!exp) {
     return null;
   }
-
   if (typeof exp === "function") {
     return exp;
   }
-
   var filterBuilder = RowFilteringPlugin._getFilterBuilder();
-
   var validIdx = colIndex || colIndex === 0;
   var field = validIdx ? this._getField(colIndex) : "";
   var formatter = validIdx ? this._getFormatter(colIndex) : null;
   var func = null;
-
   if (typeof exp === "string") {
     // Free text does not need data accessors
     func = this._funcMap[exp];
-
     if (func == null) {
       func = this._funcMap[exp] = filterBuilder.parse(exp, field, formatter, field);
     }
   } else {
     var rawDataAccessor = null;
     var formattedDataAccessor = null;
-
     if (ctx) {
       rawDataAccessor = ctx.rawDataAccessor || null;
       formattedDataAccessor = ctx.formattedDataAccessor || null;
     }
-
+    if (!Array.isArray(exp)) {
+      if (exp[BLANKS] || ctx && ctx.blankValues) {
+        exp[""] = exp["null"] = exp["undefined"] = exp["NaN"] = true;
+        delete exp[BLANKS];
+      }
+    }
     func = filterBuilder.parse(exp, field, formatter, field, rawDataAccessor, formattedDataAccessor);
   }
-
   return func;
 };
 /** If you want the column to always have one single filter, please use {@link RowFilteringPlugin#setColumnFilter} instead. This method allow a single column to have multiple filters.
@@ -697,15 +601,11 @@ RowFilteringPlugin.prototype._parseFilter = function (exp, colIndex, ctx) {
 * @return {boolean} True if success
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype.addColumnFilter = function (colIndex, exp, ctx) {
   if (colIndex < 0 || colIndex >= this.getColumnCount()) {
     return false;
   }
-
   var cfo = this._getColumnFilterOption(colIndex);
-
   if (cfo) {
     if (cfo._expressions[0] === exp) {
       return false; // The same expression is getting added on the same column twice
@@ -713,67 +613,47 @@ RowFilteringPlugin.prototype.addColumnFilter = function (colIndex, exp, ctx) {
   }
 
   var func = null;
-
   if (typeof exp === "function") {
-    func =
-    /** @type{Function} */
-    exp;
-
+    func = /** @type{Function} */exp;
     if (ctx && typeof ctx === "string") {
       exp = ctx;
     }
   } else {
     func = this._parseFilter(exp, colIndex, ctx);
   }
-
   if (!func) {
     return false;
   }
-
   var colSettings = this._getUserColumnSettings(colIndex);
-
   colSettings.expression = exp; // WARNING: Only the last expression are saved (previous one is overwritten)
-
   colSettings.filterState = ctx;
-
   if (ctx == null) {
     ctx = {
       "_autoGenerated": true
     };
   }
-
   var field = this._getField(colIndex);
-
   if (ctx && _typeof(ctx) === "object") {
     ctx["field"] = field;
   }
-
   cfo = this._initColumnFilterOption(colIndex);
   cfo._field = field; // TODO: Handle fieldDataType
-
   cfo._filters.push(func);
-
   cfo._expressions.push(exp);
-
   cfo._context.push(ctx);
-
   cfo._rawDataAccessor = ctx.rawDataAccessor || null;
   cfo._formattedDataAccessor = ctx.formattedDataAccessor || null;
-
   this._columnFilters.push(cfo);
-
   this._dispatch("filterChanged", {
     "filterType": "column",
     "changeType": "add",
     "colIndex": colIndex,
     "field": field
-  }); // UI
-
+  });
 
+  // UI
   this._requestFilterRefresh();
-
   this._updateColumnIcon(colIndex);
-
   return true;
 };
 /** This method guarantees that the column can have at most one filter at the time. It performs {@link RowFilteringPlugin#removeColumnFilters} before {@link RowFilteringPlugin#addColumnFilter}
@@ -796,34 +676,24 @@ RowFilteringPlugin.prototype.addColumnFilter = function (colIndex, exp, ctx) {
 *   }
 * );
 */
-
-
 RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
   var curExp = this._getColumnExpression(colIndex);
-
   if (curExp === exp) {
     return false;
   }
-
   var removed = this._removeColumnFilters(colIndex);
-
   var added = this.addColumnFilter(colIndex, exp, ctx);
-
   if (!added && removed) {
     this._updateColumnIcon(colIndex);
   }
-
   return removed || added;
 };
 /** @private
  * @param {number} colIndex
  * @return {RowFilteringPlugin~Expression}
  */
-
-
 RowFilteringPlugin.prototype._getColumnExpression = function (colIndex) {
   var colSettings = this._getUserColumnSettings(colIndex);
-
   return colSettings.expression || null;
 };
 /** Set data to colData["rowFiltering"]
@@ -845,15 +715,12 @@ RowFilteringPlugin.prototype._getColumnExpression = function (colIndex) {
 *   }
 * };
 */
-
-
 RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, userObj) {
   var colSettings = this._getUserColumnSettings(colIndex);
+  var filterIcon = userObj["filterIcon"];
 
-  var filterIcon = userObj["filterIcon"]; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
-
+  // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
   var fieldDataType = userObj["fieldDataType"] || userObj["dataType"];
-
   if (fieldDataType) {
     colSettings.fieldDataType = fieldDataType; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
   }
@@ -861,55 +728,40 @@ RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, userObj) {
   if (filterIcon != null) {
     colSettings.filterIcon = filterIcon;
   }
-
   var exp = userObj["filter"];
-
   if (exp != null) {
     colSettings.expression = exp;
     colSettings.filterState = null;
     this._hasPendingFilter = true;
   }
-
   var filterState = userObj["filterState"];
-
   if (filterState != null) {
     colSettings.filterState = filterState;
   }
-
   var iconActivation = filterIcon == false ? "none" : this._iconActivation;
-
   if (iconActivation == "always" || iconActivation == "onHover") {
     this._updateColumnIcon(colIndex);
   }
-
   return exp != null;
 };
 /** @private
  * @param {number} colIndex
  * @return {!Object} colData["rowFiltering"]
  */
-
-
 RowFilteringPlugin.prototype._getUserColumnSettings = function (colIndex) {
   var colData = this._newColumnData(colIndex);
-
   var colSettings = colData["rowFiltering"];
-
   if (!colSettings) {
     colSettings = colData["rowFiltering"] = {};
   }
-
   return colSettings;
 };
 /** @private
 * @param {number} colIndex
 * @return {Object} colData["rowFiltering"]["filterOption"]
 */
-
-
 RowFilteringPlugin.prototype._getColumnFilterOption = function (colIndex) {
   var colSettings = this._getUserColumnSettings(colIndex);
-
   if (colSettings) {
     return colSettings["filterOption"] || null;
   } else {
@@ -920,18 +772,13 @@ RowFilteringPlugin.prototype._getColumnFilterOption = function (colIndex) {
 * @private
 * @param {number} colIndex
 */
-
-
 RowFilteringPlugin.prototype._removeActiveFilterStates = function (colIndex) {
   var colSettings = this._getUserColumnSettings(colIndex);
-
   colSettings.expression = null;
   colSettings.filterState = null;
   var cfo = colSettings["filterOption"];
-
   if (cfo) {
     colSettings["filterOption"] = null;
-
     if (cfo._filters.length) {
       this._dispatch("filterChanged", {
         "filterType": "column",
@@ -946,48 +793,35 @@ RowFilteringPlugin.prototype._removeActiveFilterStates = function (colIndex) {
 * @param {number} colIndex
 * @return {!Object}
 */
-
-
 RowFilteringPlugin.prototype._initColumnFilterOption = function (colIndex) {
   var cfo = this._getColumnFilterOption(colIndex);
-
   if (!cfo) {
     cfo = {};
     cfo._filters = [];
     cfo._expressions = [];
     cfo._context = [];
-
     var colSettings = this._getUserColumnSettings(colIndex);
-
     colSettings["filterOption"] = cfo;
   }
-
   return cfo;
 };
+
 /** Remove the registered global filter. The column filter cannot be removed
 * @public
 * @param {Function|string} funcRef Function object or the function name can be used to remove
 * @return {boolean} True if success
 */
-
-
 RowFilteringPlugin.prototype.removeFilter = function (funcRef) {
   var func = null;
   var funcName = "";
   var funcIndex = -1;
-
   if (typeof funcRef === "string") {
-    funcName =
-    /** @type{string} */
-    funcRef;
+    funcName = /** @type{string} */funcRef;
     func = this._nameMap[funcRef];
     funcIndex = this._globalFilters.indexOf(func);
   } else {
-    func =
-    /** @type{Function} */
-    funcRef;
+    func = /** @type{Function} */funcRef;
     funcIndex = this._globalFilters.indexOf(func);
-
     if (funcIndex >= 0) {
       for (var key in this._nameMap) {
         if (this._nameMap[key] === func) {
@@ -996,19 +830,13 @@ RowFilteringPlugin.prototype.removeFilter = function (funcRef) {
       }
     }
   }
-
   if (funcIndex < 0) {
     return false;
   }
-
   delete this._nameMap[funcName];
-
   this._globalFilters.splice(funcIndex, 1);
-
   this._globalContexts.splice(funcIndex, 1);
-
   this._requestFilterRefresh();
-
   return true;
 };
 /** Remove all filters in from the specified column
@@ -1017,20 +845,15 @@ RowFilteringPlugin.prototype.removeFilter = function (funcRef) {
 * @return {boolean} True if there is any change
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype.removeColumnFilters = function (colIndex) {
   if (colIndex == null) {
     // Prevent user mistake
     return this.removeAllColumnFilters();
   }
-
   var dirty = this._removeColumnFilters(colIndex);
-
   if (dirty) {
     this._updateColumnIcon(colIndex);
   }
-
   return dirty;
 };
 /** @private
@@ -1038,29 +861,18 @@ RowFilteringPlugin.prototype.removeColumnFilters = function (colIndex) {
 * @return {boolean} True if there is any change
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype._removeColumnFilters = function (colIndex) {
   var cfo = this._getColumnFilterOption(colIndex);
-
   if (cfo) {
     var funcIndex = this._columnFilters.indexOf(cfo);
-
     if (funcIndex >= 0) {
       this._columnFilters.splice(funcIndex, 1);
     }
-
     this._removeActiveFilterStates(colIndex); // filterChanged fired
-
-
     var inputExt = this._getPlugin("FilterInputPlugin"); // TODO: Use the event instead
-
-
     inputExt && inputExt.updateUI(colIndex, "");
-
     this._requestFilterRefresh();
   }
-
   return cfo ? true : false;
 };
 /** Alias to {@link RowFilteringPlugin#removeColumnFilters} Remove all filters from the specified column
@@ -1070,55 +882,40 @@ RowFilteringPlugin.prototype._removeColumnFilters = function (colIndex) {
 * @return {boolean} True if there is any change
 * @fires RowFilteringPlugin#filterChanged
 */
-
-
 RowFilteringPlugin.prototype.removeColumnFilter = RowFilteringPlugin.prototype.removeColumnFilters;
+
 /** Remove all column filters from all columns, excluding global filters
 * @public
 * @return {boolean} Return true if there is any change
 * @fires RowFilteringPlugin#filterChanged
 */
-
 RowFilteringPlugin.prototype.removeAllColumnFilters = function () {
   if (this._columnFilters.length) {
     this._columnFilters.length = 0;
-
     var inputExt = this._getPlugin("FilterInputPlugin");
-
     var colCount = this._getColumnCount();
-
     for (var i = 0; i < colCount; ++i) {
       this._removeActiveFilterStates(i); // filterChanged fired
-
-
       inputExt && inputExt.updateUI(i, ""); // TODO: Use the event instead
     }
 
     this._updateAllColumnIcons();
-
     this._requestFilterRefresh();
-
     return true;
   }
-
   return false;
 };
 /** Remove all column and global filters. OverridingFilters are not removed by this method
 * @public
 */
-
-
 RowFilteringPlugin.prototype.removeAllFilters = function () {
   var totalFilter = this._globalFilters.length + this._columnFilters.length;
-
   if (totalFilter <= 0) {
     return;
   }
-
   if (this._globalFilters.length) {
     this._globalFilters.length = 0;
     this._nameMap = {};
-
     this._dispatch("filterChanged", {
       "filterType": "global",
       "changeType": "remove",
@@ -1126,17 +923,14 @@ RowFilteringPlugin.prototype.removeAllFilters = function () {
       "field": ""
     });
   }
-
   this.removeAllColumnFilters();
-
   this._requestFilterRefresh();
 };
+
 /** Column overriding function is processed before column filters and after global filters. If it returns non-zero, the result will override all other column filter results. If it returns 1, the row will be always included. If it returns -1, the row will be always excluded. If it returns 0, the column filters will be used as normal.
 * @public
 * @param {Function} func
 */
-
-
 RowFilteringPlugin.prototype.setOverridingFilter = function (func) {
   this._overridingFilter = func;
 };
@@ -1144,8 +938,6 @@ RowFilteringPlugin.prototype.setOverridingFilter = function (func) {
 * @public
 * @param {Function} func This function must return object with key and value pairs
 */
-
-
 RowFilteringPlugin.prototype.setPreTransform = function (func) {
   this._preTransform = func;
 };
@@ -1153,16 +945,13 @@ RowFilteringPlugin.prototype.setPreTransform = function (func) {
 * @public
 * @param {Function} func This function must return object with key and value pairs
 */
-
-
 RowFilteringPlugin.prototype.setRowTransform = function (func) {
   this._rowTransform = func;
 };
+
 /** @public
 * @return {!Array.<Function>} All global filters
 */
-
-
 RowFilteringPlugin.prototype.getFilters = function () {
   return this._globalFilters;
 };
@@ -1171,21 +960,16 @@ RowFilteringPlugin.prototype.getFilters = function () {
 * @return {!Array.<Function>} All column filters
 * @see {@link RowFilteringPlugin.getConfigObject}
 */
-
-
 RowFilteringPlugin.prototype.getAllColumnFilters = function () {
   var filters = [];
   var len = this._columnFilters.length;
-
   for (var i = 0; i < len; ++i) {
     var cfo = this._columnFilters[i];
     var jLen = cfo._filters.length;
-
     for (var j = 0; j < jLen; ++j) {
       filters.push(cfo._filters[j]);
     }
   }
-
   return filters;
 };
 /** Deprecated in favor of getConfigObject(). Get existing filter expressions for saving and restoring.
@@ -1193,46 +977,37 @@ RowFilteringPlugin.prototype.getAllColumnFilters = function () {
 * @return {Array.<RowFilteringPlugin~FilterExpression>} Return null if there is no column filter
 * @see {@link RowFilteringPlugin.getConfigObject}
 */
-
-
 RowFilteringPlugin.prototype.getFilterExpressions = function () {
   if (this._columnFilters.length) {
     // TODO: Provide a way to save rawDataAccessor and formattedDataAccessor
     return this._columnFilters.map(toFilterExpression);
   }
-
   return null;
 };
 /** Deprecated. Clear all existing column filters and restore column filters from the given valid filter expressions. If the parameter is null, the result is equivalent to calling removeAllColumnFilters();
 * @public
 * @param {Array.<RowFilteringPlugin~FilterExpression>} filterExps
 */
-
-
 RowFilteringPlugin.prototype.setFilterExpressions = function (filterExps) {
   this.removeAllColumnFilters();
-
   if (Array.isArray(filterExps)) {
     var api = this.getGridApi();
     var fields = api.getColumnFields();
     var len = filterExps.length;
-
     for (var i = 0; i < len; ++i) {
       var filterExp = filterExps[i];
       var field = filterExp.field;
       var colIndex = fields.indexOf(field);
-
       if (colIndex >= 0) {
         this.setColumnFilter(colIndex, filterExp.expression, filterExp.context);
       }
     }
   }
 };
+
 /** @public
 * @return {boolean}
 */
-
-
 RowFilteringPlugin.prototype.hasColumnFilter = function () {
   return this._columnFilters.length > 0;
 };
@@ -1240,100 +1015,75 @@ RowFilteringPlugin.prototype.hasColumnFilter = function () {
 * @param {number} colIndex
 * @return {Array.<Element>} icons
 */
-
-
 RowFilteringPlugin.prototype.getColumnFilterIcons = function (colIndex) {
   var icons = [];
-
   for (var i = this._hosts.length; --i >= 0;) {
     var host = this._hosts[i];
     var tsect = host.getSection("title");
-
     if (!tsect) {
       continue;
     }
-
     var rCount = tsect.getRowCount();
     var cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
-
     if (cell && cell._filterIcon) {
       icons.push(cell._filterIcon);
     }
   }
-
   return icons;
 };
 /** @public */
-
-
 RowFilteringPlugin.prototype.updateAllColumnIcons = function () {
   if (this._uiTimerId) {
     clearTimeout(this._uiTimerId);
     this._uiTimerId = 0;
   }
-
   this._updateAllColumnIcons();
 };
+
 /** Specify a list of data views to be filtered, excluding default data views used by UI. <br>
 * This is useful when multiple shared or nested data views are employed.
 * @public
 * @param {Object} dv DataView
 */
-
-
 RowFilteringPlugin.prototype.addDataView = function (dv) {
   var at = this._dvs.indexOf(dv);
-
   if (at < 0) {
     this._dvs.push(dv);
-
     this._requestFilterRefresh();
   }
 };
 /** @public
 * @param {Object} dv DataView
 */
-
-
 RowFilteringPlugin.prototype.removeDataView = function (dv) {
   var at = this._dvs.indexOf(dv);
-
   if (at >= 0) {
     this._dvs.splice(at, 1);
-
     this._requestFilterRefresh(); // This could be unnecessary
-
   }
 };
+
 /** @private
 * @param {Object} e
 */
-
-
 RowFilteringPlugin.prototype._onPreSectionRender = function (e) {
   if (e["sectionType"] !== "title") {
     return;
   }
-
   this._setTimerForUpdatingIcons();
 };
 /** @private
 * @param {Event} e
 */
-
-
 RowFilteringPlugin.prototype._onIconClicked = function (e) {
   var host = this._hosts[0];
-
   if (!host) {
     return;
   }
-
   var pos = host.getRelativePosition(e);
   this.openDialog(pos.colIndex);
   e.stopPropagation();
   e.preventDefault();
-
   this._dispatch("click", e);
 };
 /** @private
@@ -1341,46 +1091,35 @@ RowFilteringPlugin.prototype._onIconClicked = function (e) {
 * @param {Object} rowData
 * @return {boolean}
 */
-
-
 RowFilteringPlugin.prototype._filterLogic = function (rid, rowData) {
   if (rowData) {
     if (this._rowGetter) {
       rowData = this._rowGetter(rowData);
     }
-
     if (this._preTransform) {
       rowData = this._preTransform(rowData);
     }
-
     var i;
     var len = this._globalFilters.length;
-
     for (i = 0; i < len; ++i) {
       if (!this._globalFilters[i](rowData, rid, this._globalContexts[i])) {
         return false;
       }
     }
-
     len = this._activeColFilters.length;
-
     if (len) {
       if (this._overridingFilter) {
         var ret = this._overridingFilter(rowData, rid);
-
         if (ret) {
           return ret > 0;
         }
       }
-
       if (this._rowTransform) {
         rowData = this._rowTransform(rowData);
       }
-
       for (i = 0; i < len; ++i) {
         var cfo = this._activeColFilters[i];
         var jLen = cfo._filters.length;
-
         for (var j = 0; j < jLen; ++j) {
           if (!cfo._filters[j](rowData, rid, cfo._context[j])) {
             return false;
@@ -1389,69 +1128,53 @@ RowFilteringPlugin.prototype._filterLogic = function (rid, rowData) {
       }
     }
   }
-
   return true;
 };
 /** @private */
-
-
 RowFilteringPlugin.prototype._requestFilterRefresh = function () {
   if (!this._filterTimerId) {
     this._filterTimerId = setTimeout(this.refresh, 10);
   }
 };
 /** @private */
-
-
 RowFilteringPlugin.prototype._setTimerForUpdatingIcons = function () {
   if (this._iconActivation === "none") {
     return;
   }
-
   if (!this._uiTimerId) {
     this._uiTimerId = setTimeout(this._updateAllColumnIcons, 10);
   }
 };
+
 /** Perform filtering with the same parameters. Do not call this method repeatedly as the operation is quite expensive.
 * @public
 * @suppress {checkTypes}
 * @fires RowFilteringPlugin#refreshed
 */
-
-
 RowFilteringPlugin.prototype.refresh = function () {
   this._filterTimerId = 0;
-  this._activeColFilters = this._columnFilters; //check cstp
-
+  this._activeColFilters = this._columnFilters;
+  //check cstp
   var cstkp = this._getPlugin("ColumnStackPlugin");
-
   if (cstkp) {
     var colIndex, cfo;
     var host = this._hosts[0];
-
     var colCount = this._getColumnCount();
-
     this._activeColFilters = [];
-
     for (colIndex = 0; colIndex < colCount; ++colIndex) {
       cfo = this._getColumnFilterOption(colIndex);
-
       if (cfo && host.getColumnVisibility(colIndex, 2)) {
         this._activeColFilters.push(cfo);
       }
     }
   }
-
   var totalFilter = this._globalFilters.length + this._activeColFilters.length;
   var logic = !this._disabled && totalFilter ? this._filterLogic : null;
   var dirty = 0;
-
   var dvs = this._getAvailableDataViews();
-
   for (var i = dvs.length; --i >= 0;) {
     dirty |= dvs[i].filterIn(logic);
   }
-
   if (dirty) {
     this._dispatch("refreshed", {});
   }
@@ -1459,55 +1182,38 @@ RowFilteringPlugin.prototype.refresh = function () {
 /** @private
 * @param {number} colIndex
 */
-
-
 RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
   var cfo = this._getColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
-
-
   var colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
-
-
   var iconActivation = colSettings.filterIcon == false ? "none" : this._iconActivation;
   var hasFilter = cfo ? cfo._filters.length : 0;
-
   for (var i = this._hosts.length; --i >= 0;) {
     var host = this._hosts[i];
     var tsect = host.getSection("title");
-
     if (!tsect) {
       continue;
     }
-
     var rCount = tsect.getRowCount();
     var cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
-
     var column = tsect.getColumn(colIndex);
-
     if (!cell) {
       continue;
-    } // HACK: Update cell padding for all type of icons (sorting and column grouping icons)
-
-
+    }
+    // HACK: Update cell padding for all type of icons (sorting and column grouping icons)
     if (cell["updatePadding"]) {
       cell["updatePadding"]();
     }
-
     var isColumnMovable = host.isColumnMovable(colIndex);
-
     if (isColumnMovable) {
       column.enableClass("movable", true);
     } else {
       column.enableClass("movable", false);
     }
-
     var onActiveFilter = iconActivation !== "always" && iconActivation !== "onHover";
     var noFilterIcon = this._disabled || iconActivation === "none" || onActiveFilter && !hasFilter;
-
     if (!noFilterIcon) {
       if (!cell._filterIcon) {
         var filterIcon;
-
         if (ElfUtil.hasComponent("ef-icon") >= 3) {
           filterIcon = document.createElement("ef-icon");
           filterIcon.setAttribute("icon", "filter");
@@ -1515,21 +1221,16 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
           filterIcon = document.createElement("div");
           filterIcon.className = "filter-symbol icon-filter ef-icon";
         }
-
         filterIcon.classList.add("title-filter-icon"); // Icon reference
-
         filterIcon.addEventListener("click", this._onIconClicked, false);
-
         this._dispatch("iconCreated", {
           "icon": filterIcon,
           "colIndex": colIndex,
           "grid": host
         });
-
         cell.insertFloatingIcon(filterIcon, 10);
         cell._filterIcon = filterIcon;
       }
-
       if (hasFilter) {
         cell.enableClass("active-filter", true);
       } else {
@@ -1545,50 +1246,38 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
   }
 };
 /** @private */
-
-
 RowFilteringPlugin.prototype._updateAllColumnIcons = function () {
   this._uiTimerId = 0;
-
   var colCount = this._getColumnCount();
-
   for (var i = 0; i < colCount; ++i) {
     this._updateColumnIcon(i);
   }
 };
+
 /** @private
 * @return {number}
 */
-
-
 RowFilteringPlugin.prototype._getColumnCount = function () {
   var grid = this._hosts[0];
-
   if (grid) {
     return grid.getColumnCount();
   }
-
   return 0;
 };
+
 /** Update existing filter state by replacing the old one. Note that filtering will be performed asynchronously after executing this method.
 * @public
 * @param {number} colIndex
 * @param {*} ctx Context object that will be passed as the third parameter for the filter logic
 * @return {boolean} Returns true if there is any change
 */
-
-
 RowFilteringPlugin.prototype.setColumnFilterState = function (colIndex, ctx) {
   var cfo = this._getColumnFilterOption(colIndex);
-
   if (cfo) {
     cfo._context[0] = ctx;
-
     this._requestFilterRefresh();
-
     return true;
   }
-
   return false;
 };
 /** Get the stored user context from the specified column
@@ -1596,15 +1285,11 @@ RowFilteringPlugin.prototype.setColumnFilterState = function (colIndex, ctx) {
 * @param {number} colIndex
 * @return {*} Context object that is passed as the third parameter for the filter logic
 */
-
-
 RowFilteringPlugin.prototype.getColumnFilterState = function (colIndex) {
   var cfo = this._getColumnFilterOption(colIndex);
-
   if (cfo) {
     return cfo._context[0];
   }
-
   return null;
 };
 /** Deprecated in favor of getConfigObject(). Get the stored user context from all columns. The column with no filter will return null value
@@ -1612,39 +1297,31 @@ RowFilteringPlugin.prototype.getColumnFilterState = function (colIndex) {
 * @return {!Array} Array of context objects
 * @see {@link RowFilteringPlugin.getConfigObject}
 */
-
-
 RowFilteringPlugin.prototype.getColumnFilterStates = function () {
   var colCount = this._hosts[0] ? this._hosts[0].getColumnCount() : 0;
   var states = new Array(colCount);
-
   for (var c = 0; c < colCount; ++c) {
     states[c] = this.getColumnFilterState(c);
   }
-
   return states;
 };
+
 /** @private
 * @return {!Array.<Object>} array of DataView
 */
-
-
 RowFilteringPlugin.prototype._getAvailableDataViews = function () {
   if (this._dvs.length) {
     return this._dvs;
   } else {
     var len = this._hosts.length;
     var ary = [];
-
     for (var i = 0; i < len; ++i) {
       var host = this._hosts[i];
       var dv = host.getDataSource();
-
       if (dv) {
         ary.push(dv);
       }
     }
-
     return ary;
   }
 };
@@ -1652,17 +1329,14 @@ RowFilteringPlugin.prototype._getAvailableDataViews = function () {
 * @param {Object} dv DataView
 * @return {Object} DataTable
 */
-
-
 RowFilteringPlugin.prototype._getDataTable = function (dv) {
   var dt = dv ? dv.getDataSource() : null;
-
   while (dt && dt.getDataSource()) {
     dt = dt.getDataSource();
   }
-
   return dt;
 };
+
 /** @public
 * @deprecated
 * @ignore
@@ -1675,8 +1349,6 @@ RowFilteringPlugin.prototype._getDataTable = function (dv) {
 * @param {Object=} selectedItems
 * @return {Object} Object that maps formatted value to array of raw values
 */
-
-
 RowFilteringPlugin.prototype.getUniqueValues = function (field, formatter, fmtField, rawDataAccessor, formattedDataAccessor, filterFuncs, selectedItems) {
   var dialogConfig = {
     rawDataAccessor: rawDataAccessor,
@@ -1684,18 +1356,16 @@ RowFilteringPlugin.prototype.getUniqueValues = function (field, formatter, fmtFi
   };
   return this._getUniqueValues(field, dialogConfig, formatter, filterFuncs, selectedItems);
 };
+
 /** @private
 * @param {*} formattedVal
 * @param {*} rawVal
 * @returns {string}
 */
-
-
 var _valueToString = function _valueToString(formattedVal, rawVal) {
   if (typeof formattedVal === "string") {
     return formattedVal;
   }
-
   if (formattedVal) {
     if (_typeof(formattedVal) != "object") {
       return rawVal + "";
@@ -1710,7 +1380,6 @@ var _valueToString = function _valueToString(formattedVal, rawVal) {
   } else if (formattedVal === false) {
     return "false";
   }
-
   return "";
 };
 /** @private
@@ -1718,32 +1387,29 @@ var _valueToString = function _valueToString(formattedVal, rawVal) {
 * @param {string} formattedVal
 * @param {Object} row
 * @param {!Array.<Function>} filterFuncs A selector function that execute on each item to determine the selection
+* @return {boolean}
 */
-
-
 var _collectSelectedItem = function _collectSelectedItem(selectedItems, formattedVal, row, filterFuncs) {
   if (filterFuncs) {
     if (!selectedItems[formattedVal]) {
       for (var i = filterFuncs.length; --i >= 0;) {
         if (!filterFuncs[i](row)) {
-          return;
+          return false;
         }
       }
-
       selectedItems[formattedVal] = true;
+      return true;
     }
   }
+  return false;
 };
 /** @private
 * @param {Object} uniqueValues
 * @param {string} formattedVal
 * @param {*} rawVal
 */
-
-
 var _collectUniqueValue = function _collectUniqueValue(uniqueValues, formattedVal, rawVal) {
   var rawValues = uniqueValues[formattedVal];
-
   if (rawValues) {
     if (rawValues.indexOf(rawVal) < 0) {
       // Check for unique raw values
@@ -1762,59 +1428,44 @@ var _collectUniqueValue = function _collectUniqueValue(uniqueValues, formattedVa
 * @param {Object} selectedItems
 * @return {Object} Object that maps formatted value to array of raw values
 */
-
-
 RowFilteringPlugin.prototype._getUniqueValues = function (field, dialogConfig, formatter, filterFuncs, selectedItems) {
   if (!field) {
     return null;
   }
-
   var rawDataAccessor = dialogConfig.rawDataAccessor || null;
   var formattedDataAccessor = dialogConfig.formattedDataAccessor || null;
   var userItemList = dialogConfig.itemList;
   var uniqueValues = {};
   var formattedVal = null;
   var rawVal = null;
-
   if (!Array.isArray(userItemList)) {
     userItemList = null;
-
     var dvs = this._getAvailableDataViews();
-
     var dts = dvs.map(this._getDataTable);
     var tblCount = dts.length;
-
     for (var t = 0; t < tblCount; ++t) {
       var rows = dts[t].getAllRowData();
       var rowCount = rows.length;
-
       for (var r = 0; r < rowCount; ++r) {
         var row = rows[r];
-
         if (this._rowGetter) {
           row = this._rowGetter(row);
         }
-
         if (this._rowTransform) {
           row = this._rowTransform(row);
         }
-
         var fieldVal = row[field];
         rawVal = fieldVal;
-
         if (rawDataAccessor) {
           rawVal = rawDataAccessor(rawVal);
         }
-
         if (!rawVal) {
           // Only valid values are accepted
           if (rawVal !== 0 && rawVal !== false) {
             continue;
           }
         }
-
         formattedVal = rawVal;
-
         if (formattedDataAccessor) {
           formattedVal = formattedDataAccessor(fieldVal); // The function takes data value
         } else if (formatter) {
@@ -1822,18 +1473,14 @@ RowFilteringPlugin.prototype._getUniqueValues = function (field, dialogConfig, f
         }
 
         formattedVal = _valueToString(formattedVal, rawVal);
-
         if (formattedVal) {
           _collectSelectedItem(selectedItems, formattedVal, row, filterFuncs);
-
           _collectUniqueValue(uniqueValues, formattedVal, rawVal);
         }
       }
     }
   }
-
   var additionalItems = dialogConfig.additionalItems;
-
   if (Array.isArray(additionalItems)) {
     if (userItemList) {
       userItemList = userItemList.concat(additionalItems);
@@ -1841,52 +1488,40 @@ RowFilteringPlugin.prototype._getUniqueValues = function (field, dialogConfig, f
       userItemList = additionalItems;
     }
   }
-
   var dummyRow = {};
   var userItemCount = userItemList ? userItemList.length : 0;
-
   for (var i = 0; i < userItemCount; ++i) {
     rawVal = dummyRow[field] = userItemList[i];
     formattedVal = rawVal;
-
     if (formattedDataAccessor) {
       formattedVal = formattedDataAccessor(rawVal);
     } else if (formatter) {
       formattedVal = formatter(dummyRow);
     }
-
     formattedVal = _valueToString(formattedVal, rawVal);
-
     if (formattedVal) {
       _collectSelectedItem(selectedItems, formattedVal, dummyRow, filterFuncs);
-
       _collectUniqueValue(uniqueValues, formattedVal, rawVal);
     }
   }
-
   return uniqueValues;
 };
+
 /** @private
 * @function
 * @returns {Element}
 */
-
-
 RowFilteringPlugin._createDialog = function () {
   var tag = RowFilteringPlugin._dialogTagName;
-
   if (tag == null) {
     var dialogVersion = ElfUtil.hasComponent("filter-dialog"); // WARNING: this cannot detect version 2 or less
-
     if (dialogVersion) {
       RowFilteringPlugin._dialogTagName = dialogVersion >= 3 ? "filter-dialog" : "tr-grid-filter-dialog";
     } else {
       RowFilteringPlugin._dialogTagName = "";
     }
-
     tag = RowFilteringPlugin._dialogTagName;
   }
-
   return tag ? document.createElement(tag) : null;
 };
 /** @private
@@ -1896,26 +1531,20 @@ RowFilteringPlugin._createDialog = function () {
 * @param {Function} formatter
 * @returns {Array}
 */
-
-
 RowFilteringPlugin._formatArrayExpression = function (exp, field, formatter) {
   if (Array.isArray(exp)) {
     var ary = exp.slice(); // Clone to avoid modifying original data
-
     var formattedVal = ary[1];
     var val = stringToDateObject(formattedVal);
-
     if (val !== formattedVal) {
       ary.rawValue = val;
       ary.formattedValue = formattedVal;
     }
-
     if (field && formatter && typeof val !== "string") {
       if (val != null) {
         var dummyRow = {};
         dummyRow[field] = val;
         formattedVal = formatter(dummyRow);
-
         if (formattedVal) {
           ary.rawValue = val;
           ary.formattedValue = formattedVal;
@@ -1923,49 +1552,37 @@ RowFilteringPlugin._formatArrayExpression = function (exp, field, formatter) {
         }
       }
     }
-
     ary[1] = val;
     return ary;
   }
-
   return null;
 };
 /** @public
 * @param {number} colIndex
 * @param {RowFilteringPlugin~FilterDialogOptions=} runtimeDialogOptions
 */
-
-
 RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptions) {
   var stp = this._getPlugin("SortableTitlePlugin");
-
   if (!this._filterDialog || !this._dialogInitialized) {
     if (!this._filterDialog) {
       this._filterDialog = RowFilteringPlugin._createDialog();
     }
-
     if (this._filterDialog) {
       this._dialogInitialized = true;
-
       if (!stp) {
         this._filterDialog.hideSortUI();
       } else {
         this._filterDialog.addEventListener("sortChanged", this._onDialogSortChanged.bind(this));
       }
-
       this._filterDialog.addEventListener("filterChanged", this._onDialogFilterChanged.bind(this));
     }
   }
-
   if (!this._filterDialog) {
     console.log("Filter dialog does not exist");
     return;
   }
-
   if (this._filterDialog.isShown) {
     this._filterDialog.hide(); // Hide previously opened dialog
-
-
     if (this._filterDialog._colIndex === colIndex) {
       // The dialog is already openned
       return; // Toggle open state
@@ -1973,28 +1590,23 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
   }
 
   var host = this._hosts[0];
-
   if (!host) {
     return;
-  } // Find target cell for positioning filter dialog
-
+  }
 
+  // Find target cell for positioning filter dialog
   var tsect = host.getSection("title");
-
   if (!tsect) {
     return;
   }
-
   var rCount = tsect.getRowCount();
   var cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
-
   if (!cell || !cell.getElement()) {
     return;
-  } // TODO: Handle newly inserted/added columns
-
+  }
 
+  // TODO: Handle newly inserted/added columns
   var field = this._getField(colIndex);
-
   if (!field) {
     return; // The specified column has no field
   }
@@ -2005,46 +1617,36 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
       field: field,
       grid: host
     };
-
     if (runtimeDialogOptions) {
       arg["dialogOptions"] = runtimeDialogOptions;
     }
-
     this._dispatch("beforeDialogOpened", arg);
-
     if (arg["cancel"]) {
       return;
     }
-
     if (arg["dialogOptions"]) {
       runtimeDialogOptions = arg["dialogOptions"];
     }
   }
-
   if (_typeof(runtimeDialogOptions) !== "object") {
     runtimeDialogOptions = null;
   }
-
   if (stp) {
     this._filterDialog.setSortState(stp.getSortOrder(colIndex)); // This is for ELF v3
+  }
 
-  } // Setting up dialog configuration
-
-
+  // Setting up dialog configuration
   var colData = host.getColumnData(colIndex);
   var formatOptions = colData.formatOptions;
   var useUTCTime = false;
-
   if (formatOptions) {
     if (formatOptions.formatType) {
       useUTCTime = true;
-
       if (formatOptions.useUTCTime != null) {
         useUTCTime = formatOptions.useUTCTime;
       }
     }
   }
-
   var dialogConfig = {
     // default config
     sortUI: true,
@@ -2053,48 +1655,39 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
     lang: "",
     rawDataAccessor: null,
     formattedDataAccessor: null,
-    sortLogic: null
+    sortLogic: null,
+    blankValues: false,
+    blankValuesChecked: false
   };
   var columnDialogOptions = null;
-
   var colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
-
-
   if (colSettings.fieldDataType) {
     // TODO: Use data type from Composite Grid (getColumnDataType) or Realtime Grid (getDataType) instead
     columnDialogOptions = {
       fieldDataType: colSettings.fieldDataType
     };
   }
-
   RowFilteringPlugin._overrideConfig(dialogConfig, this._dialogOptions);
-
   RowFilteringPlugin._overrideConfig(dialogConfig, columnDialogOptions);
+  RowFilteringPlugin._overrideConfig(dialogConfig, runtimeDialogOptions);
 
-  RowFilteringPlugin._overrideConfig(dialogConfig, runtimeDialogOptions); // cfo is required for storing unique entries in the dialog, even though no filter is active
+  // cfo is required for storing unique entries in the dialog, even though no filter is active
   // TODO: move rawDataAccessor and other settings to colSettings
-
-
   var cfo = this._initColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
-
-
   cfo._rawDataAccessor = dialogConfig.rawDataAccessor || null;
   cfo._formattedDataAccessor = dialogConfig.formattedDataAccessor || null;
-  var sortLogic = dialogConfig.sortLogic || null; // Populate data for filter dialog based on existing states
+  var sortLogic = dialogConfig.sortLogic || null;
 
+  // Populate data for filter dialog based on existing states
   var formatter = this._getFormatter(colIndex);
-
   var condition2D = null;
   var filterMode = ""; // default
-
   var filterFuncs = null;
   var exp = colSettings.expression;
-
   if (exp) {
     if (Array.isArray(exp)) {
       if (exp.length) {
         condition2D = Array.isArray(exp[0]) ? exp.slice() : [exp]; // Guaranteed condition2D to be a 2D array
-
         condition2D[0] = RowFilteringPlugin._formatArrayExpression(condition2D[0], field, formatter);
         condition2D[1] = RowFilteringPlugin._formatArrayExpression(condition2D[1], field, formatter);
         filterMode = "advanced";
@@ -2105,13 +1698,23 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
       }
     }
   }
-
   var selectedItems = {};
-
   var uniqueValues = cfo.uniqueValues = this._getUniqueValues(field, dialogConfig, formatter, filterFuncs, selectedItems);
-
+  if (dialogConfig.blankValues) {
+    delete uniqueValues[BLANKS];
+    var dunmmySelectItem = {};
+    var blkVals = ["", null, undefined, NaN]; // eslint-disable-line
+    var dummyRow = {};
+    for (var i = 0; i < blkVals.length; i++) {
+      var blkVal = blkVals[i];
+      dummyRow[field] = blkVal;
+      if (_collectSelectedItem(dunmmySelectItem, BLANKS, dummyRow, filterFuncs)) {
+        dialogConfig.blankValuesChecked = true;
+        break;
+      }
+    }
+  }
   var keys = Object.keys(uniqueValues);
-
   if (sortLogic) {
     keys.sort(function (a, b) {
       var rawValueA = uniqueValues[a][0];
@@ -2127,41 +1730,37 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
       nodes: [],
       checked: selectedItems[formattedVal] ? true : false
     };
-  }); // Adding inputs from conditions to uniqueValues for mapping back from the dialog
+  });
 
+  // Adding inputs from conditions to uniqueValues for mapping back from the dialog
   if (condition2D) {
     var cond = condition2D[0];
-
     if (cond && cond.formattedValue) {
       if (!uniqueValues[cond.formattedValue]) {
         uniqueValues[cond.formattedValue] = [cond.rawValue];
       }
     }
-
     cond = condition2D[1];
-
     if (cond && cond.formattedValue) {
       if (!uniqueValues[cond.formattedValue]) {
         uniqueValues[cond.formattedValue] = [cond.rawValue];
       }
     }
-  } // Initialize dialog
-
+  }
 
+  // Initialize dialog
   if (this._filterDialog.init) {
     // TODO: support initiailization in v1
     this._filterDialog.init(dialogConfig);
-  } // TODO: Move all settings to configuration object
-
+  }
 
+  // TODO: Move all settings to configuration object
   this._filterDialog.useUTCTime = useUTCTime;
   this._filterDialog.target = cell.getElement();
   this._filterDialog._colIndex = colIndex;
   this._filterDialog.data = items; // TODO: Move all settings to configuration object
-
   this._filterDialog.filterMode = filterMode;
   this._filterDialog.conditions = condition2D;
-
   this._filterDialog.show();
 };
 /** @private
@@ -2169,160 +1768,128 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptio
 * @param {Object} config
 * @param {RowFilteringPlugin~FilterDialogOptions=} userConfig
 */
-
-
 RowFilteringPlugin._overrideConfig = function (config, userConfig) {
   if (!userConfig) {
     return;
   }
-
   var sortUI = userConfig["sortUI"];
-
   if (sortUI != null) {
     config.sortUI = sortUI;
   }
-
   var filterUI = userConfig["filterUI"];
-
   if (filterUI != null) {
     config.filterUI = filterUI;
   }
-
   var fieldDataType = userConfig["fieldDataType"];
-
   if (fieldDataType != null) {
     config.fieldDataType = fieldDataType;
   }
-
   var lang = userConfig["lang"];
-
   if (lang != null) {
     config.lang = lang;
   }
-
   var rawDataAccessor = userConfig["rawDataAccessor"];
-
   if (typeof rawDataAccessor === "function" || rawDataAccessor === null) {
     // Allow null value
     config.rawDataAccessor = rawDataAccessor;
   }
-
   var formattedDataAccessor = userConfig["formattedDataAccessor"];
-
   if (typeof formattedDataAccessor === "function" || formattedDataAccessor === null) {
     // Allow null value
     config.formattedDataAccessor = formattedDataAccessor;
   }
-
   var sortLogic = userConfig["sortLogic"];
-
   if (typeof sortLogic === "function" || sortLogic === null) {
     // Allow null value
     config.sortLogic = sortLogic;
   }
-
   var itemList = userConfig["itemList"];
-
   if (itemList != null) {
     config.itemList = itemList;
   }
-
   var additionalItems = userConfig["additionalItems"];
-
   if (additionalItems != null) {
     config.additionalItems = additionalItems;
   }
+  var blankValues = userConfig["blankValues"];
+  if (blankValues) {
+    if (typeof blankValues === "string") {
+      config.blankValues = blankValues;
+    } else {
+      config.blankValues = BLANKS;
+    }
+  }
 };
 /** @private
 * @param {number} colIndex
 * @return {Function}
 */
-
-
 RowFilteringPlugin.prototype._getFormatter = function (colIndex) {
   var tfp = this._getPlugin("TextFormattingPlugin");
-
   if (tfp) {
     var formatter = tfp.getFormatter(colIndex);
-
     if (formatter) {
       return formatter.format || null;
     }
   }
-
   return null;
 };
 /** @private
 * @return {!FilterBuilder}
 */
-
-
 RowFilteringPlugin._getFilterBuilder = function () {
   if (!RowFilteringPlugin._filterBuilder) {
     RowFilteringPlugin._filterBuilder = new FilterBuilder();
   }
-
   return RowFilteringPlugin._filterBuilder;
 };
+
 /** @private
 * @param {Object} e
 */
-
-
 RowFilteringPlugin.prototype._onDialogFilterChanged = function (e) {
   var colIndex = this._filterDialog._colIndex;
-
   var cfo = this._getColumnFilterOption(colIndex);
-
   var uniqueValues = cfo.uniqueValues; // Unique values have to be stored before the removal of the filter
-
   var rawDataAccessor = cfo._rawDataAccessor;
   var formattedDataAccessor = cfo._formattedDataAccessor;
   var ctx = null;
-
   if (rawDataAccessor || formattedDataAccessor) {
     ctx = {
       "rawDataAccessor": rawDataAccessor || null,
       "formattedDataAccessor": formattedDataAccessor || null
     };
   }
+  this.removeColumnFilters(colIndex);
 
-  this.removeColumnFilters(colIndex); // Check inputs from advanced filter UIs
-
+  // Check inputs from advanced filter UIs
   var conditions = e.detail.conditions;
-
   if (Array.isArray(conditions)) {
     // Advanced condition filtering. Expecting 2D-Array
     // Ensure rawValue input for number field data type
     var condCount = conditions.length;
-
     for (var m = 0; m < condCount; ++m) {
       var cond = conditions[m];
-      var opDef = FilterOperators[cond[0]]; // string type has no need for formatted data or raw data. What is in display is the most important
-
+      var opDef = FilterOperators[cond[0]];
+      // string type has no need for formatted data or raw data. What is in display is the most important
       if (opDef && opDef.type !== "string") {
         var inputVal = cond[1]; // inputVal is hardcoded at index 1
-
         var rawValues = uniqueValues[inputVal];
-
         if (rawValues != null) {
           cond[1] = rawValues[0];
         }
       }
     }
-
     if (ctx) {
       ctx["_autoGenerated"] = true;
     }
-
     this.addColumnFilter(colIndex, conditions, ctx);
     return;
-  } // Check input from free text input
-
+  }
 
+  // Check input from free text input
   var selVal = e.detail.value;
   var selAry = null;
-
   if (selVal) {
     if (typeof selVal === "string") {
       // Custom filter mode (free style text).
@@ -2330,47 +1897,45 @@ RowFilteringPlugin.prototype._onDialogFilterChanged = function (e) {
       this.addColumnFilter(colIndex, selVal);
       return;
     } else {
-      selAry =
-      /** @type{Array} */
-      selVal; // Expecting Array of object
+      selAry = /** @type{Array} */selVal; // Expecting Array of object
     }
   }
 
   var selCount = selAry ? selAry.length : 0;
-
   if (!selCount) {
     return;
-  } // The given input is from simple text filter selector
-  // Validate if the input is correct and prepare selected items for building filter
-
+  }
 
+  // The given input is from simple text filter selector
+  // Validate if the input is correct and prepare selected items for building filter
   var itemMap = {};
   var selectedItems = {};
   var atLeastOne = false;
-
   for (var i = 0; i < selCount; ++i) {
     var formattedVal = selAry[i].title; // title is defined by the multi-select element
     // var selIdx = selAry[i].index; // index cannot be used due to filtering
-
+    if (selAry[i].value === BLANKS) {
+      if (!ctx) {
+        ctx = {};
+      }
+      ctx.blankValues = true;
+      atLeastOne = true;
+      continue;
+    }
     var rawVals = uniqueValues[formattedVal];
-
     if (!rawVals) {
       continue;
     }
-
     atLeastOne = true;
     selectedItems[formattedVal] = true;
     var jLen = rawVals.length;
-
     for (var j = 0; j < jLen; ++j) {
       itemMap[rawVals[j]] = true;
     }
   }
-
   if (atLeastOne) {
     this.addColumnFilter(colIndex, itemMap, ctx);
   }
-
   this._dispatch("dialogCommitted", {
     "value": e.detail.value,
     "fieldDataType": e.detail.fieldDataType,
@@ -2380,21 +1945,16 @@ RowFilteringPlugin.prototype._onDialogFilterChanged = function (e) {
 /** @private
 * @param {Object} e
 */
-
-
 RowFilteringPlugin.prototype._onDialogSortChanged = function (e) {
   var stp = this._getPlugin("SortableTitlePlugin");
-
   if (stp) {
     var colIndex = this._filterDialog._colIndex;
     var eDetail = e.detail.value ? e.detail.value : e.detail;
-
     if (stp.getSortOrder(colIndex) === eDetail) {
       stp.sortColumn(colIndex, "n");
     } else {
       stp.sortColumn(colIndex, eDetail);
     }
-
     this._dispatch("dialogCommitted", {
       "sortOrder": e.detail.value,
       "colIndex": colIndex
@@ -2404,12 +1964,9 @@ RowFilteringPlugin.prototype._onDialogSortChanged = function (e) {
 /** @private
 * @param {Object} e
 */
-
-
 RowFilteringPlugin.prototype._onColumnAdded = function (e) {
   if (e["context"]) {
     var hasFilter = this._setColumnOptions(e["colIndex"], e["context"]);
-
     if (hasFilter) {
       this._applyPendingFilter();
     }
@@ -2418,47 +1975,35 @@ RowFilteringPlugin.prototype._onColumnAdded = function (e) {
 /** @private
 * @param {Object} e
 */
-
-
 RowFilteringPlugin.prototype._onColumnRemoved = function (e) {
-  var colData =
-  /** @type{Object} */
-  e.columnData;
-
+  var colData = /** @type{Object} */e.columnData;
   if (!colData) {
     return;
   }
-
   var crf = colData["rowFiltering"];
   var cfo = crf["filterOption"];
-
   if (cfo) {
     var funcIndex = this._columnFilters.indexOf(cfo);
-
     if (funcIndex >= 0) {
       this._columnFilters.splice(funcIndex, 1);
     }
-
     this._dispatch("filterChanged", {
       "filterType": "column",
       "changeType": "remove",
       "colIndex": e.colIndex,
       "field": cfo._field || ""
     });
-
     this._requestFilterRefresh();
   }
 };
+
 /** the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter. A segment with no child is treated the same way as an empty segment.
 * @public
 * @param {boolean=} enabled=true
 */
-
-
 RowFilteringPlugin.prototype.enableEmptySegmentFiltering = function (enabled) {
   var host = this._hosts[0];
   var dv = host ? host.getDataSource() : null;
-
   if (dv && dv.enableEmptySegmentFiltering) {
     dv.enableEmptySegmentFiltering(enabled);
   }
@@ -2467,16 +2012,12 @@ RowFilteringPlugin.prototype.enableEmptySegmentFiltering = function (enabled) {
 * @public
 * @param {boolean=} enabled=true
 */
-
-
 RowFilteringPlugin.prototype.enableSeparatorFiltering = function (enabled) {
   var host = this._hosts[0];
   var dv = host ? host.getDataSource() : null;
-
   if (dv && dv.enableSeparatorFiltering) {
     dv.enableSeparatorFiltering(enabled);
   }
 };
-
 export default RowFilteringPlugin;
 export { RowFilteringPlugin, RowFilteringPlugin as RowFiltering, RowFilteringPlugin as RowFilteringExtension };