@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -1,8 +1,9 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
-import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 /** @typedef {Object} RowDraggingPlugin~Options
 * @description Available options describing `rowDragging` object specified in grid's option
@@ -44,6 +45,15 @@ import Dom from "../../tr-grid-util/es6/Dom.js";
 * @type {Object}
 */
 
+
+/** @private
+* @param {Object} pos
+* @return {boolean}
+*/
+var _isInContentSection = function (pos) {
+	return (pos && pos["sectionType"] === "content") ? true : false;
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -58,7 +68,6 @@ var RowDraggingPlugin = function (options) {
 	t._onMouseDown = t._onMouseDown.bind(t);
 
 	t._onDragPulse = t._onDragPulse.bind(t);
-	t._onContentScrolled = t._onContentScrolled.bind(t);
 
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
@@ -67,9 +76,15 @@ var RowDraggingPlugin = function (options) {
 
 	t._hosts = [];
 
-	t._guideline = document.createElement("svg"); // TODO: Change from svg to normal div
+	t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
 	t._guideline.className = "tr-row-guideline";
 
+	t._dragBox = document.createElement("div");
+	t._dragBox.className = "drag-box-disabled";
+
+	t._dragBoxIcon = document.createElement("ef-icon");
+	t._dragBoxIcon.className = "drag-box-icon";
+
 	t.config({ "rowDragging": options });
 };
 Ext.inherits(RowDraggingPlugin, GridPlugin);
@@ -87,6 +102,14 @@ RowDraggingPlugin._stylePromise = null; // Static variable
 * @private
 */
 RowDraggingPlugin.prototype._guideline = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBox = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxIcon = null;
 /** For disabled UI
 * @type {boolean}
 * @private
@@ -163,10 +186,14 @@ RowDraggingPlugin.prototype._dataTransfer = true;
 * @private
 */
 RowDraggingPlugin.prototype._autoScroll = true;
-
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragUI = null;
 
 /** Prevent built-in config
 * @public
+* @ignore
 * @param {string} optionName
 * @param {*} optionValue
 * @return {*}
@@ -208,15 +235,21 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		host.setAttribute("draggable", "true");
 		host.listen("dragstart", this.startDrag);
 	}
-	// host.listen("mouseover", this._onContentScrolled);
+
 	host.listen("mousedown", this._onMouseDown);
 	host.listen("touchstart", this._onMouseDown);
 
-	if(RowDraggingPlugin._stylePromise) {
-		RowDraggingPlugin._applyThemeColor(host);
+	this._dragUI = new DragUI({
+		dragBox: this._dragBox,
+		dragBoxIcon: this._dragBoxIcon
+	});
+
+	// Share dragging styles
+	if(DragUI.stylePromise) {
+		DragUI.applyThemeColor(host);
 	} else {
-		RowDraggingPlugin._stylePromise = ElfUtil.getThemeColors();
-		RowDraggingPlugin._stylePromise.then(this._onThemeLoaded);
+		DragUI.stylePromise = ElfUtil.getThemeColors();
+		DragUI.stylePromise.then(this._onThemeLoaded);
 	}
 
 	// In case of lazy loading
@@ -231,7 +264,6 @@ RowDraggingPlugin.prototype.unload = function (host) {
 
 	// host.removeAttribute("draggable");
 	host.unlisten("dragstart", this.startDrag);
-	// host.unlisten("mouseover", this._onContentScrolled);
 	host.unlisten("mousedown", this._onMouseDown);
 	host.unlisten("touchstart", this._onMouseDown);
 
@@ -246,56 +278,9 @@ RowDraggingPlugin.prototype.unload = function (host) {
 * @param {Object} colors
 */
 RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
-	if(!RowDraggingPlugin._styles) {
-		var styles = [ // Main Styles without theme
-			".tr-row-guideline", [
-				"position: absolute;",
-				"left: 0;",
-				"top: 0;",
-				"pointer-events: none;",
-				"z-index: 1;",
-				"text-align: center;",
-				"border-top-width: 3px;",
-				"border-top-style: solid;"
-			]
-		];
-		var guidelineColor = "#ff9933";
-		var ElfVersion = ElfUtil.getElfVersion();
-		if(colors.primary) {
-			guidelineColor = colors.primary;
-		}
-		guidelineColor += ";";
-
-		styles.push(".tr-row-guideline", [
-			"border-top-color: " + guidelineColor,
-			"color: " + guidelineColor,
-			"background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));"
-		]);
-
-		if(ElfVersion < 3) { // Backward compatability
-			styles.push(".pearl .tr-row-guideline, *[theme=pearl] .tr-row-guideline", [
-				"border-top-color: #ee7600;",
-				"color: #ee7600;",
-				"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));"
-			]);
-		}
-		RowDraggingPlugin._styles = prettifyCss(styles);
-	}
-
+	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
 	for(var i = this._hosts.length; --i >= 0;) {
-		RowDraggingPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-RowDraggingPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._rowDraggingStyles) {
-		return;
-	}
-	if(RowDraggingPlugin._styles) {
-		grid._rowDraggingStyles = true; // Prevent loading the same style twice
-		injectCss(RowDraggingPlugin._styles, grid.getElement());
+		DragUI.applyThemeColor(this._hosts[i]);
 	}
 };
 
@@ -312,6 +297,9 @@ RowDraggingPlugin.prototype.config = function (options) {
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
 		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		this._dragBox.className = "drag-box"; // set disable drag-box
+	} else {
+		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
 	}
 
 	this._dragBoxEnabled = !!extOptions["dragBox"];
@@ -385,7 +373,7 @@ RowDraggingPlugin.prototype.startDrag = function (startRef) {
 		pos = this._hitTest(target);
 	}
 
-	if (pos && pos["sectionType"] === "content") {
+	if (_isInContentSection(pos)) {
 		this._clearCache();
 		this._pos = pos;
 		this._onDragStart(startRef);
@@ -491,7 +479,7 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 
 			if (this._dragBoxRenderer) { // For custom drag box rendering
 				var arg = cloneObject(e); // TODO: Check if cloning is necessary
-				arg.dragBox = this._guideline;
+				arg.dragBox = this._dragBox;
 				arg.dataRow = this._getRowData(dv.getRowDataAt(rowIndex));
 
 				if (this._legacyRowReorder) {
@@ -505,11 +493,8 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
 		// we should do something to overwrite pointer-events first
 		// then set cursor move will have an effect
-		grid.getElement().style.cursor = "move";
+		grid.getElement().classList.add("mouse-dragging");
 
-		// Initialize guideline
-		this._guideline.style.lineHeight = this._guideline.style.height = "";
-		this._updateGuideParent(); // Insert guideline to the document
 		this._updateGuidePosition();
 
 		if (this._autoScroll) {
@@ -546,12 +531,18 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 
 	this._pos = this._hitTest(e); // A new object is created
 
-	this._updateGuideParent();
+	this._updateGuidePosition(e);
+	this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
 	this._dispatch("drag", this._pos);
-
-	this._updateGuidePosition(e);
+	if(!this._disabled) {
+		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
+		var drop = this._dragUI.renderDragBox(e, this._startingGrid);
+		if(!drop) { // can not be drop or not allow to drop or insertion
+			this.cancelDrag();
+		}
+	}
 };
 /** @private
 * @param {Object} e
@@ -564,6 +555,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		Dom.preventDefault(e);
 	}
 	Dom.removeParent(this._guideline);
+	Dom.removeParent(this._dragBox);
 
 	document.body.classList.remove("tr-dragging");
 
@@ -582,7 +574,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 	}
 
 	var srcGrid = this._startingGrid || this._hosts[0];
-	srcGrid.getElement().style.cursor = "";
+	srcGrid.getElement().classList.remove("mouse-dragging");
 
 	var destPos = this._pos; // This can be null
 	if(!this._isDragCancelled()) {
@@ -591,7 +583,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		destPos["dropTarget"] = e ? e.target : null;
 
 		if (!this.disabled) {
-			if (this._dataTransfer && this._isInContentSection()) {
+			if (this._dataTransfer && _isInContentSection(this._pos)) {
 				var destGrid = destPos["grid"] || srcGrid;
 				var destRowIndex = destPos["rowIndex"];
 
@@ -620,11 +612,6 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 */
 RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
 	var destDv = destGrid.getDataSource();
-	var destRowId = destDv.getRowId(destRowIndex);
-
-	if(!destRowId) {
-		return 0;
-	}
 
 	var srcRowIndices = null;
 	var srcDv = srcGrid.getDataSource();
@@ -641,10 +628,16 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
+
 	var movedRowIds = null;
-	if(srcGrid === destGrid) {
+	var destRowId = destDv.getRowId(destRowIndex);
+	if(srcGrid === destGrid) { // TODO: Support wrap mode
 		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
 	} else {
+		// TODO: Check if we support moving to last row for multi table
+		// if(!destRowId) {
+		// return 0;
+		// }
 		movedRowIds = [];
 		evtArg["destGrid"] = destGrid;
 
@@ -678,7 +671,7 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	if(movedRowIds.length) {
 		evtArg["originRowId"] = movedRowIds[0];
 		evtArg["originRowIds"] = movedRowIds;
-		evtArg["destinationRowId"] = destRowId;
+		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
 
 		this._dispatch("dataMoved", evtArg);
 	}
@@ -687,53 +680,54 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 /** @private
 * @return {boolean}
 */
-RowDraggingPlugin.prototype._isInContentSection = function () {
-	return (this._pos["sectionType"] === "content");
-};
-/** @private
-* @return {boolean}
-*/
-RowDraggingPlugin.prototype._hasValidTarget = function () {
-	return (this._pos && this._pos["invalidTarget"]) ? false : true;
-};
-/** @private
-* @return {boolean}
-*/
 RowDraggingPlugin.prototype._isDragCancelled = function () {
 	return (this._pos && this._pos["cancel"]) ? true : false;
 };
 
-/** @private */
-RowDraggingPlugin.prototype._updateGuideParent = function () {
-	if (this._disabled) return;
-
-	if (this._isInContentSection()) {
-		var grid = this._pos["grid"] || null;
-		var pn = this._pos["section"].getColumnHost(); // This is to hide out of view guideline
-		if (pn !== this._guideline.parentNode) {
-			this._guideline.style.width = grid.getWidth() + "px";
-			pn.appendChild(this._guideline);
-		}
-	}
-};
-
 /** @private
-* @param {Event} e
+* @param {Event=} e
 */
 RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
-	if (this._disabled) return;
-
-	if (this._isInContentSection()) {
-		if (this._hasValidTarget()) {
-			var pos = Dom.getRelativePosition(this._pos["cellElement"], this._guideline.parentNode);
-			this._guideline.style.top = (pos["y"] - 1) + "px";
-			var height = (this._pos["section"].getRowHeight(
-				this._pos["rowIndex"]
-			) - 3) + "px";
-			this._guideline.style.lineHeight = this._guideline.style.height = height;
+	var pos = this._pos;
+	if (this._disabled || !pos || pos["invalidTarget"]) {
+		return;
+	}
+
+	if (_isInContentSection(pos)) {
+		var guideline = this._guideline;
+		// var grid = pos["grid"];
+		var section = pos["section"];
+		var pn = section.getColumnHost(); // This is to hide out of view guideline
+		if (pn !== guideline.parentNode) {
+			guideline.style.width = section.getWidth() + "px";
+			pn.appendChild(guideline);
 		}
+
+		var cellElement = pos["cellElement"];
+		var relativePos = Dom.getRelativePosition(cellElement, pn);
+		var cellTop = relativePos["y"];
+		var rowIndex = pos["rowIndex"];
+		var offsetY = 0;
+
+		if(rowIndex) {
+			offsetY = -1; // Make guideline stay on top of the target cell
+			if(e) { // MouseEvent or TouchEvent
+				var lastRow = section.getRowCount() - 1;
+				if(rowIndex >= lastRow) { // bottommost row
+					var rowHeight = section.getRowHeight(lastRow);
+					relativePos = Dom.getRelativePosition(e, cellElement);
+					if(relativePos["y"] >= (rowHeight / 2) | 0) {
+						offsetY = rowHeight - 3; // TODO: Use actual guideline height for the offset
+						++pos["rowIndex"];
+					}
+				}
+			}
+		} // else { Topmost row
+
+		guideline.style.top = (cellTop + offsetY) + "px";
 	}
 };
+
 /** @private */
 RowDraggingPlugin.prototype._clearCache = function () {
 	if (this._dragPulseId) {
@@ -774,19 +768,6 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
 		primaryHost.scrollDown(scrollVal);
 	}
 };
-/** @private
-* @param {Event=} e
-*/
-RowDraggingPlugin.prototype._onContentScrolled = function (e) {
-	if (this._scrollingZone && this._dragging && this._pos["hit"]) {
-		var grid = this._pos["grid"];
-		if (grid.getElement() === e.currentTarget) {
-			this._pos = this._hitTest(e);
-			this._dispatch("drag", this._pos);
-			this._updateGuidePosition();
-		}
-	}
-};
 
 
 

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -2,6 +2,7 @@ import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowFilteringPlugin {
 
@@ -32,6 +33,7 @@ declare namespace RowFilteringPlugin {
 
     type Options = {
         disabledUI?: boolean,
+        iconActivation?: string,
         click?: ((...params: any[]) => any),
         clicked?: ((...params: any[]) => any),
         iconCreated?: ((...params: any[]) => any),

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

@@ -4,6 +4,7 @@ import { Ext } from '../../tr-grid-util/es6/Ext.js';
 import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
 import { FilterBuilder } from '../../tr-grid-util/es6/FilterBuilder.js';
 import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event RowFilteringPlugin#click
 * @description click event is dispatched when a user clicks the column filter icon.
 */
@@ -71,6 +72,7 @@ The expression can take various forms:<br>
 /** @typedef {Object} RowFilteringPlugin~Options
 * @description The options can be specified by `rowFiltering` property of the main grid's options
 * @property {boolean=} disabledUI=false If enabled, filter icon will not be created/shown.
+* @property {string=} iconActivation=onActiveFilter Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`
 * @property {Function=} click=null Event handler dispatched when a user clicks the column filter icon.
 * @property {Function=} clicked=null Alias to `click` event handler
 * @property {Function=} iconCreated=null Event handler dispatched when a new column filter icon is created.
@@ -134,11 +136,6 @@ RowFilteringPlugin.prototype._nameMap; // Mapping name to filter function for re
 */
 
 RowFilteringPlugin.prototype._disabled = false;
-/** @type {boolean}
-* @private
-*/
-
-RowFilteringPlugin.prototype._disabledUI = false;
 /** @type {Object.<string, boolean>}
 * @private
 */
@@ -165,6 +162,11 @@ RowFilteringPlugin.prototype._columnFilters;
 */
 
 RowFilteringPlugin.prototype._activeColFilters = null;
+/** @type {string}
+* @private
+*/
+
+RowFilteringPlugin.prototype._iconActivation = "onActiveFilter";
 /** @type {number}
 * @private
 */
@@ -231,6 +233,15 @@ RowFilteringPlugin.prototype.initialize = function (host, options) {
 
   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);"], ".floating-panel .title-filter-icon:hover", ["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 .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
@@ -275,7 +286,17 @@ RowFilteringPlugin.prototype.config = function (options) {
 
   if (rowFiltering) {
     if (rowFiltering["disabledUI"] || rowFiltering["uiDisabled"]) {
-      this._disabledUI = true;
+      this._iconActivation = "none";
+    }
+
+    if (rowFiltering["iconActivation"]) {
+      this._iconActivation = rowFiltering["iconActivation"];
+
+      if (this._iconActivation === "onHover") {
+        this._hosts[0].enableClass("hovering-filter-icon", true);
+      } else {
+        this._hosts[0].enableClass("hovering-filter-icon", false);
+      }
     }
 
     if (rowFiltering["clicked"]) {
@@ -302,6 +323,8 @@ RowFilteringPlugin.prototype.config = function (options) {
 
     this._setColumnOptions(i, column);
   }
+
+  this.updateAllColumnIcons(); //Create icon at first time
 };
 /** @public
 * @param {Object=} gridOptions
@@ -352,7 +375,7 @@ RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
     extOptions = obj.rowFiltering = {};
   }
 
-  extOptions.disabledUI = this._disabledUI;
+  extOptions.iconActivation = this._iconActivation;
   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.
@@ -604,12 +627,12 @@ RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
 
 
 RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, columnOptions) {
-  var fieldDataType = columnOptions["fieldDataType"]; // TODO: This should not be set here
+  var fieldDataType = columnOptions["fieldDataType"] || columnOptions["dataType"]; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
 
   if (fieldDataType) {
     var colOptions = this._newExtColumnOptions(colIndex);
 
-    colOptions.fieldDataType = fieldDataType; // TODO: This should not be set here
+    colOptions.fieldDataType = fieldDataType; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
   }
 
   var exp = columnOptions["filter"];
@@ -1143,7 +1166,7 @@ RowFilteringPlugin.prototype._requestFilterRefresh = function () {
 
 
 RowFilteringPlugin.prototype._setTimerForUpdatingIcons = function () {
-  if (this._disabledUI) {
+  if (this._iconActivation === "none") {
     return;
   }
 
@@ -1216,10 +1239,6 @@ RowFilteringPlugin.prototype.refresh = function () {
 
 
 RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
-  if (this._disabledUI) {
-    return;
-  }
-
   var cfo = this._getColumnFilterOption(colIndex);
 
   var hasFilter = cfo ? cfo._filters.length : 0;
@@ -1244,9 +1263,11 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
       cell["updatePadding"]();
     }
 
-    if (!this._disabled && hasFilter) {
+    var onActiveFilter = this._iconActivation !== "always" && this._iconActivation !== "onHover";
+    var noFilterIcon = this._disabled || this._iconActivation === "none" || onActiveFilter && !hasFilter;
+
+    if (!noFilterIcon) {
       if (!cell._filterIcon) {
-        cell.addClass("filtering");
         var filterIcon;
 
         if (ElfUtil.hasComponent("ef-icon") >= 3) {
@@ -1257,6 +1278,8 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
           filterIcon.className = "filter-symbol icon-filter ef-icon";
         }
 
+        filterIcon.classList.add("title-filter-icon"); // Icon reference
+
         filterIcon.addEventListener("click", this._onIconClick, false);
 
         this._dispatch("iconCreated", {
@@ -1268,11 +1291,17 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
         cell.insertFloatingIcon(filterIcon, 10);
         cell._filterIcon = filterIcon;
       }
+
+      if (hasFilter || this._iconActivation == "always") {
+        cell.enableClass("active-filter", true);
+      } else {
+        cell.enableClass("active-filter", false);
+      }
     } else {
       if (cell._filterIcon) {
         cell.removeFloatingIcon(cell._filterIcon);
         cell._filterIcon = null;
-        cell.removeClass("filtering");
+        cell.enableClass("active-filter", false);
       }
     }
   }
@@ -1614,38 +1643,64 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
       nodes: [],
       checked: selectedItems[formattedVal] ? true : false
     };
-  });
+  }); //Setting up default default column options
 
-  var colOptions = this._getExtColumnOptions(colIndex);
+  var colOptions = this._newExtColumnOptions(colIndex);
 
   var fdt = "";
+  var sui = true;
+  var fui = true;
+  var lang = "";
 
-  if (colOptions && colOptions.fieldDataType) {
-    // TODO: Retrieve data type from Composite/Realtime Grid instead
-    fdt = colOptions.fieldDataType;
+  if (colOptions) {
+    if (colOptions.fieldDataType != null) {
+      fdt = colOptions.fieldDataType; // TODO: Retrieve data type from Composite/Realtime Grid instead
+    }
+
+    if (colOptions.sortUI != null) {
+      sui = colOptions.sortUI;
+    }
+
+    if (colOptions.filterUI != null) {
+      fui = colOptions.filterUI;
+    }
+
+    if (colOptions.lang != null) {
+      lang = colOptions.lang;
+    }
   }
 
   var dialogConfig = {
-    sortUI: true,
-    filterUI: true,
-    fieldDataType: fdt
+    sortUI: sui,
+    filterUI: fui,
+    fieldDataType: fdt,
+    lang: lang
   };
 
   if (options && _typeof(options) === "object") {
-    if (options.sortUI === false) {
-      dialogConfig.sortUI = options.sortUI;
+    var fieldDataType = options["fieldDataType"];
+    var sortUI = options["sortUI"];
+    var filterUI = options["filterUI"];
+    var optionLang = options["lang"];
+
+    if (sortUI === false) {
+      dialogConfig.sortUI = sortUI;
+      colOptions.sortUI = sortUI;
     }
 
-    if (options.filterUI === false) {
-      dialogConfig.filterUI = options.filterUI;
+    if (filterUI === false) {
+      dialogConfig.filterUI = filterUI;
+      colOptions.filterUI = filterUI;
     }
 
-    if (options.fieldDataType != null) {
-      dialogConfig.fieldDataType = options.fieldDataType;
+    if (fieldDataType != null) {
+      dialogConfig.fieldDataType = fieldDataType;
+      colOptions.fieldDataType = fieldDataType;
     }
 
-    if (options.lang != null) {
-      dialogConfig.lang = options.lang;
+    if (optionLang != null) {
+      dialogConfig.lang = optionLang;
+      colOptions.lang = optionLang;
     }
   }