@refinitiv-ui/efx-grid 6.0.94 → 6.0.96

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

@@ -1,9 +1,8 @@
-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 {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, cloneObject } from "../../tr-grid-util/es6/Util.js";
 
 /** @event RowFilteringPlugin#click
@@ -112,14 +111,14 @@ 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)
-  return {
-    field: cfo._field || "",
-    expression: cfo._expressions[0],
-    context: ctx != null && !ctx._autoGenerated ? ctx : null
-  };
+let _toFilterExpression = function(cfo) {
+	let 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
+	};
 };
 /** @private
 * @function
@@ -127,47 +126,53 @@ var _toFilterExpression = function _toFilterExpression(cfo) {
 * @param {*} val
 * @return {Array}
 */
-var _arrayConcat = function _arrayConcat(ary, val) {
-  if (Array.isArray(val) && val.length) {
-    if (ary) {
-      return ary.concat(val);
-    } else {
-      return val;
-    }
-  }
-  return ary;
+let _arrayConcat = function(ary, val) {
+	if(Array.isArray(val) && val.length) {
+		if(ary) {
+			return ary.concat(val);
+		} else {
+			return val;
+		}
+	}
+	return ary;
 };
 
 /** @type {string}
 * @private
 * @const
 */
-var BLANKS = "(Blanks)";
+const BLANKS = "(Blanks)";
 
 /** @constructor
 * @extends {GridPlugin}
 */
-var RowFilteringPlugin = function RowFilteringPlugin() {
-  var t = this;
-  t._onPreSectionRender = t._onPreSectionRender.bind(t);
-  t._onColumnAdded = t._onColumnAdded.bind(t);
-  t._onColumnRemoved = t._onColumnRemoved.bind(t);
-  t._onPreLoadedDialog = t._onPreLoadedDialog.bind(t);
-  t._onIconClicked = t._onIconClicked.bind(t);
-  t._filterLogic = t._filterLogic.bind(t);
-  t._updateAllColumnIcons = t._updateAllColumnIcons.bind(t);
-  t.refresh = t.refresh.bind(t);
-  t._requestFilterRefresh = t._requestFilterRefresh.bind(t);
-  t._globalFilters = [];
-  t._globalContexts = [];
-  t._columnFilters = [];
-  t._hosts = [];
-  t._dvs = [];
-  t._funcMap = {};
-  t._nameMap = {};
+let RowFilteringPlugin = function () {
+	let t = this;
+
+	t._onPreSectionRender = t._onPreSectionRender.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onColumnRemoved = t._onColumnRemoved.bind(t);
+	t._onPreLoadedDialog = t._onPreLoadedDialog.bind(t);
+
+	t._onIconClicked = t._onIconClicked.bind(t);
+	t._filterLogic = t._filterLogic.bind(t);
+	t._updateAllColumnIcons = t._updateAllColumnIcons.bind(t);
+	t.refresh = t.refresh.bind(t);
+	t._requestFilterRefresh = t._requestFilterRefresh.bind(t);
+
+
+	t._globalFilters = [];
+	t._globalContexts = [];
+	t._columnFilters = [];
+	t._hosts = [];
+	t._dvs = [];
+
+	t._funcMap = {};
+	t._nameMap = {};
 };
 Ext.inherits(RowFilteringPlugin, GridPlugin);
 
+
 /** @type {!Object.<string, Function>}
 * @private
 */
@@ -257,245 +262,295 @@ RowFilteringPlugin._dialogTagName; // intentionally left undefined
 */
 RowFilteringPlugin.prototype._dvs;
 
+
 /** @public
 * @return {string}
 */
 RowFilteringPlugin.prototype.getName = function () {
-  return "RowFilteringPlugin"; // Read Only
+	return "RowFilteringPlugin"; // Read Only
 };
 /** @public
 * @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
-  // TODO
+	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
+	// 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();
+	let 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();
+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 {
-      this._removeColumnFilters(c);
-    }
-  }
+RowFilteringPlugin.prototype._applyPendingFilter = function() {
+	if(!this._initializedGrid) {
+		return;
+	}
+	if(!this._hasPendingFilter) {
+		return;
+	}
+
+	this._hasPendingFilter = false;
+	let colCount = this.getColumnCount();
+	for(let c = 0; c < colCount; ++c) {
+		let colSettings = this._getUserColumnSettings(c);
+		if(colSettings.expression) {
+			this.addColumnFilter(c, colSettings.expression, colSettings.filterState);
+		} else {
+			this._removeColumnFilters(c);
+		}
+	}
 };
 /** @private
 */
-RowFilteringPlugin.prototype._onPreLoadedDialog = function () {
-  if (this._filterDialog) {
-    this._filterDialog.style.display = "";
-    var pn = this._filterDialog.parentNode;
-    if (pn) {
-      pn.removeChild(this._filterDialog);
-    }
-  }
+RowFilteringPlugin.prototype._onPreLoadedDialog = function() {
+	if(this._filterDialog) {
+		this._filterDialog.style.display = "";
+		let 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 {
-          this._hosts[index].enableClass("always-on-filter", false);
-        }
-      }
-    }
-    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");
-    this.addListener(rowFiltering, "iconCreated");
-    this.addListener(rowFiltering, "filterChanged");
-    this.addListener(rowFiltering, "refreshed");
-  }
-  var columns = options["columns"];
-  if (!columns) {
-    return;
-  }
-
-  // let 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();
+	if(!options) { return; }
+
+	let 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(let 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 {
+					this._hosts[index].enableClass("always-on-filter", false);
+				}
+			}
+		}
+		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");
+		this.addListener(rowFiltering, "iconCreated");
+		this.addListener(rowFiltering, "filterChanged");
+		this.addListener(rowFiltering, "refreshed");
+	}
+
+	let columns = options["columns"];
+	if(!columns) { return; }
+
+	// let host = this._hosts[0];
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
+		let 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
-      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 filterIcon = colSettings.filterIcon;
-    if (!filterIcon) {
-      column.filterIcon = false;
-    }
-  }
-  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 separatorFiltering setting from DataView
-  if (dirty) {
-    obj.rowFiltering = extOptions;
-  }
-  return obj;
+	let obj = gridOptions || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	for(let i = 0; i < len; ++i) {
+		let column = columns[i];
+		if(!column) {
+			column = columns[i] = {};
+		}
+
+		let colSettings = this._getUserColumnSettings(i);
+		let exp = colSettings.expression;
+		if(exp && typeof exp !== "function") { // TODO: Accept function type
+			if(typeof exp === "object" && !Array.isArray(exp)) {
+				let 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
+			}
+		}
+		let ctx = colSettings.filterState;
+		if(ctx != null) {
+			if(typeof ctx !== "object" || !ctx._autoGenerated) {
+				column.filterState = ctx;
+			}
+		}
+
+		let filterIcon = colSettings.filterIcon;
+		if(!filterIcon) {
+			column.filterIcon = false;
+		}
+	}
+
+	let extOptions = obj.rowFiltering;
+	let 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 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.
@@ -503,33 +558,32 @@ RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
 * @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]) {
-      disabled = true;
-      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();
-    }
-  }
+RowFilteringPlugin.prototype.disable = function(opt_disabled, opt_id) {
+	let disabled = opt_disabled !== false;
+	if(!this._disablingIds) {
+		this._disablingIds = {};
+	}
+	if(!opt_id) { opt_id = "_"; }
+	this._disablingIds[opt_id] = disabled;
+
+	disabled = false;
+	for(let key in this._disablingIds) { // Find cumulative state
+		if(this._disablingIds[key]) {
+			disabled = true;
+			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
@@ -540,30 +594,32 @@ 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;
+RowFilteringPlugin.prototype.addFilter = function(exp, funcName, ctx) {
+	let 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
 * @public
@@ -572,8 +628,8 @@ 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);
+RowFilteringPlugin.prototype.addGridFilter = function(exp, ctx) {
+	return this.addFilter(exp, null, ctx);
 };
 /** @private
 * @param {RowFilteringPlugin~Expression} exp
@@ -581,40 +637,40 @@ 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;
+RowFilteringPlugin.prototype._parseFilter = function(exp, colIndex, ctx) {
+	if(!exp) {
+		return null;
+	}
+	if(typeof exp === "function") {
+		return exp;
+	}
+	let filterBuilder = RowFilteringPlugin._getFilterBuilder();
+	let validIdx = (colIndex || colIndex === 0);
+	let field = validIdx ? this._getField(colIndex) : "";
+	let formatter = validIdx ? this._getFormatter(colIndex) : null;
+
+	let 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 {
+		let rawDataAccessor = null;
+		let 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.
 * @public
@@ -624,60 +680,65 @@ 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
-    }
-  }
-
-  var func = null;
-  if (typeof exp === "function") {
-    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
-  this._requestFilterRefresh();
-  this._updateColumnIcon(colIndex);
-  return true;
+RowFilteringPlugin.prototype.addColumnFilter = function(colIndex, exp, ctx) {
+	if(colIndex < 0 || colIndex >= this.getColumnCount()) {
+		return false;
+	}
+
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		if(cfo._expressions[0] === exp) {
+			return false; // The same expression is getting added on the same column twice
+		}
+	}
+
+	let func = null;
+	if(typeof exp === "function") {
+		func = /** @type{Function} */(exp);
+		if(ctx && typeof ctx === "string") {
+			exp = ctx;
+		}
+	} else {
+		func = this._parseFilter(exp, colIndex, ctx);
+	}
+
+	if(!func) {
+		return false;
+	}
+
+	let 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};
+	}
+
+	let 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
+	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}
 * @public
@@ -699,25 +760,27 @@ RowFilteringPlugin.prototype.addColumnFilter = function (colIndex, exp, ctx) {
 *   }
 * );
 */
-RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
-  var curExp = this.getColumnFilterExpression(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;
+RowFilteringPlugin.prototype.setColumnFilter = function(colIndex, exp, ctx) {
+	let curExp = this.getColumnFilterExpression(colIndex);
+	if(curExp === exp) {
+		return false;
+	}
+
+	let removed = this._removeColumnFilters(colIndex);
+
+	let added = this.addColumnFilter(colIndex, exp, ctx);
+	if(!added && removed) {
+		this._updateColumnIcon(colIndex);
+	}
+	return removed || added;
 };
 /** @public
  * @param {number} colIndex
  * @return {RowFilteringPlugin~Expression}
  */
-RowFilteringPlugin.prototype.getColumnFilterExpression = function (colIndex) {
-  var colSettings = this._getUserColumnSettings(colIndex);
-  return colSettings.expression || null;
+RowFilteringPlugin.prototype.getColumnFilterExpression = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	return colSettings.expression || null;
 };
 /** Set data to colData["rowFiltering"]
 * @private
@@ -738,95 +801,96 @@ RowFilteringPlugin.prototype.getColumnFilterExpression = function (colIndex) {
 *   }
 * };
 */
-RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, userObj) {
-  var colSettings = this._getUserColumnSettings(colIndex);
-  var filterIcon = userObj["filterIcon"];
-
-  // 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
-  }
-
-  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;
+RowFilteringPlugin.prototype._setColumnOptions = function(colIndex, userObj) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	let filterIcon = userObj["filterIcon"];
+
+	// TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
+	let 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
+	}
+	if(filterIcon != null) {
+		colSettings.filterIcon = filterIcon;
+	}
+	let exp = userObj["filter"];
+	if(exp != null) {
+		colSettings.expression = exp;
+		colSettings.filterState = null;
+		this._hasPendingFilter = true;
+	}
+	let filterState = userObj["filterState"];
+	if(filterState != null) {
+		colSettings.filterState = filterState;
+	}
+
+	let 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;
+RowFilteringPlugin.prototype._getUserColumnSettings = function(colIndex) {
+	let colData = this._newColumnData(colIndex);
+	let 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 {
-    return null;
-  }
+RowFilteringPlugin.prototype._getColumnFilterOption = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	if(colSettings) {
+		return colSettings["filterOption"] || null;
+	} else {
+		return null;
+	}
 };
 /** Remove colData["rowFiltering"]["filterOption"]
 * @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",
-        "changeType": "remove",
-        "colIndex": colIndex,
-        "field": this._getField(colIndex)
-      });
-    }
-  }
+RowFilteringPlugin.prototype._removeActiveFilterStates = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	colSettings.expression = null;
+	colSettings.filterState = null;
+	let cfo = colSettings["filterOption"];
+	if(cfo) {
+		colSettings["filterOption"] = null;
+		if(cfo._filters.length) {
+			this._dispatch("filterChanged", {
+				"filterType": "column",
+				"changeType": "remove",
+				"colIndex": colIndex,
+				"field": this._getField(colIndex)
+			});
+		}
+	}
 };
 /** @private
 * @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;
+RowFilteringPlugin.prototype._initColumnFilterOption = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(!cfo) {
+		cfo = {};
+		cfo._filters = [];
+		cfo._expressions = [];
+		cfo._context = [];
+		let colSettings = this._getUserColumnSettings(colIndex);
+		colSettings["filterOption"] = cfo;
+	}
+	return cfo;
 };
 
 /** Remove the registered global filter. The column filter cannot be removed
@@ -834,33 +898,32 @@ RowFilteringPlugin.prototype._initColumnFilterOption = function (colIndex) {
 * @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;
-    func = this._nameMap[funcRef];
-    funcIndex = this._globalFilters.indexOf(func);
-  } else {
-    func = /** @type{Function} */funcRef;
-    funcIndex = this._globalFilters.indexOf(func);
-    if (funcIndex >= 0) {
-      for (var key in this._nameMap) {
-        if (this._nameMap[key] === func) {
-          funcName = key;
-        }
-      }
-    }
-  }
-  if (funcIndex < 0) {
-    return false;
-  }
-  delete this._nameMap[funcName];
-  this._globalFilters.splice(funcIndex, 1);
-  this._globalContexts.splice(funcIndex, 1);
-  this._requestFilterRefresh();
-  return true;
+RowFilteringPlugin.prototype.removeFilter = function(funcRef) {
+	let func = null;
+	let funcName = "";
+	let funcIndex = -1;
+	if(typeof funcRef === "string") {
+		funcName = /** @type{string} */(funcRef);
+		func = this._nameMap[funcRef];
+		funcIndex = this._globalFilters.indexOf(func);
+	} else {
+		func = /** @type{Function} */(funcRef);
+		funcIndex = this._globalFilters.indexOf(func);
+		if(funcIndex >= 0) {
+			for(let key in this._nameMap) {
+				if(this._nameMap[key] === func) {
+					funcName = key;
+				}
+			}
+		}
+	}
+	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
 * @public
@@ -868,35 +931,35 @@ 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;
+RowFilteringPlugin.prototype.removeColumnFilters = function(colIndex) {
+	if(colIndex == null) { // Prevent user mistake
+		return this.removeAllColumnFilters();
+	}
+
+	let dirty = this._removeColumnFilters(colIndex);
+	if(dirty) {
+		this._updateColumnIcon(colIndex);
+	}
+	return dirty;
 };
 /** @private
 * @param {number} 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;
+RowFilteringPlugin.prototype._removeColumnFilters = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		let funcIndex = this._columnFilters.indexOf(cfo);
+		if(funcIndex >= 0) {
+			this._columnFilters.splice(funcIndex, 1);
+		}
+		this._removeActiveFilterStates(colIndex); // filterChanged fired
+		let 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
 * @public
@@ -912,155 +975,159 @@ RowFilteringPlugin.prototype.removeColumnFilter = RowFilteringPlugin.prototype.r
 * @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;
+RowFilteringPlugin.prototype.removeAllColumnFilters = function() {
+	if(this._columnFilters.length) {
+		this._columnFilters.length = 0;
+
+		let inputExt = this._getPlugin("FilterInputPlugin");
+		let colCount = this._getColumnCount();
+		for(let 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",
-      "colIndex": -1,
-      "field": ""
-    });
-  }
-  this.removeAllColumnFilters();
-  this._requestFilterRefresh();
+RowFilteringPlugin.prototype.removeAllFilters = function() {
+	let 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",
+			"colIndex": -1,
+			"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;
+RowFilteringPlugin.prototype.setOverridingFilter = function(func) {
+	this._overridingFilter = func;
 };
 /** PreTransform is used to minimize the same data transformation on multiple filters. Output from the given method will be used on all subsequent filters. Note that it will be used for every existing row, so performance should be critical in here. This is optional setting.
 * @public
 * @param {Function} func This function must return object with key and value pairs
 */
-RowFilteringPlugin.prototype.setPreTransform = function (func) {
-  this._preTransform = func;
+RowFilteringPlugin.prototype.setPreTransform = function(func) {
+	this._preTransform = func;
 };
 /** This is the same as preTransform, only it is executed just before column filters and after the global filters. This is optional setting.
 * @public
 * @param {Function} func This function must return object with key and value pairs
 */
-RowFilteringPlugin.prototype.setRowTransform = function (func) {
-  this._rowTransform = func;
+RowFilteringPlugin.prototype.setRowTransform = function(func) {
+	this._rowTransform = func;
 };
 
 /** @public
 * @return {!Array.<Function>} All global filters
 */
-RowFilteringPlugin.prototype.getFilters = function () {
-  return this._globalFilters;
+RowFilteringPlugin.prototype.getFilters = function() {
+	return this._globalFilters;
 };
 /** Returns filter functions. Use getConfigObject for saving and loading instead of this function
 * @public
 * @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;
+RowFilteringPlugin.prototype.getAllColumnFilters = function() {
+	let filters = [];
+	let len = this._columnFilters.length;
+	for(let i = 0; i < len; ++i) {
+		let cfo = this._columnFilters[i];
+		let jLen = cfo._filters.length;
+		for(let 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.
 * @public
 * @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;
+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);
-      }
-    }
-  }
+RowFilteringPlugin.prototype.setFilterExpressions = function(filterExps) {
+	this.removeAllColumnFilters();
+
+	if(Array.isArray(filterExps)) {
+		let api = this.getGridApi();
+		let fields = api.getColumnFields();
+		let len = filterExps.length;
+		for(let i = 0; i < len; ++i) {
+			let filterExp = filterExps[i];
+			let field = filterExp.field;
+			let 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;
+RowFilteringPlugin.prototype.hasColumnFilter = function() {
+	return (this._columnFilters.length > 0);
 };
 /** @public
 * @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;
+RowFilteringPlugin.prototype.getColumnFilterIcons = function(colIndex) {
+	let icons = [];
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		let tsect = host.getSection("title");
+		if(!tsect) {
+			continue;
+		}
+		let rCount = tsect.getRowCount();
+		let 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();
+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>
@@ -1068,105 +1135,114 @@ RowFilteringPlugin.prototype.updateAllColumnIcons = function () {
 * @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();
-  }
+RowFilteringPlugin.prototype.addDataView = function(dv) {
+	let 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
-  }
+RowFilteringPlugin.prototype.removeDataView = function(dv) {
+	let 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();
+	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);
+RowFilteringPlugin.prototype._onIconClicked = function(e) {
+	let host = this._hosts[0];
+	if(!host) { return; }
+
+	let pos = host.getRelativePosition(e);
+	this.openDialog(pos.colIndex);
+
+	e.stopPropagation();
+	e.preventDefault();
+	this._dispatch("click", e);
 };
 /** @private
 * @param {string} rid
 * @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;
-          }
-        }
-      }
-    }
-  }
-  return true;
+RowFilteringPlugin.prototype._filterLogic = function(rid, rowData) {
+	if(rowData) {
+		if(this._rowGetter) {
+			rowData = this._rowGetter(rowData);
+		}
+		if(this._preTransform) {
+			rowData = this._preTransform(rowData);
+		}
+		let i;
+		let 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) {
+				let ret = this._overridingFilter(rowData, rid);
+				if(ret) {
+					return (ret > 0);
+				}
+			}
+
+			if(this._rowTransform) {
+				rowData = this._rowTransform(rowData);
+			}
+
+			for(i = 0; i < len; ++i) {
+				let cfo = this._activeColFilters[i];
+				let jLen = cfo._filters.length;
+				for(let j = 0; j < jLen; ++j) {
+					if(
+						!cfo._filters[j](
+							rowData,
+							rid,
+							cfo._context[j]
+						)
+					) {
+						return false;
+					}
+				}
+			}
+		}
+	}
+	return true;
 };
 /** @private */
-RowFilteringPlugin.prototype._requestFilterRefresh = function () {
-  if (!this._filterTimerId) {
-    this._filterTimerId = setTimeout(this.refresh, 10);
-  }
+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);
-  }
+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.
@@ -1174,118 +1250,124 @@ RowFilteringPlugin.prototype._setTimerForUpdatingIcons = function () {
 * @suppress {checkTypes}
 * @fires RowFilteringPlugin#refreshed
 */
-RowFilteringPlugin.prototype.refresh = function () {
-  this._filterTimerId = 0;
-  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", {});
-  }
+RowFilteringPlugin.prototype.refresh = function() {
+	this._filterTimerId = 0;
+
+	this._activeColFilters = this._columnFilters;
+	//check cstp
+	let cstkp = this._getPlugin("ColumnStackPlugin");
+	if(cstkp) {
+		let colIndex, cfo;
+		let host = this._hosts[0];
+		let 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);
+			}
+		}
+	}
+
+	let totalFilter = this._globalFilters.length + this._activeColFilters.length;
+	let logic = (!this._disabled && totalFilter) ? this._filterLogic : null;
+
+	let dirty = 0;
+	let dvs = this._getAvailableDataViews();
+	for(let i = dvs.length; --i >= 0;) {
+		dirty |= dvs[i].filterIn(logic);
+	}
+
+	if(dirty) {
+		this._dispatch("refreshed", {});
+	}
 };
 /** @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)
-    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 = void 0;
-        if (ElfUtil.hasComponent("ef-icon") >= 3) {
-          filterIcon = document.createElement("ef-icon");
-          filterIcon.setAttribute("icon", "filter");
-        } else {
-          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 {
-        cell.enableClass("active-filter", false);
-      }
-    } else {
-      if (cell._filterIcon) {
-        cell.removeFloatingIcon(cell._filterIcon);
-        cell._filterIcon = null;
-        cell.enableClass("active-filter", false);
-      }
-    }
-  }
+RowFilteringPlugin.prototype._updateColumnIcon = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
+	let colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
+	let iconActivation = colSettings.filterIcon == false ? "none" : this._iconActivation;
+	let hasFilter = cfo ? cfo._filters.length : 0;
+
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		let tsect = host.getSection("title");
+		if(!tsect) {
+			continue;
+		}
+		let rCount = tsect.getRowCount();
+		let cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
+		let column = tsect.getColumn(colIndex);
+		if(!cell) {
+			continue;
+		}
+		// HACK: Update cell padding for all type of icons (sorting and column grouping icons)
+		if(cell["updatePadding"]) {
+			cell["updatePadding"]();
+		}
+
+		let isColumnMovable = host.isColumnMovable(colIndex);
+		if(isColumnMovable) {
+			column.enableClass("movable", true);
+		} else {
+			column.enableClass("movable", false);
+		}
+
+		let onActiveFilter = iconActivation !== "always" && iconActivation !== "onHover";
+		let noFilterIcon = this._disabled || iconActivation === "none" || (onActiveFilter && !hasFilter);
+		if(!noFilterIcon) {
+			if(!cell._filterIcon) {
+				let filterIcon;
+				if(ElfUtil.hasComponent("ef-icon") >= 3) {
+					filterIcon = document.createElement("ef-icon");
+					filterIcon.setAttribute("icon", "filter");
+				} else {
+					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{
+				cell.enableClass("active-filter", false);
+			}
+		} else {
+			if(cell._filterIcon) {
+				cell.removeFloatingIcon(cell._filterIcon);
+				cell._filterIcon = null;
+				cell.enableClass("active-filter", false);
+			}
+		}
+	}
 };
 /** @private */
-RowFilteringPlugin.prototype._updateAllColumnIcons = function () {
-  this._uiTimerId = 0;
-  var colCount = this._getColumnCount();
-  for (var i = 0; i < colCount; ++i) {
-    this._updateColumnIcon(i);
-  }
+RowFilteringPlugin.prototype._updateAllColumnIcons = function() {
+	this._uiTimerId = 0;
+
+	let colCount = this._getColumnCount();
+	for(let 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;
+RowFilteringPlugin.prototype._getColumnCount = function() {
+	let 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.
@@ -1294,70 +1376,70 @@ RowFilteringPlugin.prototype._getColumnCount = function () {
 * @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;
+RowFilteringPlugin.prototype.setColumnFilterState = function(colIndex, ctx) {
+	let 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
 * @public
 * @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;
+RowFilteringPlugin.prototype.getColumnFilterState = function(colIndex) {
+	let 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
 * @public
 * @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;
+RowFilteringPlugin.prototype.getColumnFilterStates = function() {
+	let colCount = this._hosts[0] ? this._hosts[0].getColumnCount() : 0;
+	let states = new Array(colCount);
+	for(let 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;
-  }
+RowFilteringPlugin.prototype._getAvailableDataViews = function() {
+	if(this._dvs.length) {
+		return this._dvs;
+	} else {
+		let len = this._hosts.length;
+		let ary = [];
+		for(let i = 0; i < len; ++i) {
+			let host = this._hosts[i];
+			let dv = host.getDataSource();
+			if(dv) {
+				ary.push(dv);
+			}
+		}
+		return ary;
+	}
 };
 /** @private
 * @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;
+RowFilteringPlugin.prototype._getDataTable = function(dv) {
+	let dt = dv ? dv.getDataSource() : null;
+	while(dt && dt.getDataSource()) {
+		dt = dt.getDataSource();
+	}
+	return dt;
 };
 
 /** @public
@@ -1372,12 +1454,12 @@ 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,
-    formattedDataAccessor: formattedDataAccessor
-  };
-  return this._getUniqueValues(field, dialogConfig, formatter, filterFuncs, selectedItems);
+RowFilteringPlugin.prototype.getUniqueValues = function(field, formatter, fmtField, rawDataAccessor, formattedDataAccessor, filterFuncs, selectedItems) {
+	let dialogConfig = {
+		rawDataAccessor: rawDataAccessor,
+		formattedDataAccessor: formattedDataAccessor
+	};
+	return this._getUniqueValues(field, dialogConfig, formatter, filterFuncs, selectedItems);
 };
 
 /** @private
@@ -1385,25 +1467,24 @@ RowFilteringPlugin.prototype.getUniqueValues = function (field, formatter, fmtFi
 * @param {*} rawVal
 * @returns {string}
 */
-var _valueToString = function _valueToString(formattedVal, rawVal) {
-  if (typeof formattedVal === "string") {
-    return formattedVal;
-  }
-  if (formattedVal) {
-    if (_typeof(formattedVal) != "object") {
-      return rawVal + "";
-    } else if (formattedVal instanceof Date) {
-      return formattedVal.toLocaleString("en-GB");
-    } else {
-      // Object type cannot be converted to string
-      return "";
-    }
-  } else if (formattedVal === 0) {
-    return "0";
-  } else if (formattedVal === false) {
-    return "false";
-  }
-  return "";
+let _valueToString = function(formattedVal, rawVal) {
+	if(typeof formattedVal === "string") {
+		return formattedVal;
+	}
+	if(formattedVal) {
+		if(typeof formattedVal != "object") {
+			return rawVal + "";
+		} else if(formattedVal instanceof Date) {
+			return formattedVal.toLocaleString("en-GB");
+		} else { // Object type cannot be converted to string
+			return"";
+		}
+	} else if(formattedVal === 0) {
+		return "0";
+	} else if(formattedVal === false) {
+		return "false";
+	}
+	return "";
 };
 /** @private
 * @param {Object} selectedItems
@@ -1412,36 +1493,34 @@ var _valueToString = function _valueToString(formattedVal, rawVal) {
 * @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 false;
-        }
-      }
-      selectedItems[formattedVal] = true;
-      return true;
-    }
-  }
-  return false;
+let _collectSelectedItem = function(selectedItems, formattedVal, row, filterFuncs) {
+	if(filterFuncs) {
+		if(!selectedItems[formattedVal]) {
+			for(let i = filterFuncs.length; --i >= 0;) {
+				if(!filterFuncs[i](row)) {
+					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
-      rawValues.push(rawVal);
-    }
-  } else {
-    // The first unique formatted value detected
-    uniqueValues[formattedVal] = [rawVal];
-  }
+let _collectUniqueValue = function(uniqueValues, formattedVal, rawVal) {
+	let rawValues = uniqueValues[formattedVal];
+	if(rawValues) {
+		if(rawValues.indexOf(rawVal) < 0) { // Check for unique raw values
+			rawValues.push(rawVal);
+		}
+	} else { // The first unique formatted value detected
+		uniqueValues[formattedVal] = [rawVal];
+	}
 };
 /** @private
 * @param {string} field A field name for getting raw value from row data
@@ -1451,94 +1530,101 @@ 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) {
-          formattedVal = formatter(row); // The function takes row data
-        }
-
-        formattedVal = _valueToString(formattedVal, rawVal);
-        if (formattedVal) {
-          _collectSelectedItem(selectedItems, formattedVal, row, filterFuncs);
-          _collectUniqueValue(uniqueValues, formattedVal, rawVal);
-        }
-      }
-    }
-  }
-  userItemList = _arrayConcat(userItemList, dialogConfig.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;
+RowFilteringPlugin.prototype._getUniqueValues = function(field, dialogConfig, formatter, filterFuncs, selectedItems) {
+	if(!field) {
+		return null;
+	}
+
+	let rawDataAccessor = (dialogConfig.rawDataAccessor || null);
+	let formattedDataAccessor = (dialogConfig.formattedDataAccessor || null);
+	let userItemList = dialogConfig.itemList;
+
+	let uniqueValues = {};
+	let formattedVal = null;
+	let rawVal = null;
+	if(!Array.isArray(userItemList)) {
+		userItemList = null;
+		let dvs = this._getAvailableDataViews();
+		let dts = dvs.map(this._getDataTable);
+		let tblCount = dts.length;
+		for(let t = 0; t < tblCount; ++t) {
+			let rows = dts[t].getAllRowData();
+			let rowCount = rows.length;
+			for(let r = 0; r < rowCount; ++r) {
+				let row = rows[r];
+				if(this._rowGetter) {
+					row = this._rowGetter(row);
+				}
+				if(this._rowTransform) {
+					row = this._rowTransform(row);
+				}
+				let 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) {
+					formattedVal = formatter(row); // The function takes row data
+				}
+
+				formattedVal = _valueToString(formattedVal, rawVal);
+				if(formattedVal) {
+					_collectSelectedItem(selectedItems, formattedVal, row, filterFuncs);
+					_collectUniqueValue(uniqueValues, formattedVal, rawVal);
+				}
+			}
+		}
+	}
+
+	userItemList = _arrayConcat(userItemList, dialogConfig.additionalItems);
+
+	let dummyRow = {};
+	let userItemCount = userItemList ? userItemList.length : 0;
+	for(let 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;
+RowFilteringPlugin._createDialog = function() {
+	let tag = RowFilteringPlugin._dialogTagName;
+	if(tag == null) {
+		let 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
 * @function
@@ -1547,508 +1633,531 @@ 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;
-          val = formattedVal;
-        }
-      }
-    }
-    ary[1] = val;
-    return ary;
-  }
-  return null;
+RowFilteringPlugin._formatArrayExpression = function(exp, field, formatter) {
+	if(Array.isArray(exp)) {
+		let ary = exp.slice(); // Clone to avoid modifying original data
+		let formattedVal = ary[1];
+		let val = stringToDateObject(formattedVal);
+		if(val !== formattedVal) {
+			ary.rawValue = val;
+			ary.formattedValue = formattedVal;
+		}
+		if(field && formatter && typeof val !== "string") {
+			if(val != null) {
+				let dummyRow = {};
+				dummyRow[field] = val;
+				formattedVal = formatter(dummyRow);
+				if(formattedVal) {
+					ary.rawValue = val;
+					ary.formattedValue = formattedVal;
+					val = formattedVal;
+				}
+			}
+		}
+		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
-    }
-  }
-
-  var host = this._hosts[0];
-  if (!host) {
-    return;
-  }
-
-  // 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
-  var field = this._getField(colIndex);
-  if (!field) {
-    return; // The specified column has no field
-  }
-
-  if (this.hasListener("beforeDialogOpened")) {
-    var arg = {
-      colIndex: colIndex,
-      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
-  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,
-    filterUI: true,
-    fieldDataType: "",
-    lang: "",
-    rawDataAccessor: null,
-    formattedDataAccessor: 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);
-
-  // 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 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";
-      }
-    } else if (typeof exp === "function" || typeof exp === "string" || _typeof(exp) === "object") {
-      if (cfo._filters && cfo._filters.length) {
-        filterFuncs = cfo._filters;
-      }
-      if (_typeof(exp) === "object") {
-        dialogConfig.additionalItems = _arrayConcat(dialogConfig.additionalItems, Object.keys(exp));
-      }
-    }
-  }
-  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];
-      var rawValueB = uniqueValues[b][0];
-      return sortLogic(rawValueA, rawValueB); // Compare with rawValue
-    });
-  }
-
-  var items = keys.map(function (formattedVal, idx) {
-    return {
-      id: idx,
-      title: formattedVal,
-      nodes: [],
-      checked: selectedItems[formattedVal] ? true : false
-    };
-  });
-
-  // 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
-  if (this._filterDialog.init) {
-    // TODO: support initiailization in v1
-    this._filterDialog.init(dialogConfig);
-  }
-
-  // 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();
+RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOptions) {
+	let 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
+		}
+	}
+
+	let host = this._hosts[0];
+	if(!host) {
+		return;
+	}
+
+	// Find target cell for positioning filter dialog
+	let tsect = host.getSection("title");
+	if(!tsect) {
+		return;
+	}
+	let rCount = tsect.getRowCount();
+	let cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
+	if(!cell || !cell.getElement()) {
+		return;
+	}
+
+	// TODO: Handle newly inserted/added columns
+	let field = this._getField(colIndex);
+	if(!field) {
+		return; // The specified column has no field
+	}
+
+	if(this.hasListener("beforeDialogOpened")) {
+		let arg = {
+			colIndex: colIndex,
+			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
+	let colData = host.getColumnData(colIndex);
+	let formatOptions = colData.formatOptions;
+	let useUTCTime = false;
+	if(formatOptions){
+		if(formatOptions.formatType){
+			useUTCTime = true;
+			if(formatOptions.useUTCTime != null){
+				useUTCTime = formatOptions.useUTCTime;
+			}
+		}
+	}
+
+	let dialogConfig = { // default config
+		sortUI: true,
+		filterUI: true,
+		fieldDataType: "",
+		lang: "",
+		rawDataAccessor: null,
+		formattedDataAccessor: null,
+		sortLogic: null,
+		blankValues: false,
+		blankValuesChecked: false
+	};
+
+	let columnDialogOptions = null;
+	let 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);
+
+	// cfo is required for storing unique entries in the dialog, even though no filter is active
+	// TODO: move rawDataAccessor and other settings to colSettings
+	let cfo = this._initColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
+	cfo._rawDataAccessor = (dialogConfig.rawDataAccessor || null);
+	cfo._formattedDataAccessor = (dialogConfig.formattedDataAccessor || null);
+	let sortLogic = dialogConfig.sortLogic || null;
+
+	// Populate data for filter dialog based on existing states
+	let formatter = this._getFormatter(colIndex);
+	let condition2D = null;
+	let filterMode = ""; // default
+	let filterFuncs = null;
+	let 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";
+			}
+		} else if(typeof exp === "function" || typeof exp === "string" || typeof exp === "object") {
+			if(cfo._filters && cfo._filters.length) {
+				filterFuncs = cfo._filters;
+			}
+			if(typeof exp === "object") {
+				dialogConfig.additionalItems = _arrayConcat(dialogConfig.additionalItems, Object.keys(exp));
+			}
+		}
+	}
+
+	let selectedItems = {};
+	let uniqueValues = cfo.uniqueValues = this._getUniqueValues(
+		field,
+		dialogConfig,
+		formatter,
+		filterFuncs,
+		selectedItems
+	);
+
+	if(dialogConfig.blankValues) {
+		delete uniqueValues[BLANKS];
+		let dunmmySelectItem = {};
+		let blkVals = ["", null, undefined, NaN]; // eslint-disable-line
+		let dummyRow = {};
+		for(let i = 0; i < blkVals.length; i++) {
+			let blkVal = blkVals[i];
+			dummyRow[field] = blkVal;
+
+			if(_collectSelectedItem(dunmmySelectItem, BLANKS, dummyRow, filterFuncs)) {
+				dialogConfig.blankValuesChecked = true;
+				break;
+			}
+		}
+	}
+
+	let keys = Object.keys(uniqueValues);
+	if(sortLogic) {
+		keys.sort(function (a, b) {
+			let rawValueA = uniqueValues[a][0];
+			let rawValueB = uniqueValues[b][0];
+			return sortLogic(rawValueA, rawValueB); // Compare with rawValue
+		});
+	}
+
+	let items = keys.map(function(formattedVal, idx) {
+		return {
+			id: idx,
+			title: formattedVal,
+			nodes: [],
+			checked: selectedItems[formattedVal] ? true : false
+		};
+	});
+
+	// Adding inputs from conditions to uniqueValues for mapping back from the dialog
+	if(condition2D) {
+		let 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
+	if(this._filterDialog.init) { // TODO: support initiailization in v1
+		this._filterDialog.init(dialogConfig);
+	}
+
+	// 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
 * @function
 * @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;
-    }
-  }
+RowFilteringPlugin._overrideConfig = function(config, userConfig) {
+	if(!userConfig) {
+		return;
+	}
+
+	let sortUI = userConfig["sortUI"];
+	if(sortUI != null) {
+		config.sortUI = sortUI;
+	}
+
+	let filterUI = userConfig["filterUI"];
+	if(filterUI != null) {
+		config.filterUI = filterUI;
+	}
+
+	let fieldDataType = userConfig["fieldDataType"];
+	if(fieldDataType != null) {
+		config.fieldDataType = fieldDataType;
+	}
+
+	let lang = userConfig["lang"];
+	if(lang != null) {
+		config.lang = lang;
+	}
+
+	let rawDataAccessor = userConfig["rawDataAccessor"];
+	if(typeof rawDataAccessor === "function" || rawDataAccessor === null) { // Allow null value
+		config.rawDataAccessor = rawDataAccessor;
+	}
+
+	let formattedDataAccessor = userConfig["formattedDataAccessor"];
+	if(typeof formattedDataAccessor === "function" || formattedDataAccessor === null) { // Allow null value
+		config.formattedDataAccessor = formattedDataAccessor;
+	}
+
+	let sortLogic = userConfig["sortLogic"];
+	if(typeof sortLogic === "function" || sortLogic === null) { // Allow null value
+		config.sortLogic = sortLogic;
+	}
+
+	let itemList = userConfig["itemList"];
+	if(itemList != null) {
+		config.itemList = itemList;
+	}
+
+	let additionalItems = userConfig["additionalItems"];
+	if(additionalItems != null) {
+		config.additionalItems = additionalItems;
+	}
+	let 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;
+RowFilteringPlugin.prototype._getFormatter = function(colIndex) {
+	let tfp = this._getPlugin("TextFormattingPlugin");
+	if(tfp) {
+		let 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;
+RowFilteringPlugin._getFilterBuilder = function() {
+	if(!RowFilteringPlugin._filterBuilder) {
+		RowFilteringPlugin._filterBuilder = new FilterBuilder();
+	}
+	return RowFilteringPlugin._filterBuilder;
 };
 
 /** @public
 * @ignore
 * @param {*} val
 */
-RowFilteringPlugin.prototype.mockDialogFilterChange = function (val) {
-  if (this._filterDialog) {
-    var arg = {
-      detail: {}
-    };
-    if (Array.isArray(val)) {
-      if (Array.isArray(val[0])) {
-        arg.detail.conditions = val;
-      } else {
-        arg.detail.value = val;
-      }
-    } else {
-      arg.detail.value = val;
-    }
-    this._onDialogFilterChanged(arg);
-  }
+RowFilteringPlugin.prototype.mockDialogFilterChange = function(val) {
+	if(this._filterDialog) {
+		let arg = {
+			detail: {}
+		};
+		if(Array.isArray(val)) {
+			if(Array.isArray(val[0])) {
+				arg.detail.conditions = val;
+			} else {
+				arg.detail.value = val;
+			}
+		} else {
+			arg.detail.value = val;
+		}
+		this._onDialogFilterChanged(arg);
+	}
 };
 /** @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);
-
-  // 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
-      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
-  var selVal = e.detail.value;
-  var selAry = null;
-  if (selVal) {
-    if (typeof selVal === "string") {
-      // Custom filter mode (free style text).
-      // WARNING: Free style text is no longer available anymore from the newer dialog
-      this.addColumnFilter(colIndex, selVal);
-      return;
-    } else {
-      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
-  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
-    // let 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,
-    "colIndex": colIndex
-  });
+RowFilteringPlugin.prototype._onDialogFilterChanged = function(e) {
+	let colIndex = this._filterDialog._colIndex;
+	let cfo = this._getColumnFilterOption(colIndex);
+	let uniqueValues = cfo.uniqueValues; // Unique values have to be stored before the removal of the filter
+	let rawDataAccessor = cfo._rawDataAccessor;
+	let formattedDataAccessor = cfo._formattedDataAccessor;
+	let ctx = null;
+	if(rawDataAccessor || formattedDataAccessor) {
+		ctx = {
+			"rawDataAccessor": rawDataAccessor || null,
+			"formattedDataAccessor": formattedDataAccessor || null
+		};
+	}
+	this.removeColumnFilters(colIndex);
+
+	// Check inputs from advanced filter UIs
+	let conditions = e.detail.conditions;
+	if(Array.isArray(conditions)) { // Advanced condition filtering. Expecting 2D-Array
+		// Ensure rawValue input for number field data type
+		let condCount = conditions.length;
+		for(let m = 0; m < condCount; ++m) {
+			let cond = conditions[m];
+			let 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") {
+				let inputVal = cond[1]; // inputVal is hardcoded at index 1
+				let 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
+	let selVal = e.detail.value;
+	let selAry = null;
+	if(selVal) {
+		if(typeof selVal === "string") { // Custom filter mode (free style text).
+			// WARNING: Free style text is no longer available anymore from the newer dialog
+			this.addColumnFilter(colIndex, selVal);
+			return;
+		} else {
+			selAry = /** @type{Array} */(selVal); // Expecting Array of object
+		}
+	}
+
+	let 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
+	let itemMap = {};
+	let selectedItems = {};
+	let atLeastOne = false;
+	for(let i = 0; i < selCount; ++i) {
+		let formattedVal = selAry[i].title; // title is defined by the multi-select element
+		// let 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;
+		}
+		let rawVals = uniqueValues[formattedVal];
+		if(!rawVals) {
+			continue;
+		}
+		atLeastOne = true;
+		selectedItems[formattedVal] = true;
+
+		let jLen = rawVals.length;
+		for(let 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,
+		"colIndex": colIndex
+	});
 };
 
 /** @public
 * @ignore
 * @param {string} sortOrder
 */
-RowFilteringPlugin.prototype.mockDialogSortChange = function (sortOrder) {
-  if (this._filterDialog) {
-    var arg = {
-      detail: {}
-    };
-    arg.detail.value = sortOrder;
-    this._onDialogSortChanged(arg);
-  }
+RowFilteringPlugin.prototype.mockDialogSortChange = function(sortOrder) {
+	if(this._filterDialog) {
+		let arg = {
+			detail: {}
+		};
+		arg.detail.value = sortOrder;
+		this._onDialogSortChanged(arg);
+	}
 };
 /** @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
-    });
-  }
+RowFilteringPlugin.prototype._onDialogSortChanged = function(e) {
+	let stp = this._getPlugin("SortableTitlePlugin");
+	if(stp) {
+		let colIndex = this._filterDialog._colIndex;
+		let 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
+		});
+	}
 };
 /** @private
 * @param {Object} e
 */
-RowFilteringPlugin.prototype._onColumnAdded = function (e) {
-  if (e["context"]) {
-    var hasFilter = this._setColumnOptions(e["colIndex"], e["context"]);
-    if (hasFilter) {
-      this._applyPendingFilter();
-    }
-  }
+RowFilteringPlugin.prototype._onColumnAdded = function(e) {
+	if(e["context"]) {
+		let hasFilter = this._setColumnOptions(e["colIndex"], e["context"]);
+
+		if(hasFilter) {
+			this._applyPendingFilter();
+		}
+	}
 };
 /** @private
 * @param {Object} e
 */
-RowFilteringPlugin.prototype._onColumnRemoved = function (e) {
-  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();
-  }
+RowFilteringPlugin.prototype._onColumnRemoved = function(e) {
+	let colData = /** @type{Object} */(e.columnData);
+	if(!colData) { return; }
+
+	let crf = colData["rowFiltering"];
+	let cfo = crf["filterOption"];
+	if(cfo) {
+		let 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.
@@ -2056,22 +2165,25 @@ RowFilteringPlugin.prototype._onColumnRemoved = function (e) {
 * @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);
-  }
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(dv && dv.enableEmptySegmentFiltering) {
+		dv.enableEmptySegmentFiltering(enabled);
+	}
 };
 /** 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.
 * @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);
-  }
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(dv && dv.enableSeparatorFiltering) {
+		dv.enableSeparatorFiltering(enabled);
+	}
 };
+
+
+
 export default RowFilteringPlugin;
-export { RowFilteringPlugin, RowFilteringPlugin as RowFiltering, RowFilteringPlugin as RowFilteringExtension };
+export { RowFilteringPlugin, RowFilteringPlugin as RowFiltering, RowFilteringPlugin as RowFilteringExtension };