@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -0,0 +1,2671 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { Dom } from "../../tr-grid-util/es6/Dom.js";
+import { Popup } from "../../tr-grid-util/es6/Popup.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
+import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
+
+/** @typedef {Object} InCellEditingPlugin~Options
+* @description InCellEditingPlugin options that can be specified from `inCellEditing` property of the main grid's options
+* @property {boolean=} balloonMode=false Show editor in a balloon. This is useful when there is not much space in the cell
+* @property {boolean=} editableTitle=false If enabled, all column headers can be edited by double click
+* @property {boolean=} editableContent=false If enabled, all content cells can be edited by double click. This can be overridden individual column configuration.
+* @property {boolean=} autoCommitText=false If enabled, the text will be committed even if user leaving editor midway
+* @property {boolean=} dataBinding=true If disabled, text will not be updated in the grid's data table
+* @property {Element=} popupElement=null Element to be attached under the editor
+* @property {boolean=} doubleClick=true If disabled, double click will not trigger editor
+* @property {boolean=} tabToMove=false If enabled, pressing tab key while editor is active will open editor on the next editable cell.
+* @property {string=} contentSource="textContent" By default, the text in the editor will be populated with textContent of the target cell. Use "field" to populated data from grid's data model. Use "empty" to shows empty editor.
+* @property {boolean=} inlineStyling=false force inline styles regardless of elf version.
+* @property {boolean=} disablingScroll=false Scrollbar will be frozen when editor opened. Deprecated in favor of uiBlocking
+* @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
+* @property {Function=} preEditorOpening=null Handler before editor is opened
+* @property {Function=} editorOpened=null Handler after editor is opened
+* @property {Function=} beforeCommit=null Handler before data binding, allowing data type conversion
+* @property {Function=} editorClosed=null Handler after editor is closed
+* @property {Function=} keyUp=null Handler for each keyup of the input text box
+* @property {Function=} beforeRowCommit=null Handler before committing from all editors in the row
+* @property {Function=} rowEditorClosed=null Handler after closing of all editors
+* @property {Element=} autoSuggest=null Element of ef-autosuggest or atlas-autosuggest for handled with input cell
+* @property {boolean=} closingOnScroll=true If disabled, the editor will not be automatically closed when scrolling grid.
+* @property {boolean=} autoHiding=true If disabled, the editor will not be automatically closed when losing its focus.
+* @property {boolean=} readonly=false If disabled, the editor will not be able to open, this property overwrite `editableContent` and `editableTitle`
+* @property {(string|boolean)=} starterText=false if enable it, it will be show placeholder when no ric in grid, given string to overwrite wording
+*/
+
+/** @typedef {Object} InCellEditingPlugin~Cache
+* @description Stored all important object relate to column that need to use in this plugin.
+* @property {Element} editor Container element of input.
+* @property {Element} balloonPopup balloon popup. It contains balloon element inside.
+* @property {Element} inputElement Input element such as text input, numeric stepper, date-time picker.
+*/
+
+/** @typedef {Object} InCellEditingPlugin~EditorOptions
+* @description Editor options specified through `inCellEditing` property on the column configuration object
+* @property {string=} type="text" Specify type of the editor. Available types are text, number, dropdown, date, checkbox, and combobox.
+* @property {Array=} entries=null Specify list of items available in the dropdown box
+* @property {Object=} attributes=null Specify attribute of input element
+*/
+
+/** @typedef {Object} InCellEditingPlugin~ColumnOptions
+* @description Column options that can be specified on each individual grid's column option:
+* @property {boolean=} editableContent=false Make the column editable by double click
+* @property {InCellEditingPlugin~EditorOptions=} inCellEditing Editor options give more refinements, such as "type" for specific editor type or "entries" for dropdown box
+*/
+
+/** @event InCellEditingPlugin#preEditorOpening
+* @description Fired before the opening of text editor. This allows user to disable the editor on case by case basis
+* @type {Object}
+* @property {boolean=} cancel Set to true to cancel the openning operation.
+* @example
+* let cep = new InCellEditingPlugin();
+* cep.listen("preEditorOpening", function(e) {
+*   e["cancel"] = true; // Cancel the editing process
+* });
+*/
+
+/** @event InCellEditingPlugin#editorOpened
+* @description Fired after the opening of text editor. Any visual customization can be done at this stage, including the text shown in the editor.
+* @type {Object}
+* @property {Object} dataSource DataView
+* @property {number} rowIndex
+* @property {string} field
+* @property {Element} inputElement
+* @property {Element} autoSuggest ef-autosuggest or atlas-autosuggest
+* @example
+* let cep = new InCellEditingPlugin();
+* cep.listen("editorOpened", function(e) {
+*   let data = e.dataSource.getDataAt(e.rowIndex, e.field);
+*   e.inputElement.value = data + " aaa";
+* });
+*/
+
+/** @event InCellEditingPlugin#editorClosed
+* @description Fired after the text editor has been closed and all operations are done. This is useful to clean up left over resource and get result text entered.
+* @type {Object}
+* @property {*=} text Converted value from the text that user has entered. The value is used for the commit.
+* @property {string=} enteredText Text that user has entered. The text is not used for the commit. The text will be undefined, if the text has not been changed from the initial text at the opening.
+* @property {boolean=} groupHeader This value is set to true if the editing row is a group header.
+* @property {boolean=} segmentSeparator This value is set to true if the editing row is a segment separator.
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
+* @property {boolean} cancelled Readonly flag. Indicates whether the commit operation has been cancelled
+* @property {boolean} committed Readonly flag. The opposite of `cancelled` flag
+*/
+
+/** @event InCellEditingPlugin#beforeCommit
+* @description Fired before the actual text commit (i.e. after user press enter). This is used for validating or modifying user input, and canceling the operation
+* @type {Object}
+* @property {*=} text Converted value (with appropriate data type) from the text that user has entered. The value will be committed or stored on Grid.
+* @property {string=} enteredText Text that user has entered. The text will NOT be committed or stored on Grid. The text will be undefined, if the text has not been changed from the initial text at the opening.
+* @property {boolean=} cancel Set to true to cancel the commit operation.
+* @property {boolean=} groupHeader This value is set to true if the editing row is a group header.
+* @property {boolean=} segmentSeparator This value is set to true if the editing row is a segment separator.
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
+* @example
+* let cep = new InCellEditingPlugin();
+* cep.listen("beforeCommit", function(e) {
+*   let num = +e.text; // Cast input type to number
+*   if(num === num) { // Check if string can be converted to number
+*     e.text = num; // Modify user input and continue commit operation (i.e. set data back to grid model)
+*   } else { // User entered something other than number
+*     e.cancel = true; // Cancel the commiting process
+*   }
+* });
+*/
+
+/** @event InCellEditingPlugin#beforeRowCommit
+* @description Fired before the actual text in row editor commit (i.e. after call api closeRowEditor(isCommit: true)). This is used for validating or modifying user input, and canceling the operation
+* @type {Object}
+* @property {Object} grid core grid instance
+* @property {number} rowIndex row index that editor placed.
+* @property {number} rowId row id, It's better to use row id as a reference to collect data.
+* @property {Object} fieldValues Object that contains text in each field
+* @property {Object} fieldValue Alias to fieldValues
+* @property {boolean=} cancel Set to true to cancel the commit operation.
+* @example
+* let cep = new InCellEditingPlugin();
+* cep.listen("beforeRowCommit", function(e) {
+*		let fieldValues = e.fieldValues;
+*		for(let field in fieldValues) {
+*			if(!fieldValues.hasOwnProperty(field)) continue;
+*			let value = fieldValues[field];
+*			if(checkValid(value)) { // check value is valid
+*				fieldValues[field] = value + "foo bar"; // modify text
+*			} else {
+*				e.cancel = true; // if not valid maybe cancel commit
+*				break;
+*			}
+*		}
+* });
+*/
+
+/** @event InCellEditingPlugin#rowEditorOpened
+* @description Fired after the opening of text editor in row editing mode
+* @type {Object}
+* @property {number} rowIndex
+* @property {string} rowId
+* @property {Object} grid Core grid instance
+* @property {Array.<string>} fields
+* @property {Array} cells Array of Cell instances
+* @property {Array.<Element>} inputs Array of input elements
+* @property {Array} initialValues Array of data retrieved from Grid corresponding to the cells/inputs
+* @property {Object} fieldValues Object that contains text in each field
+*/
+/** @event InCellEditingPlugin#rowEditorClosed
+* @description Fired after the text editor has been closed and all operations are done. This is useful to clean up left over resource and get result text entered.
+* @type {Object}
+* @property {number} rowIndex
+* @property {string} rowId
+* @property {Object} grid Core grid instance
+* @property {Array.<string>} fields
+* @property {Array} cells Array of Cell instances
+* @property {Array.<Element>} inputs Array of input elements
+* @property {Object} fieldValues Object that contains text in each field
+* @property {Object} fieldValue Alias to fieldValues
+* @property {boolean} committed Indicates whether the commit operation has been done or not.
+*/
+
+/** @event InCellEditingPlugin#keyUp
+* @description Fired after user key some letter to editior. This is useful to listen every text chnage.
+*/
+
+/** Double-click to activate editing mode
+* @constructor
+* @param {InCellEditingPlugin~Options=} options
+* @extends {GridPlugin}
+*/
+let InCellEditingPlugin = function (options) {
+	let t = this;
+	t._onDoubleClick = t._onDoubleClick.bind(t);
+	t._onPopupHide = t._onPopupHide.bind(t);
+	t._onScroll = t._onScroll.bind(t);
+	t._onTextKeyDown = t._onTextKeyDown.bind(t);
+	t._onTextKeyUp = t._onTextKeyUp.bind(t);
+	t._onTouchStart = t._onTouchStart.bind(t);
+	t._onTouchEnd = t._onTouchEnd.bind(t);
+	t._onTouchTimer = t._onTouchTimer.bind(t);
+	t._createContentEditor = t._createContentEditor.bind(t);
+	t._createTitleEditor = t._createTitleEditor.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onValueChanged = t._onValueChanged.bind(t);
+	t._onMultiSelectionValueChanged = t._onMultiSelectionValueChanged.bind(t);
+	t._onMultiSelectionEditorChanged = t._onMultiSelectionEditorChanged.bind(t);
+	t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
+	t._firstRendered = t._firstRendered.bind(t);
+	t._onGridKeyDown = t._onGridKeyDown.bind(t);
+	t._onRicAdded = t._onRicAdded.bind(t);
+	t._onRicRemoved = t._onRicRemoved.bind(t);
+	t._onColumnChanged = t._onColumnChanged.bind(t);
+	t._onRowCountChanged = t._onRowCountChanged.bind(t);
+	t._requestUpdateStarterText = t._requestUpdateStarterText.bind(t);
+	t._updateStarterTextConflator = new Conflator(100, this._requestUpdateStarterText);
+	t._hosts = [];
+
+	if(options) {
+		this.config({"inCellEditing": options});
+	}
+};
+Ext.inherits(InCellEditingPlugin, GridPlugin);
+
+/** @type {Object}
+* @private
+* @static
+*/
+InCellEditingPlugin._uiElementTypesMap = {
+	"input": "input",
+	"text": "input",
+	"number": "ef-number-field",
+	"select": "ef-select",
+	"dropdown": "ef-select",
+	"date": "ef-datetime-picker",
+	"checkbox": "ef-checkbox",
+	"boolean": "ef-checkbox",
+	"combobox": "ef-combo-box"
+};
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._editableTitle = false;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._editableContent = false;
+
+/** Position of text editor is active.
+* @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._activePos = null;
+
+/** Where the cell was user double-cliked.
+* @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._activeCell = null;
+
+/** row id that editor placed
+* @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._activeRowId = "";
+
+/** Previous core grid object that editor open.
+* @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._lastActiveGrid = null;
+
+/** Previous content cell before user editited, use to rollback when user cancelled.
+* @type {*}
+* @private
+*/
+InCellEditingPlugin.prototype._prevContent = null;
+
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._initialText = "";
+
+/** @type {!InCellEditingPlugin~Cache}
+* @private
+*/
+InCellEditingPlugin.prototype._headerInCellCache = null;
+
+/** @type {!InCellEditingPlugin~Cache}
+* @private
+*/
+InCellEditingPlugin.prototype._activeInCellCache = null;
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._usingBalloon = false;
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._balloonMode = false;
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._dataBinding = true;
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._dblClick = true;
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._autoCommitText = false;
+
+/** @type {number}
+* @private
+*/
+InCellEditingPlugin.prototype._touchTimerId = 0;
+
+/** @type {number}
+* @private
+*/
+InCellEditingPlugin.prototype._longPressTime = 1000; // For touch screen
+
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._editing = false;
+
+/** Where other element stored.
+* @type {Element}
+* @private
+*/
+InCellEditingPlugin.prototype._customElement = null;
+
+/** Popup element where custom element stored.
+* @type {Popup}
+* @private
+*/
+InCellEditingPlugin.prototype._customElementPopup = null;
+/** @type {Number}
+* @private
+*/
+InCellEditingPlugin.prototype._tabToMove = false;
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._contentSource = "textContent";
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._inlineStyling = false;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._disablingScroll = false;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._uiBlocking = false;
+/** @type {Element}
+* @private
+*/
+InCellEditingPlugin.prototype._autoSuggest = null;
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._defaultTag = "input";
+/** status to show that row is closing
+* @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._rowClosing = false;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._closingOnScroll = true;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._autoHiding = true;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin.prototype._readonly = false;
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin.prototype._starterText = "";
+/** @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._starterTextPopup = null;
+/** @type {number}
+* @private
+*/
+InCellEditingPlugin.prototype._editorTimerId = 0;
+/** @type {Object}
+* @private
+*/
+InCellEditingPlugin.prototype._rowSelectionPlugin = null;
+/** @type {boolean}
+* @private
+*/
+InCellEditingPlugin._scrolling = false;
+
+
+/** @type {number}
+* @private
+*/
+InCellEditingPlugin.prototype._elfVersion = 0;
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin._primaryColor = "";
+
+/** @type {string}
+* @private
+*/
+InCellEditingPlugin._styles = prettifyCss([
+	":host .cell.editing input[type=text]",	[
+		"border-style: solid;"
+	],
+	":host .cell.editing",	[
+		"z-index: 2;"
+	],
+	":host .starter-text", [
+		"padding: var(--grid-cell-padding,0 8px 0 8px);",
+		"pointer-events: none;"
+	]
+]);
+
+/** @private
+*/
+InCellEditingPlugin._onThemeLoaded = function () {
+	let colors = ElfUtil.getColors();
+	InCellEditingPlugin._primaryColor = colors.primary;
+};
+
+/** @private
+* @param {string} tag element tag
+* @param {Object=} attributes attribute of input element
+* @return {Element} input element
+*/
+InCellEditingPlugin.prototype._createInputElement = function (tag, attributes) {
+	let t = this;
+	let elem = document.createElement(tag);
+	for(let attribute in attributes) {
+		elem.setAttribute(attribute, attributes[attribute]);
+	}
+
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	// Resolve elf theme style
+	elem.style.width = "100%";
+	elem.style.height = "100%";
+	elem.style.margin = "0";
+	elem.style.borderColor = InCellEditingPlugin._primaryColor || "#ee7600";
+	elem.style.maxHeight = "unset";
+
+	if(tag === typeMap.checkbox) {
+		elem.style.borderStyle = "solid";
+		elem.style.borderWidth = "1px";
+		elem.style.boxSizing = "border-box";
+		elem.style.display = "flex";
+		elem.style.justifyContent = "center";
+		elem.addEventListener("keydown", function (e) {
+			if(e.keyCode === 13) {
+				e.preventDefault();
+			}
+		});
+	} else if(
+		tag === typeMap.select ||
+		tag === typeMap.combobox ||
+		tag === typeMap.date) {
+
+		if(tag === typeMap.combobox && attributes && attributes["multiple"]){
+			elem.addEventListener("value-changed", t._onMultiSelectionValueChanged);
+			elem.addEventListener("opened-changed", t._onMultiSelectionEditorChanged);
+		} else {
+			elem.addEventListener("value-changed", t._onValueChanged);
+		}
+	} else if(tag === "ef-input") {
+		elem.setAttribute("type", "number");
+	} else if(tag === typeMap.input) {
+		elem.setAttribute("type", "text");
+	}
+	if(this._autoSuggest) {
+		this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
+		this._autoSuggest.addEventListener("wheel", t._stopPropagation, false);
+	}
+
+	elem.addEventListener("keydown", t._onTextKeyDown, false);
+	elem.addEventListener("keyup", t._onTextKeyUp, false);
+	elem.addEventListener("mousedown", t._stopPropagation, false);
+	elem.addEventListener("mouseup", t._stopPropagation, false);
+	elem.addEventListener("click", t._stopPropagation, false);
+	elem.addEventListener("copy", t._stopPropagation, false);
+	elem.addEventListener("cut", t._stopPropagation, false);
+	elem.addEventListener("paste", t._stopPropagation, false);
+	return elem;
+};
+
+/** @private
+* @return {Element}
+*/
+InCellEditingPlugin.prototype._createEditor = function () {
+	let editor = document.createElement("div");
+	editor.className = "cell editing";
+	editor.style.position = "absolute";
+	return editor;
+};
+
+/** @private
+* @param {Element} editor
+* @return {Popup} popup instance
+*/
+InCellEditingPlugin.prototype._createBalloonPopup = function (editor) {
+	let popup = new Popup(editor, { positioning: "over" });
+	return popup;
+};
+
+/** @private
+* @param {Object} grid core grid object
+* @param {string} elemTag
+* @param {Object=} attributes of element
+* @return {object} inCellCache
+*/
+InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag, attributes) {
+	let t = this;
+
+	let editor = t._createEditor();
+	let inputElement = t._createInputElement(elemTag, attributes);
+	let balloonPopup = new Popup(editor, { positioning: "over" });
+	editor.appendChild(inputElement);
+
+	return {
+		grid: grid,
+		inputElement: inputElement,
+		editor: editor,
+		balloonPopup: balloonPopup
+	};
+};
+
+/** @private
+* @param {Object} grid core grid object
+* @return {object} inCellCache
+*/
+InCellEditingPlugin.prototype._createTitleEditor = function (grid) {
+	let t = this;
+	if(!t._headerInCellCache) {
+		t._headerInCellCache = t._createInCellCache(grid, "input");
+	}
+
+	return t._headerInCellCache;
+};
+
+/** @private
+* @param {number} columnIndex
+* @param {Object} grid core grid object
+* @return {object} inCellCache
+*/
+InCellEditingPlugin.prototype._createContentEditor = function (columnIndex, grid) {
+	let t = this;
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	let columnData = t._getColumnData(columnIndex, grid);
+	let inCellColumnConfig = columnData["inCellEditing"];
+	let elemTag = typeMap[inCellColumnConfig && inCellColumnConfig.type] || t._defaultTag;
+
+	if(!columnData["inCellCache"]) {
+		let attributes = inCellColumnConfig ? inCellColumnConfig.attributes : null;
+		columnData["inCellCache"] = t._createInCellCache(grid, elemTag, attributes);
+	}
+	let inCellCache = columnData["inCellCache"];
+
+	// Setup initial value for the editor
+	if(elemTag === typeMap.select || elemTag === typeMap.combobox) {
+		inCellCache["inputElement"].data = inCellColumnConfig && inCellColumnConfig.entries;
+	}
+
+	return inCellCache;
+};
+/** @override
+* @return {string}
+*/
+InCellEditingPlugin.prototype.getName = function () {
+	return "InCellEditingPlugin";
+};
+
+/** @private
+* @param {Event|Element} e
+*/
+InCellEditingPlugin.prototype._onColumnAdded = function(e) {
+	if(e.context && e.colIndex != null) {
+	 //	e.context is a columnOption;
+		this._retrieveColumnOption(e.context, e.colIndex);
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRicAdded = function(e) {
+	this._requestUpdateStarterText(false);
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRicRemoved = function(e) {
+	if(this._realTimeGrid && !this._realTimeGrid.hasRic()) {
+		this._requestUpdateStarterText();
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onColumnChanged = function(e) {
+	this._requestUpdateStarterText();
+};
+
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRowCountChanged = function(e) {
+	this._requestUpdateStarterText();
+};
+
+/** Called by grid system when initial plugins.
+* @public
+* @param {Object} host core grid object
+* @param {Object} options
+*/
+InCellEditingPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+
+	if(!this._hosts.length) {
+		window.addEventListener("scroll", this._onScroll);
+	}
+
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("firstRendered", this._firstRendered);
+	host.listen("keydown", this._onGridKeyDown);
+	host.listen("columnAdded", this._onColumnChanged);
+	host.listen("columnRemoved", this._onColumnChanged);
+	host.listen("rowAdded", this._onRowCountChanged);
+	host.listen("rowRemoved", this._onRowCountChanged);
+
+	host.getVScrollbar().listen("scroll", this._onScroll);
+	host.getHScrollbar().listen("scroll", this._onScroll);
+
+	if(this._dblClick) {
+		host.listen("dblclick", this._onDoubleClick);
+
+		// Make a comparable functionality for touchscreen
+		if(isTouchDevice()) {
+			host.listen("touchstart", this._onTouchStart);
+			host.listen("touchend", this._onTouchEnd);
+			host.listen("touchcancel", this._onTouchEnd);
+		}
+	}
+
+	this._hosts.push(host);
+
+	let elemMap = InCellEditingPlugin._uiElementTypesMap;
+	if(ElfUtil.getElfVersion() < 4) {
+		// ef-input available in elf version < 4
+		elemMap["number"] = "ef-input";
+	}
+	if(ElfUtil.getElfVersion() >= 6) {
+		elemMap["number"] = "ef-number-field";
+		elemMap["select"] = "ef-select";
+		elemMap["dropdown"] = "ef-select";
+		elemMap["date"] = "ef-datetime-picker";
+		elemMap["checkbox"] = "ef-checkbox";
+		elemMap["boolean"] = "ef-checkbox";
+		elemMap["combobox"] = "ef-combo-box";
+	}
+
+	if(ElfUtil.isHaloTheme()) {
+		if(!host._inCellEditingStyles) {
+			host._inCellEditingStyles = true;
+			injectCss(InCellEditingPlugin._styles, host.getElement());
+		}
+	}
+
+	this.config(options);
+
+	if(!InCellEditingPlugin._primaryColor) {
+		ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded).catch(InCellEditingPlugin._onThemeLoaded);
+	}
+};
+/** Remove redundant built-in composite-grid feature
+* @public
+* @param {string} optionName
+* @param {*} optionVal
+* @return {*} The transformed value of the option
+*/
+InCellEditingPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
+	if(optionName == "cellEditing") {
+		return null; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+/** @private
+* @override
+*/
+InCellEditingPlugin.prototype._afterInit = function () {
+	this._elfVersion = ElfUtil.getElfVersion();
+	if(this._realTimeGrid) {
+		this._realTimeGrid.listen("ricAdded", this._onRicAdded);
+		this._realTimeGrid.listen("ricRemoved", this._onRicRemoved);
+	}
+};
+
+/** @private
+*/
+InCellEditingPlugin.prototype._firstRendered = function () {
+	if(!this._readonly && this._starterText) {
+		this._requestUpdateStarterText();
+	}
+};
+
+/** @public
+* @param {Object=} options
+*/
+InCellEditingPlugin.prototype.config = function(options) {
+	if(!options) {
+		return;
+	}
+	let t = this;
+
+	// config column
+	let columns = options["columns"];
+	if(columns) {
+		let len = columns.length;
+		for(let c = 0; c < len; ++c) {
+			t._retrieveColumnOption(columns[c], c);
+		}
+	}
+
+	let pluginOption = options["inCellEditing"];
+	if(!pluginOption) return;
+
+	// options
+	if(pluginOption["type"])
+		t._defaultTag = InCellEditingPlugin._uiElementTypesMap[pluginOption["type"]];
+
+	if(pluginOption["balloonMode"])
+		t.enableBalloonMode(pluginOption["balloonMode"]);
+
+	if(pluginOption["editableTitle"])
+		t.enableTitleEditing(pluginOption["editableTitle"]);
+
+	if(pluginOption["editableContent"])
+		t._editableContent = true;
+
+	if(pluginOption["tabToMove"])
+		t._tabToMove = true;
+
+	if(pluginOption["autoCommitText"])
+		t.enableAutoCommitText(pluginOption["autoCommitText"]);
+
+	if(pluginOption["dataBinding"] != null)
+		t.disableDataBinding(!pluginOption["dataBinding"]);
+
+	if(pluginOption["contentSource"] != null)
+		t._contentSource = pluginOption["contentSource"];
+
+	if(pluginOption["popupElement"]){
+		t.setPopupElement(pluginOption["popupElement"]);
+	}
+
+	if(pluginOption["doubleClick"] != null)
+		t.disableDblClick(!pluginOption["doubleClick"]);
+
+	if(pluginOption["inlineStyling"]) {
+		t._inlineStyling = true;
+	}
+
+	if(pluginOption["disablingScroll"]) {
+		t._disablingScroll = true;
+	}
+
+	if(pluginOption["uiBlocking"]) {
+		t._uiBlocking = true;
+	}
+
+	if(pluginOption["autoSuggest"]) {
+		t._autoSuggest = pluginOption["autoSuggest"];
+	}
+
+	if(pluginOption["closingOnScroll"] == false) {
+		t._closingOnScroll = false;
+	}
+	if(pluginOption["autoHiding"] == false) {
+		t._autoHiding = false;
+	}
+	if(pluginOption["readonly"] == true) {
+		t._readonly = true;
+	}
+	if(pluginOption["starterText"] !== null) {
+		if(typeof pluginOption["starterText"] === "string") {
+			t._starterText = pluginOption["starterText"];
+		} else {
+			t._starterText = pluginOption["starterText"] ? "Type to add" : false;
+		}
+	}
+
+	// event callback
+	t.addListener(pluginOption, "preEditorOpening");
+	t.addListener(pluginOption, "editorOpened");
+	t.addListener(pluginOption, "beforeCommit");
+	t.addListener(pluginOption, "editorClosed");
+	t.addListener(pluginOption, "keyUp");
+	t.addListener(pluginOption, "rowEditorOpened");
+	t.addListener(pluginOption, "beforeRowCommit");
+	t.addListener(pluginOption, "rowEditorClosed");
+};
+
+/** @private
+* @param {Object} obj
+* @param {string} propName
+* @param {boolean} propValue
+* @param {boolean} defaultValue
+* @returns {number} dirty
+*/
+let _setBooleanOption = function(obj, propName, propValue, defaultValue) {
+	if(defaultValue) {
+		if(!propValue) {
+			obj[propName] = false;
+			return true;
+		}
+	} else if(propValue) {
+		obj[propName] = true;
+		return true;
+	}
+	return false;
+};
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
+	let obj = out_obj || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	let val, opt;
+	for(let i = 0; i < len; ++i) {
+		let col = columns[i];
+		if(!col) {
+			col = columns[i] = {};
+		}
+
+		opt = this._getColumnData(i);
+
+		if(!opt) { continue; }
+		if(opt.editableContent != null) {
+			col.editableContent = opt.editableContent;
+		}
+		if(opt.inCellEditing != null) {
+			col.inCellEditing = {};
+
+			val = opt.inCellEditing["type"];
+			if(val != null) {
+				col.inCellEditing["type"] = val;
+			}
+
+			val = opt.inCellEditing["entries"];
+			if(val != null) {
+				col.inCellEditing["entries"]  = val;
+			}
+
+			val = opt.inCellEditing["attributes"];
+			if(val != null) {
+				col.inCellEditing["attributes"] = val;
+			}
+		}
+	}
+
+	let extOptions = obj.inCellEditing;
+	let dirty = 0;
+	if(!extOptions) {
+		extOptions = {};
+	}
+	dirty |= _setBooleanOption(extOptions, "balloonMode", this._balloonMode, false);
+	dirty |= _setBooleanOption(extOptions, "editableTitle", this._editableTitle, false);
+	dirty |= _setBooleanOption(extOptions, "editableContent", this._editableContent, false);
+	dirty |= _setBooleanOption(extOptions, "tabToMove", this._tabToMove, false);
+	dirty |= _setBooleanOption(extOptions, "autoCommitText", this._autoCommitText, false);
+	dirty |= _setBooleanOption(extOptions, "dataBinding", this._dataBinding, true);
+	dirty |= _setBooleanOption(extOptions, "doubleClick", this._dblClick, true);
+	dirty |= _setBooleanOption(extOptions, "inlineStyling", this._inlineStyling, false);
+	dirty |= _setBooleanOption(extOptions, "disablingScroll", this._disablingScroll, false);
+	dirty |= _setBooleanOption(extOptions, "uiBlocking", this._uiBlocking, false);
+	dirty |= _setBooleanOption(extOptions, "closingOnScroll", this._closingOnScroll, true);
+	dirty |= _setBooleanOption(extOptions, "autoHiding", this._autoHiding, true);
+	dirty |= _setBooleanOption(extOptions, "readonly", this._readonly, false);
+
+	if(this._starterText) {
+		if(this._starterText === "Type to add") {
+			extOptions["starterText"] = true;
+		} else {
+			extOptions["starterText"] = this._starterText;
+		}
+	}
+
+	if(this._contentSource !== "textContent") {
+		dirty = 1;
+		extOptions.contentSource = this._contentSource;
+	}
+
+	if(dirty) {
+		obj.inCellEditing = extOptions;
+	}
+
+	return obj;
+};
+
+/** @private
+* @param {Object} columnOption
+* @param {number} colIndex
+*/
+InCellEditingPlugin.prototype._retrieveColumnOption = function (columnOption, colIndex) {
+	let pluginOptions = columnOption["inCellEditing"];
+	let editableContent = columnOption["editableContent"];
+
+	if(pluginOptions != null || editableContent != null) {
+		let colData = this._newColumnData(colIndex);
+		if(pluginOptions != null) {
+			colData["inCellEditing"] = pluginOptions;
+			pluginOptions.entries = CoralItems.create(pluginOptions.entries); // Create entries for coral select and combobox
+		}
+		if(editableContent != null) {
+			colData["editableContent"] = editableContent;
+		}
+	}
+};
+
+/** @override */
+InCellEditingPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+	this._hosts.splice(at, 1);
+
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("firstRendered", this._firstRendered);
+	host.unlisten("keydown", this._onGridKeyDown);
+	host.unlisten("columnAdded", this._onColumnChanged);
+	host.unlisten("columnRemoved", this._onColumnChanged);
+	host.unlisten("rowAdded", this._onRowCountChanged);
+	host.unlisten("rowRemoved", this._onRowCountChanged);
+	host.getVScrollbar().unlisten("scroll", this._onScroll);
+	host.getHScrollbar().unlisten("scroll", this._onScroll);
+
+	host.unlisten("dblclick", this._onDoubleClick);
+	host.unlisten("touchstart", this._onTouchStart);
+	host.unlisten("touchend", this._onTouchEnd);
+	host.unlisten("touchcancel", this._onTouchEnd);
+
+	if(!this._hosts.length) {
+		if(this._touchTimerId) {
+			clearTimeout(this._touchTimerId);
+		}
+		if(this._editorTimerId) {
+			clearTimeout(this._editorTimerId);
+		}
+		window.removeEventListener("scroll", this._onScroll);
+		if(this._starterTextPopup) {
+			this._starterTextPopup.dispose();
+		}
+		if(this._realTimeGrid && this._starterText) {
+			this._realTimeGrid.removeEventListener("ricAdded", this._onRicAdded);
+			this._realTimeGrid.removeEventListener("ricRemoved", this._onRicRemoved);
+		}
+		this._updateStarterTextConflator.reset();
+	}
+	if(this.isEditing()) {
+		this.closeRowEditor(false);
+		this.closeCellEditor(false);
+	}
+	this._dispose();
+};
+
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Object=} sectionRef grid SectionReference object
+* @param {Object=} grid core grid object
+* @fires InCellEditingPlugin#editorOpened
+*/
+InCellEditingPlugin.prototype.openEditor = function (colIndex, rowIndex, sectionRef, grid) {
+	if(!grid) {
+		grid = this._hosts[0];
+		if(!grid) {
+			return;
+		}
+	}
+	if(this._readonly) {
+		return;
+	}
+
+	let sectionSettings = grid.getSectionSettings(sectionRef || "content");
+	let activePos = this._activePos;
+	if(activePos) {
+		let sectionName = sectionSettings ? sectionSettings.getType() : "";
+
+		if(activePos["colIndex"] === colIndex &&
+			activePos["rowIndex"] === rowIndex &&
+			activePos["sectionName"] === sectionName &&
+			activePos["grid"] === grid
+		) {
+			return; // The same cell is open twice
+		}
+
+		this.closeCellEditor(); // Close previously opened cell editor
+	}
+	let section = sectionSettings ? sectionSettings.getSection() : null;
+	let cell = section ? section.getCell(colIndex, rowIndex) : null;
+	if(!cell) {
+		return; // Some input is invalid
+	}
+
+	grid.scrollToColumn(colIndex);
+	grid.scrollToRow(null, rowIndex); // TODO: Fix this workaround
+
+	setTimeout(this._openEditor.bind(this, cell, grid), 100);
+};
+
+/** @public
+* @param {boolean=} opt_forceCommit
+* @fires InCellEditingPlugin#cancelled
+*/
+InCellEditingPlugin.prototype.closeCellEditor = function (opt_forceCommit) {
+	this._commitText(opt_forceCommit || this._autoCommitText);
+};
+
+/** @public
+* @param {boolean=} opt_enabled
+*/
+InCellEditingPlugin.prototype.enableBalloonMode = function (opt_enabled) {
+	this._balloonMode = opt_enabled !== false;
+};
+
+/** @public
+* @param {boolean=} opt_enabled
+*/
+InCellEditingPlugin.prototype.enableTitleEditing = function (opt_enabled) {
+	this._editableTitle = opt_enabled !== false;
+};
+
+/** Disable editing on all title sections
+* @public
+* @param {boolean=} opt_disabled
+*/
+InCellEditingPlugin.prototype.disableTitleEditing = function (opt_disabled) {
+	this._editableTitle = opt_disabled === false;
+};
+
+/** Disable editing on a per cell basis
+* @public
+* @param {Object} cell Grid cell object
+* @param {boolean=} opt_disabled
+*/
+InCellEditingPlugin.prototype.disableCellEditing = function (cell, opt_disabled) {
+	if(cell) {
+		cell.enableClass("no-editing", opt_disabled !== false);
+	}
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+InCellEditingPlugin.prototype.disableDataBinding = function (opt_disabled) {
+	this._dataBinding = (opt_disabled === false);
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+InCellEditingPlugin.prototype.disableDblClick = function (opt_disabled) {
+	let dblClick = (opt_disabled === false);
+	if(this._dblClick !== dblClick) {
+		this._dblClick = dblClick;
+		for(let i = this._hosts.length; --i >= 0;) {
+			this._listenForTriggering(this._hosts[i], dblClick);
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onGridKeyDown = function (e) {
+	if (e.key.length !== 1) { // Special character
+		return;
+	}
+	if(this._starterText && this._starterTextPopup.isShown()) {
+		let rsp = this._getPlugin("RowSelectionPlugin");
+		if(rsp && rsp.getSelectedRowCount() > 0) {
+			return;
+		}
+		let grid = this._hosts[0];
+		grid.scrollToRow("content", 0, true);
+		if(!this.isEditing()) {
+			let firstEditableCol = this._getFirstEditableColumnIndex();
+			if(firstEditableCol === 0) {
+				return;
+			}
+			let cell = grid.getCell("content", firstEditableCol, 0);
+			this._openEditor(cell, grid);
+		}
+	}
+};
+
+/**
+* @description Show starter text when the grid has no ric
+* @public
+* @param {boolean=} shown
+*/
+InCellEditingPlugin.prototype.showStarterText = function (shown) {
+	this.updateStarterText(shown !== false);
+};
+/**
+* @description Request to show starter text
+* @public
+*/
+InCellEditingPlugin.prototype._requestUpdateStarterText = function () {
+	if(!this._realTimeGrid || !this._starterText) {
+		return;
+	}
+	if(this._updateStarterTextConflator.conflate()){
+		return;
+	}
+	this.updateStarterText();
+};
+
+/**
+* @public
+* @description Updates the starter text to either show or hide it.
+* @param {boolean=} shown Forces the display of the starter text if "true", if "false" it hides the starter text. If not given as a parameter, it automates updating the display of the starter text
+*/
+InCellEditingPlugin.prototype.updateStarterText = function (shown) {
+	if(!this._realTimeGrid || !this._starterText) {
+		return;
+	}
+	// TODO: handled grid have ric but no one rows.
+	let popup;
+	if(!this._starterTextPopup) {
+		popup = this._starterTextPopup = this._createStarterTextElement();
+	} else {
+		popup = this._starterTextPopup;
+	}
+	if(shown === false || this._realTimeGrid.hasRic()) {
+		popup.hide();
+		return;
+	}
+	let grid = this._hosts[0];
+
+	let contentSection = grid.getSection("content");
+	if(!contentSection || contentSection.getRowCount() <= 0) { // WARNING: Core grid is include title section but realtime grid not include
+		popup.hide();
+		return;
+	}
+
+	let editableColIndex = this._getFirstEditableColumnIndex();
+	if(editableColIndex < 0) { // not editable
+		popup.hide();
+		return;
+	}
+	if(grid.getScrollTop()) {
+		grid.setScrollTop(0);
+	}
+
+	let editableCell = contentSection.getCell(editableColIndex, 0);
+	let pos = grid.getRelativePosition(editableCell);
+	if(pos) {
+		let popupElem = popup.getElement();
+		popupElem.style.top = pos.y + "px";
+		popupElem.style.left = pos.x + "px";
+		popupElem.style.lineHeight = editableCell.getHeight() + "px";
+	}
+	popup.show(shown, grid.getParent());
+};
+
+/** @private
+* @return {number}
+*/
+InCellEditingPlugin.prototype._getFirstEditableColumnIndex = function () {
+	if(this._readonly) {
+		return -1;
+	}
+	let grid = this._hosts[0];
+	if(!grid) {
+		return -1;
+	}
+	let colCount = this.getColumnCount();
+	let editableCol = -1;
+	for (let i = 0; i < colCount; i++) {
+		if(grid.isColumnVisible(i) && this.isColumnEditable(i)) { // this._editableContent already check in this method
+			editableCol = i;
+			break;
+		}
+	}
+	return editableCol;
+};
+
+/** @private
+* @return {Object}
+*/
+InCellEditingPlugin.prototype._createStarterTextElement = function () {
+	let container = document.createElement("div");
+	container.textContent = this._starterText;
+	container.className = "starter-text";
+	let popup = window.popup = new Popup(container, {
+		positioning: "custom",
+		autoHiding: false,
+		autoRepositioning: false,
+		hideOnScroll: false
+	});
+	let popupElement = popup.getElement();
+	popupElement.style.position = "absolute";
+	return popup;
+};
+
+/** @public
+ * @description This is for testing purpose to compare element
+ * @ignore
+* @return {Object}
+*/
+InCellEditingPlugin.prototype.getStarterTextelement = function () {
+	return this._starterTextPopup;
+};
+/** Checking Editing is in process.
+* @public
+* @return {boolean}
+*/
+InCellEditingPlugin.prototype.isEditing = function () {
+	return this._editing;
+};
+
+/**
+* @public
+* @param {number=} columnIndex column index of editor, used in row editing mode
+* @param {Object=} grid grid instance, used in row editing mode
+* @return {Element} editor element or null
+* @description Get input element of opened editor where text is stored.
+* for row editing mode, specific column index and grid instance is need.
+* for cell editing mode. function not require param since only one editor can be opened at a time.
+*/
+InCellEditingPlugin.prototype.getTextBox = function (columnIndex, grid) {
+	if(this._activeRowId) { // for row editing mode
+		// get rowEditor that's stored in column data
+		grid = grid || this._hosts[0];
+		if(grid) {
+			let columnData = this._getColumnData(columnIndex, grid);
+			let inCellCache = columnData["inCellCache"];
+			if(inCellCache) {
+				return inCellCache["inputElement"];
+			}
+		}
+	} else if(this._activeInCellCache) { // for cell editing mode
+		return this._activeInCellCache["inputElement"];
+	}
+
+	return null; // no editor open
+};
+
+/** @public
+* @return {string}
+*/
+InCellEditingPlugin.prototype.getInitialText = function () {
+	return this._initialText;
+};
+
+/** @private
+* @param {Object} dataSource DataView
+* @param {number} rowIndex
+* @param {string} field
+* @param {Element=} content element that get from cell.getContent
+* @param {string} sectionType
+* @return {*}
+*/
+InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex, field, content, sectionType) {
+	if(this._contentSource == "field" && sectionType !== "title") {
+		return this._getData(dataSource, rowIndex, field);
+	} else {
+		let textNode, str;
+		if(content) {
+			let len = content.childNodes.length;
+			for(let i = 0; i < len; ++i) {
+				if(content.childNodes[i].nodeType === 3) {
+					textNode = content.childNodes[i]; // To preserve current content structure
+					break;
+				}
+			}
+		}
+
+		if(textNode) {
+			str = textNode.textContent;
+		} else if(content) {
+			str = content.textContent;
+		}
+		return str;
+	}
+};
+
+/**
+* @public
+* @param {string} rowId
+* @return {!number} row index will return -1 if not found
+*/
+InCellEditingPlugin.prototype._getRowIndex = function (rowId) {
+	if(rowId && this._lastActiveGrid) {
+		let dv = this._lastActiveGrid.getDataSource();
+		if(dv) return dv.getRowIndex(rowId);
+	}
+	return -1;
+};
+
+/**
+* @private
+* @param {number} rowIndex
+* @return {!string} return empty string if not found
+*/
+InCellEditingPlugin.prototype._getRowId = function (rowIndex) {
+	if(rowIndex != null && this._lastActiveGrid) {
+		let dv = this._lastActiveGrid.getDataSource();
+		if(dv) return dv.getRowId(rowIndex);
+	}
+	return "";
+};
+
+/** @private
+* @return {Object|null} core grid object
+*/
+InCellEditingPlugin.prototype.getActiveGrid = function () {
+	return this._activePos ? this._activePos["grid"] : null;
+};
+
+/** get active column index that editor had opended. Function can work only in cell editing mode.
+*  @public
+* @return {number} column index will return -1 if not found
+*/
+InCellEditingPlugin.prototype.getActiveColIndex = function () {
+	if(this._activePos) {
+		let colIndex = this._activePos["colIndex"];
+		if(colIndex != null) return colIndex;
+	}
+	return -1;
+};
+
+/** get active row index that editor had opended. Function Can work in both cell/row editing modes.
+* @public
+* @return {number} row index will return -1 if not found
+*/
+InCellEditingPlugin.prototype.getActiveRowIndex = function () {
+	if(this._activeRowId) { // row editing mode
+		return this._getRowIndex(this._activeRowId);
+	} else if(this._activePos) { // cell editing mode
+		let rowIndex = this._activePos["rowIndex"];
+		if(rowIndex != null) return rowIndex;
+	}
+	return -1;
+};
+
+/** @public
+* @return {Object}
+*/
+InCellEditingPlugin.prototype.getInputElementPosition = function () {
+	return this._activePos || null;
+};
+
+/** @public
+* @param {boolean=} opt_enable
+*/
+InCellEditingPlugin.prototype.enableAutoCommitText = function (opt_enable) {
+	this._autoCommitText = (opt_enable !== false);
+};
+
+/** Check if the column can be edited by double click
+* @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+InCellEditingPlugin.prototype.isColumnEditable = function (colIndex) {
+	if(this._readonly) {
+		return false;
+	}
+	let val = this._getColumnOption(colIndex, "editableContent");
+	return val == null ? this._editableContent : val;
+};
+/** Change editability of the specified column at runtime
+* @public
+* @param {number} colIndex
+* @param {(boolean|null)=} bool If null or undefined value is specified, the editability will be decided by other extension settings
+*/
+InCellEditingPlugin.prototype.setColumnEditability = function (colIndex, bool) {
+	let colData = this._newColumnData(colIndex);
+	colData["editableContent"] = (bool != null) ? bool : null;
+};
+
+/**
+* @public
+* @param {boolean=} enabled
+*/
+InCellEditingPlugin.prototype.enableReadonly = function (enabled) {
+	this._readonly = enabled !== false;
+	if(this._readonly) {
+		this.updateStarterText(false);
+	} else {
+		this.updateStarterText();
+	}
+};
+/**
+* @public
+* @param {boolean=} disabled
+*/
+InCellEditingPlugin.prototype.disableReadonly = function (disabled) {
+	this.enableReadonly(disabled === false);
+};
+/** @public
+* @description Supply an keyboard input. This is for testing purpose.
+* @ignore
+* @param {string} keyName
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.supplyKey = function(keyName, context) {
+	let eventObj = this._mockKeyboardEvent(keyName, context);
+	this._onTextKeyDown(eventObj);
+	this._onTextKeyUp(eventObj);
+};
+/** @public
+* @description Supply an keyboard input. This is for testing purpose.
+* @ignore
+* @param {string} keyName
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.supplyGridKeydown = function(keyName, context) {
+	let eventObj = this._mockKeyboardEvent(keyName, context);
+	this._onGridKeyDown(eventObj);
+};
+/** @public
+* @description Supply an double click event. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Object=} context
+*/
+InCellEditingPlugin.prototype.mockDoubleClick = function(colIndex, rowIndex, context) {
+	let eventObj = this._mockMouseEvent(colIndex, rowIndex, context);
+	this._onDoubleClick(eventObj);
+};
+/** @private
+* @param {Event|Element} e
+* @param {Object=} opt_host core grid object
+* @fires InCellEditingPlugin#editorOpened
+*/
+InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
+	let t = this;
+	if(t._readonly) {
+		return;
+	}
+	let host = opt_host || t.getRelativeGrid(e);
+	if(t.isEditing() || !host) { return; }
+
+	let arg = host.getRelativePosition(e);
+	let sectionType = arg["sectionType"];
+
+	if(sectionType === "content" && !t.isColumnEditable(arg["colIndex"])) {
+		return;
+	} else if(sectionType === "title" && !t._editableTitle) {
+		return;
+	} else if(sectionType === "header") {
+		return;
+	}
+
+	let dataSource = arg["dataSource"];
+	if(dataSource != null) {
+		let rowId = dataSource.getRowId(arg["rowIndex"]);
+		if(dataSource.getGroupByRowId(rowId)) {
+			return;
+		}
+	}
+
+	// Initialize internal states
+	if(e["preventDefault"]) {
+		Dom.preventDefault(e);
+	}
+	t.openEditor(arg.colIndex, arg.rowIndex, arg.section, host);
+};
+
+/** @private
+* @param {Object} section Section (LayoutGrid) object
+* @returns {string} bgColor
+*/
+InCellEditingPlugin.prototype._getSectionBGColor = function (section) {
+	if(this._elfVersion || this._inlineStyling) {
+		let computedStyle = section.getComputedStyle();
+		if(computedStyle) {
+			return computedStyle.backgroundColor;
+		}
+	}
+	return "";
+};
+
+/** @private
+* @param {Element} e
+* @param {Object} host core grid object
+* @param {Object=} arg
+*/
+InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
+	let t = this;
+	if(!host.getElement() || this._hosts.indexOf(host) < 0) { // Check validity due to asyncronous call
+		return;
+	}
+
+	if(!arg) {
+		arg = host.getRelativePosition(e);
+	}
+
+	if(!arg["hit"]) { // The specified cell could be gone during the asyncronous process
+		return;
+	}
+
+	t._dispatch("preEditorOpening", arg);
+
+	if(arg["cancel"]) {
+		return;
+	}
+
+	let colIndex = arg["colIndex"];
+	let rowIndex = arg["rowIndex"];
+	let section = arg["section"];
+	let cell = section.getCell(colIndex, rowIndex);
+	let rowSpan = 1;
+	let stretchedCell = section.getStretchedCell(cell, rowIndex);
+	if(stretchedCell){
+		cell = stretchedCell;
+	} else {
+		rowSpan = section.getCellRowSpan(colIndex, rowIndex);
+	}
+
+	if(!cell || cell.hasClass("no-editing")) {
+		return;
+	}
+	// Everything has been verified at this point. We can start the opening process.
+
+	// close row editor first
+	t.closeRowEditor(false, host);
+
+	section.addClass("edit-mode");
+	t._lastActiveGrid = host;
+	t._activePos = arg;
+	arg["cell"] = t._activeCell = cell;
+	arg["content"] = t._prevContent = cell.getContent();
+	arg["field"] = t._getField(colIndex);
+
+	let dataSource = arg["dataSource"];
+	if(dataSource != null) {
+		let rowId = arg["rowId"] = this._getRowId(arg["rowIndex"]);
+		arg["segmentSeparator"] = dataSource.isSegmentSeparator(rowId);
+		arg["groupHeader"] = dataSource.getGroupByRowId(rowId);
+		arg["rowData"] = this._getRow(dataSource, rowId);
+
+		if(dataSource["stall"]) {
+			dataSource["stall"](true);
+		}
+	}
+
+	// Initialize UIs
+	if(arg["sectionType"] === "title") {
+		t._activeInCellCache = t._createTitleEditor(host);
+	} else {
+		t._activeInCellCache = t._createContentEditor(colIndex, host);
+	}
+
+	let inputElement = arg["inputElement"] = t._activeInCellCache["inputElement"];
+	let editor = arg["editor"] = t._activeInCellCache["editor"];
+	let balloonPopup = t._activeInCellCache["balloonPopup"];
+	let sourceContent = arg ? t._getSourceContent(arg["dataSource"], arg["rowIndex"], arg["field"], arg["content"], arg["sectionType"]) : "";
+
+	if(rowIndex + 1 >= section.getRowCount()) {
+		inputElement.classList.add("bottom");
+	} else {
+		inputElement.classList.remove("bottom");
+	}
+
+	// Initialize Balloon
+	t._usingBalloon = t._isBalloonMode(cell);
+	if(t._usingBalloon) {
+		editor.classList.add("balloon");
+	} else {
+		editor.classList.remove("balloon");
+	}
+
+	let editorStyle = editor.style;
+	editorStyle.backgroundColor = this._getSectionBGColor(section);
+	let rowH = section.getRowHeight(rowIndex);
+	let width = cell.getWidth();
+	if(!host.isPinnedColumn(colIndex)) {
+		let hScrollbar = host.getHScrollbar();
+		if(hScrollbar.isActive()) {
+			let paneSize = hScrollbar.getPaneSize();
+			if(width > paneSize) {
+				width = paneSize;
+			}
+		}
+	}
+	if(!t._usingBalloon || width > 208) {
+		editorStyle.width = width + "px";
+	} else {
+		editorStyle.width = "";
+	}
+
+	if(rowSpan > 1) {
+		editorStyle.height = cell.getHeight() + "px";
+	} else {
+		editorStyle.height = rowH + "px";
+	}
+
+	// Attach our popup (balloon element)
+	let parentElement = document.body;
+	if(t._compositeGrid || t._realTimeGrid) {
+		let activeGrid = t.getActiveGrid();
+		if(activeGrid) {
+			parentElement = activeGrid.getElement().parentElement;
+		}
+	}
+
+	balloonPopup.enableUIBlocking(t._uiBlocking);
+	balloonPopup.addEventListener("hidden", t._onPopupHide);
+	balloonPopup.disableAutoHiding(!t._autoHiding);
+	balloonPopup.disableHideOnScroll(true);
+	balloonPopup.attachTo(cell.getElement());
+	balloonPopup.show(true, parentElement);
+
+	this._updateEditorPopup(t._activeInCellCache, cell, host);
+
+	// Attach user element
+	if(t._customElement) {
+		t._customElementPopup.attachTo(editor);
+		t._customElementPopup.show(true, parentElement);
+		t._customElementPopup.disableAutoHiding(false);
+		arg["popupElement"] = t._customElement;
+	}
+
+	// WARNING: value-changed event from ELF v3 component may NOT be triggered due to their design flaw
+	t._setText(sourceContent, inputElement);
+	arg["initialText"] = t._initialText = sourceContent;
+
+	if(t._disablingScroll) {
+		t._freezeScrolling(host, true);
+	}
+
+	arg["autoSuggest"] = t._autoSuggest;
+	if(t._autoSuggest) {
+		if(t._autoSuggest.attach === inputElement) {
+			t._autoSuggest.attach = null; // WORKAROUND: reset attach for re-attach target
+		}
+
+		if(t._autoSuggest.parentNode !== editor ) { // if we appendChild all time when open editor, events won't work
+			editor.appendChild(t._autoSuggest);
+		}
+		t._autoSuggest.attach = inputElement;
+		t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
+	}
+
+	// Dispatch an event for user to setup stuff
+	t._dispatch("editorOpened", arg); // User may modify the editor
+	t.updateStarterText(false); // Currently Starter text open doesn't have the ric, it needs to be forcefully hide
+
+	inputElement.focus();
+	if(typeof inputElement.select === "function") {
+		inputElement.select();
+	}
+
+	arg["initialText"] = t._initialText = t.getText(); // After all modifications, cache the string for text change event
+	t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
+};
+
+/** Open the row editor on the specified row
+* @public
+* @param {number} rowIndex Row index of a row to be opened.
+* @param {Object=} grid Core grid object used mainly for multi-table configuration. No need to supply this parameter for default single grid configuration.
+* @fires InCellEditingPlugin#rowEditorOpened
+*/
+InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
+	let t = this;
+	grid = grid || t._hosts[0];
+
+	if(t._getRowIndex(t._activeRowId) === rowIndex || !grid || t._readonly) {
+		return;
+	}
+	if(grid.isDisposed()) {
+		return;
+	}
+
+	t.closeRowEditor(false, grid);
+	t._commitText(false);
+
+	let firstInput, firstPopup;
+	let sectionType = "content";
+	let section = grid.getSection(sectionType);
+	let dataSource = grid.getDataSource();
+	let colCount = section.getColumnCount();
+	let isBottom = (rowIndex + 1) >= section.getRowCount();
+	let sectionBGColor = this._getSectionBGColor(section);
+	let rowH = section.getRowHeight(rowIndex);
+
+	// if normally parent popup will be document.body
+	let parentElement = document.body;
+
+	// but if grid is _compositeGrid or _realTimeGrid then
+	// then we will use grid parent instead
+	if(t._compositeGrid || t._realTimeGrid) {
+		parentElement = grid.getElement().parentElement;
+	}
+
+	let arg = {
+		"rowIndex": rowIndex,
+		"rowId": "",
+		"grid": grid,
+		"fields": [],
+		"cells": [],
+		"inputs": [],
+		"initialValues": [],
+		"fieldValues": {}
+	};
+	for(let colIndex = 0; colIndex < colCount; colIndex++) {
+		if(!t.isColumnEditable(colIndex)) {
+			continue;
+		}
+		let cell = section.getCell(colIndex, rowIndex);
+		if(!cell || cell.hasClass("no-editing")) {
+			continue;
+		}
+
+		arg["cells"][colIndex] = cell;
+		let field = t._getField(colIndex);
+		arg["fields"][colIndex] = field;
+
+		let inCellCache = t._createContentEditor(colIndex, grid);
+		inCellCache.field = field; // The field may be changed at runtime
+
+		let inputElement = inCellCache["inputElement"];
+		let balloonPopup = inCellCache["balloonPopup"];
+
+		arg["inputs"][colIndex] = inputElement;
+		if(!firstInput) {
+			firstInput = inputElement;
+			firstPopup = balloonPopup;
+			balloonPopup.enableUIBlocking(t._uiBlocking);
+		} else {
+			balloonPopup.enableUIBlocking(false);
+		}
+
+		let content = cell.getContent();
+		let sourceContent = t._getSourceContent(dataSource, rowIndex, field, content, sectionType);
+		arg["initialValues"][colIndex] = sourceContent;
+		arg["fieldValues"][field] = sourceContent;
+		t._setText(sourceContent, inputElement); // WARNING: value-changed event from ELF v3 component may be triggered due to their design flaw
+
+		if(isBottom) {
+			inputElement.classList.add("bottom");
+		} else {
+			inputElement.classList.remove("bottom");
+		}
+
+		let editor = inCellCache["editor"];
+		let editorStyle = editor.style;
+		editorStyle.backgroundColor = sectionBGColor;
+		editorStyle.height = rowH + "px";
+
+		// row editing mode does not support balloon mode
+		let width = section.getCellWidth(colIndex, rowIndex);
+		editorStyle.width = width + "px";
+		editor.classList.remove("balloon");
+
+		balloonPopup.disableAutoHiding(true);
+		balloonPopup.disableHideOnScroll(true);
+		balloonPopup.attachTo(cell.getElement());
+		balloonPopup.show(true, parentElement);
+
+		this._updateEditorPopup(inCellCache, cell, grid);
+	}
+
+	if(firstInput) {
+		// At least one cell is valid for editing
+		firstPopup.addEventListener("hidden", t._onPopupHide);
+		t._lastActiveGrid = grid;
+		t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
+		t._activeRowId = this._getRowId(rowIndex);
+		firstInput.focus();
+		section.addClass("edit-mode");
+		if(t._disablingScroll) {
+			t._freezeScrolling(grid, true);
+		}
+
+		arg["rowId"] = t._activeRowId;
+		t._dispatch("rowEditorOpened", arg);
+	}
+};
+
+/** Using to close row editor.
+* @public
+* @param {boolean=} isCommit=true Default is true, to save change that user made to datasource
+* @fires InCellEditingPlugin#beforeRowCommit
+* @fires InCellEditingPlugin#rowEditorClosed
+*/
+InCellEditingPlugin.prototype.closeRowEditor = function (isCommit) {
+	let t = this;
+	let grid = t._lastActiveGrid;
+	if(!t._activeRowId || !grid) { return; }
+
+	let rowId = t._activeRowId;
+	let rowIndex = t._getRowIndex(rowId);
+	if(rowIndex <= -1) {
+		isCommit = false; // rowIndex -1 mean row is not found or already disposed
+	} else {
+		isCommit = isCommit !== false; // default is true
+	}
+
+	let section = grid.getSection("content");
+	let colCount = grid.getColumnCount();
+	let fieldValues = {};
+	let inCellCaches = [];
+	let inCellCache;
+	let arg = {
+		"rowIndex": rowIndex,
+		"rowId": t._activeRowId,
+		"grid": grid,
+		"fields": [],
+		"cells": [],
+		"inputs": [],
+		// "initialValues": [],
+		"fieldValues": fieldValues,
+		"fieldValue": fieldValues, // Add alias for backward compatability
+		"cancel": false
+	};
+
+	for(let colIndex = 0; colIndex < colCount; colIndex++) {
+		let columnData = t._getColumnData(colIndex, grid);
+		inCellCache = columnData && columnData["inCellCache"];
+
+		if(inCellCache) {
+			inCellCache.columnIndex = colIndex;
+			inCellCaches.push(inCellCache);
+
+			arg["fields"][colIndex] = inCellCache.field;
+			arg["cells"][colIndex] = section.getCell(colIndex, rowIndex);
+			arg["inputs"][colIndex] = inCellCache["inputElement"];
+
+			if(isCommit) {
+				fieldValues[inCellCache.field] = this._getValue(inCellCache["inputElement"]);
+			}
+		}
+	}
+
+	if(isCommit) {
+		t._dispatch("beforeRowCommit", arg);
+		// arg.cancel = true mean user want to cancel closeRowEditor operation
+		isCommit = !arg.cancel;
+	}
+
+	let i;
+	let editorCount = inCellCaches.length;
+	if(isCommit) {
+		let dataSource = grid.getDataSource();
+		for(i = 0; i < editorCount; i++) {
+			inCellCache = inCellCaches[i];
+			let value = fieldValues[inCellCache.field];
+			// set data to datasource
+			if(dataSource) {
+				// Only use value from fieldValues because fieldValues maybe mutate from beforeRowCommit event
+				t._setData(dataSource, rowIndex, inCellCache.field, value);
+			}
+
+			// set value to ui if content is a build in text
+			let cell = arg["cells"][inCellCache.columnIndex];
+			let content = cell.getContent();
+			if(content && content.classList.contains("text")) {
+				cell.setContent(value);
+			}
+		}
+	}
+
+	arg["committed"] = isCommit;
+	t._dispatch("rowEditorClosed", arg);
+
+	// hide editor by remove popup from dom
+	for(i = 0; i < editorCount; i++) {
+		let popup = inCellCaches[i].balloonPopup;
+		popup.removeEventListener("hidden", t._onPopupHide); // remove event every popup to make sure nothing left
+		popup.hide();
+	}
+
+	t._freezeScrolling(grid, false);
+
+	// reset status and resource
+	section.removeClass("edit-mode");
+	t._editing = false;
+	t._activeRowId = "";
+	t._lastActiveGrid = null;
+	grid.focus();
+};
+
+/** open row editor if no any row editor opened, and close row editor if it already opened
+* @public
+* @param {number} rowIndex
+* @param {boolean=} isCommit=true Default is true, save change that user made to datasource
+* @param {Object=} grid grid instance
+* @fires InCellEditingPlugin#beforeRowCommit
+* @fires InCellEditingPlugin#rowEditorClosed
+*/
+InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, grid) {
+	if(this._getRowIndex(this._activeRowId) === rowIndex) {
+		this.closeRowEditor(isCommit, grid);
+	} else if(this._activeRowId) {
+		this.closeRowEditor(isCommit, grid);
+		this.openRowEditor(rowIndex, grid);
+	} else {
+		this.openRowEditor(rowIndex, grid);
+	}
+};
+
+/** handle grid scrolling not window scroll
+* @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onScroll = function (e) {
+	this._scrolling = true;
+	if(!this._closingOnScroll && this._editing){
+		if(this._activeInCellCache){
+			let popup =  this._activeInCellCache.balloonPopup;
+			popup.hide();
+		}
+		else if(this._activeRowId){
+			let grid = this.getActiveGrid() || this._lastActiveGrid;
+			let section = grid.getSection("content");
+			let lastIndex = (section.getColumnCount() || 0) - 1;
+			for(let columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+				let columnData = this._getColumnData(columnIndex, grid);
+				let inCellCache = columnData["inCellCache"];
+				if(!inCellCache){
+					continue;
+				}
+				let popupCache = inCellCache["balloonPopup"];
+				if(popupCache) {
+					popupCache.hide();
+				}
+			}
+		}
+	}
+	this._onPopupHide();
+	this._scrolling = false;
+};
+
+/** handle popup hidden event
+* @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onPopupHide = function (e) {
+	if(!this._closingOnScroll){
+		if(this._scrolling){
+			this.requestShowEditorPopup();
+			return;
+		}
+	}
+	// in cell editing mode, when popup hide for any reason
+	// cell editing will be close and make a commit. (depend on _autoCommitText flag)
+	// WARNING: when user scroll outside grid. it will call _onPopupHide as well
+	this._commitText(this._autoCommitText);
+
+	// for row editing mode if editor hide by any reason
+	// we will call close closeRowEditor to reset all internal flag status
+	// row editing mode not care about _autoCommitText. (for the time being)
+	this.closeRowEditor(false);
+};
+
+/** @private
+* @param {Object} event
+*/
+InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function(event) {
+	let eventDetail = event.detail;
+	if(!eventDetail) {
+		return;
+	}
+
+	let targetSelected = eventDetail.target;
+
+	if(!targetSelected) {
+		return;
+	}
+
+	let suggestionMethod = eventDetail.method;
+	// Need to check the details of the methods, another method like a navigation, reset, clear shouldn't commit text
+	// TODO: We need to handled tab to move. Currently, the property suggestionDetail in 'beforeCommit' event doesn't handlded when we use autosuggest with tab to move.
+	if(suggestionMethod === "click" || suggestionMethod === "enter") {
+		this.setText(targetSelected.value);
+		this._commitText(true, eventDetail.suggestion);
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onValueChanged = function (e) {
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
+
+	this._commitText(true);
+};
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onMultiSelectionValueChanged = function (e) {
+	e.currentTarget.dirty = true;
+};
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onMultiSelectionEditorChanged = function (e) {
+	if(e.detail && e.detail.value === false){
+		if(this._activePos){
+			let inputElement = this._activePos["inputElement"];
+			if(inputElement.dirty){
+				this._onValueChanged(e);
+				inputElement.dirty = false;
+			}
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onTextKeyDown = function (e) {
+	e.stopPropagation();
+
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
+
+	// KeyCodes.ESC = 27
+	if(e.keyCode === 27) {
+		this._commitText(this._autoCommitText);
+	}
+	// KeyCodes.TAB = 9
+	if(e.keyCode === 9) {
+		// For check press tab key when user tab on auto suggest list
+		// When user tab on auto suggest, the focus should be in input and data doesn't commit
+		if(this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+			this._activeInCellCache.inputElement.focus();
+		}
+		e.preventDefault(); // stop losing focus
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
+	e.stopPropagation();
+
+	if(this._activeRowId) { return; } // do nothing in rowEditMode
+
+	if(this.hasListener("keyUp")) {
+		this._activePos["text"] = this._activePos["enteredText"] = this._activeInCellCache["inputElement"].value;
+		this._dispatch("keyUp", this._activePos);
+	}
+
+	// KeyCodes.ENTER = 13 && KeyCodes.TAB = 9
+	let tabKey = e.keyCode === 9;
+	if(tabKey || e.keyCode === 13) {
+		let text = this.getText();
+		let cellInfo = this._activePos;
+
+		if(this._initialText !== text) {
+			e.preventDefault(); // TODO: Check if this is needed
+			// Clear auto suggest and doesn't commit when user tab on auto suggest item
+			if(this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+				this._activeInCellCache.inputElement.focus();
+				this._autoSuggest.suggestions = [];
+				return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
+			} else {
+				this._commitText(true);
+			}
+		} else {
+			this._commitText(false);
+		}
+
+		if(tabKey && this._tabToMove && !e.altKey && !e.ctrlKey) {
+			let host = cellInfo ? cellInfo["grid"] : null;
+			if(host && host["getCellInfo"]) {
+				let dv = host.getDataSource();
+				while (cellInfo) {
+					cellInfo = (e.shiftKey) ? host.getPrevCell(cellInfo) : host.getNextCell(cellInfo);
+					if(cellInfo && cellInfo["cell"]) {
+						if(dv.getRowDataAt(cellInfo["rowIndex"])) { // Check group header row
+							if(this.isColumnEditable(cellInfo["colIndex"])) {
+								this.openEditor(
+									cellInfo["colIndex"],
+									cellInfo["rowIndex"],
+									cellInfo["sectionName"],
+									cellInfo["grid"]
+								);
+								break;
+							}
+						}
+					} else {
+						cellInfo = null;
+					}
+				}
+			}
+		}
+	}
+};
+/** Commit text from editor to cell.
+* @private
+* @param {boolean} committed
+* @param {Object} suggestionDetail suggestion detail for auto suggest element
+*/
+InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetail) {
+	let t = this;
+	let arg = t._activePos;
+	if(!t.isEditing() || !arg) {
+		return;
+	}
+
+	arg["section"].removeClass("edit-mode");
+	t._editing = false;
+
+	let enteredValue = arg["text"] = t.getValue();
+	let enteredText = t.getText();
+	if(enteredText !== t._initialText) {
+		arg["enteredText"] = enteredText;
+	}
+	let groupHeader = arg["groupHeader"] || false;
+
+	if(committed){
+		if(suggestionDetail) { // This property is only available when the user commits text from the 'item-select' event of the auto suggest.
+			arg["suggestionDetail"] = suggestionDetail;
+		}
+		if(t.hasListener("beforeCommit")) {
+			t._dispatch("beforeCommit", arg);
+			committed = !arg["cancel"];
+			enteredValue = arg["text"];
+		}
+
+		if(committed && t._dataBinding && !groupHeader) {
+			let sectionSettings = arg["sectionSettings"];
+			let sectionType = sectionSettings.getType();
+			// case edit content
+			if("content" === sectionType) {
+				if(t._realTimeGrid && arg["field"] === "X_RIC_NAME") {
+					let ricOpt = null;
+					if(suggestionDetail) {
+						let suggestionVal = suggestionDetail["value"];
+						if(suggestionVal["p"]) {
+							let permId = suggestionVal["p"]["PermId"];
+							if(permId) {
+								ricOpt = { permId: permId };
+							}
+						}
+					}
+
+					t._realTimeGrid.setRic(arg["rowId"], enteredValue, ricOpt);
+				} else {
+					let dv = sectionSettings.getDataSource();
+					if(dv) {
+						if(t._realTimeGrid) {
+							t._setStaticData(dv, arg["rowIndex"], arg["field"], enteredValue);
+						} else {
+							t._setData(dv, arg["rowIndex"], arg["field"], enteredValue);
+						}
+					}
+				}
+
+				if(!t._prevContent || t._prevContent.classList.contains("text")) { // Bind data only if previous content is a build in text
+					t._activeCell.setContent(enteredValue);
+				}
+			} else if("title" === sectionType) {
+				let gridApi = t.getGridApi();
+				if(gridApi) {
+					gridApi.setColumnName(arg["colIndex"], enteredValue);
+				}
+			} else {
+				t._activeCell.setContent(enteredValue);
+			}
+		}
+	}
+
+	if(t.hasListener("editorClosed")) {
+		arg["canceled"] = arg["cancelled"] = !committed;
+		arg["committed"] = committed;
+		t._dispatch("editorClosed", arg);
+	}
+
+	if(t._activeInCellCache && t._activeInCellCache.balloonPopup) {
+		t._activeInCellCache.balloonPopup.removeEventListener("hidden", t._onPopupHide);
+		t._activeInCellCache.balloonPopup.hide();
+	}
+	Dom.removeParent(t._customElement);
+
+	let grid = arg["grid"];
+	t._requestUpdateStarterText(); // Need to updaate starter text when text commit
+	if(grid) {
+		t._freezeScrolling(grid, false);
+		grid.focus();
+	}
+	let dataSource = arg["dataSource"];
+	if(dataSource) {
+		if(dataSource["stall"]) {
+			dataSource["stall"](false);
+		}
+	}
+
+	t._activePos = t._activeCell = t._prevContent = t._lastActiveGrid = t._activeInCellCache = null;
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._stopPropagation = function (e) {
+	e.stopPropagation();
+};
+
+/** Using for Check balloon mode is turn on/off.
+* @private
+* @param {Object} cell Grid cell object
+* @return {boolean}
+*/
+InCellEditingPlugin.prototype._isBalloonMode = function (cell) {
+	let cellElem = cell.getElement();
+	let compStyles = (cellElem) ? window.getComputedStyle(cellElem) : {};
+
+	return (this._balloonMode || compStyles.display === "none" || compStyles.visibility === "hidden");
+};
+
+/** @private
+* @param {Object} host core grid object
+* @param {boolean} bool
+*/
+InCellEditingPlugin.prototype._listenForTriggering = function (host, bool) {
+	if(bool) {
+		host.listen("dblclick", this._onDoubleClick);
+
+		// Make a comparable functionality for touchscreen
+		if(isTouchDevice()) {
+			host.listen("touchstart", this._onTouchStart);
+			host.listen("touchend", this._onTouchEnd);
+			host.listen("touchcancel", this._onTouchEnd);
+		}
+	} else {
+		host.unlisten("dblclick", this._onDoubleClick);
+		host.unlisten("touchstart", this._onTouchStart);
+		host.unlisten("touchend", this._onTouchEnd);
+		host.unlisten("touchcancel", this._onTouchEnd);
+	}
+};
+
+
+/** Use only On-Touch-Start event on mobile devices.
+* @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onTouchStart = function (e) {
+	this._resetTouchTimer();
+	this._touchTimerId = setTimeout(this._onTouchTimer, this._longPressTime);
+};
+
+/** Use only press time on mobile devices.
+* @private
+* @param {Object} e
+*/
+InCellEditingPlugin.prototype._onTouchTimer = function (e) {
+	this._touchTimerId = 0;
+};
+
+/** Use only On-Touch-End event on mobile devices.
+* @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onTouchEnd = function (e) {
+	if(!this._resetTouchTimer()) {
+		this._onDoubleClick(e); // Trigger cell editor
+	}
+};
+
+/** Use only to reset timer on mobile devices.
+* @private
+* @return {boolean}
+*/
+InCellEditingPlugin.prototype._resetTouchTimer = function () {
+	if(this._touchTimerId) {
+		clearTimeout(this._touchTimerId);
+		this._touchTimerId = 0;
+		return true;
+	}
+	return false;
+};
+
+/** Set other elements to using like popup when editing cell.
+* @public
+* @param {Element} elm
+*/
+InCellEditingPlugin.prototype.setPopupElement = function (elm) {
+	let balloonPopup = this._activeInCellCache && this._activeInCellCache["balloonPopup"];
+	if(this._customElement) {
+		balloonPopup && balloonPopup.removeFocusElement(this._customElement);
+		this._customElementPopup.dispose();
+		this._customElementPopup = null;
+	}
+
+	this._customElement = elm;
+
+	if(this._customElement) {
+		this._customElementPopup = new Popup(this._customElement);
+		balloonPopup && balloonPopup.addFocusElement(this._customElement);
+	}
+};
+
+/** Set content to the editor but do not commit anything to internal storage.
+* @public
+* @param {*} content
+*/
+InCellEditingPlugin.prototype.setText = function (content) {
+	// TODO: since we have inputElement per each column
+	// we should receive column index to set value in specific column
+	this._activeInCellCache && this._setText(content, this._activeInCellCache["inputElement"]);
+};
+
+/** @private
+* @param {*} content
+* @param {Element} inputElement editor element
+*/
+InCellEditingPlugin.prototype._setText = function (content, inputElement) {
+	inputElement._origValue = content;
+
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		let checked = (content) ? !(content === "f" || content === "false") : false;
+		if(checked) {
+			inputElement.setAttribute("checked", "true");
+		} else {
+			inputElement.removeAttribute("checked");
+		}
+	} else if(inputTag === typeMap.combobox) {
+		let isMultiple = inputElement.getAttribute("multiple");
+
+		if(isMultiple){
+			inputElement.values = content.split(/, */);
+		} else if(this._elfVersion <= 3) {
+			inputElement.value = "";
+			inputElement.value = { value: content, label: content };
+		} else {
+			inputElement.value = content;
+		}
+	} else if(inputTag === typeMap.date) {
+		ElfDate.setDate(inputElement, content);
+	} else {
+		let txt = "";
+		if(content != null) {
+			if(typeof content === "string") {
+				txt = content;
+			} else { // content could be false, 0, NaN or etc.
+				txt = content + "";
+			}
+		}
+		inputElement.value = txt;
+	}
+};
+
+/** Get current text from the editor
+* @public
+* @return {string}
+* @see {@link InCellEditingPlugin#getValue}
+*/
+InCellEditingPlugin.prototype.getText = function () {
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return text of inputElement in specific column
+	if(this._activeInCellCache)
+		return this._getText(this._activeInCellCache["inputElement"]);
+	else
+		return "";
+};
+
+/** @private
+* @param {Element} inputElement editor element
+* @return {string}
+*/
+InCellEditingPlugin.prototype._getText = function (inputElement) {
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		return inputElement.checked + "";
+	} else if(inputTag === typeMap.combobox) {
+		if(this._elfVersion <= 3) {
+			return inputElement.value ? inputElement.value.value : "";
+		}
+	} else if(inputTag === typeMap.date) {
+		return inputElement.value + "";
+	}
+	return inputElement.value;
+};
+
+/** Convert current text from the editor to value corresponding to the type of the editor
+* @public
+* @return {*} Returned type is based on the type of the editor
+* @see {@link InCellEditingPlugin#getText}
+*/
+InCellEditingPlugin.prototype.getValue = function () {
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return value of inputElement in specific column
+	return this._activeInCellCache ? this._getValue(this._activeInCellCache["inputElement"]) : null;
+};
+
+/** @private
+* @param {Element} inputElement editor element
+* @return {*} Returned type is based on the type of the editor
+*/
+InCellEditingPlugin.prototype._getValue = function (inputElement) {
+	let inputTag = inputElement.tagName.toLowerCase();
+	let typeMap = InCellEditingPlugin._uiElementTypesMap;
+	if(inputTag === typeMap.checkbox) {
+		return inputElement.checked ? true : false;
+	} else if(inputTag === typeMap.date) {
+		return ElfDate.getDate(inputElement);
+	} else if(
+		inputTag === typeMap.number ||
+		typeof inputElement._origValue === "number" // Smart data conversion based orignal value
+	) {
+		return +inputElement.value;
+	} else if(inputTag === typeMap.combobox && inputElement.getAttribute("multiple")) {
+		return inputElement.values.join(", ");
+	}
+
+	return this._getText(inputElement);
+};
+
+/** Use to clear text in text editor.
+* @public
+*/
+InCellEditingPlugin.prototype.clearText = function () {
+	this.setText("");
+};
+
+/** Use to append text in text editor. WARNING: Only works with the text type editor
+* @public
+* @param {string} word
+*/
+InCellEditingPlugin.prototype.appendText = function (word) {
+	// TODO: since we have inputElement per each column
+	// we should receive column index to return append text in specific column
+	if(word && this._activeInCellCache) {
+		this._activeInCellCache["inputElement"].value += word;
+	}
+};
+
+/** Commit text will set text and commit to cell.
+* @public
+* @param {string=} word
+*/
+InCellEditingPlugin.prototype.commitText = function (word) {
+	if(word) {
+		this.setText(word);
+	}
+	this._commitText(true);
+};
+
+/** Get Balloon Popup Element to access any API provided.
+* @public
+* @return {Popup|null}
+*/
+InCellEditingPlugin.prototype.getBalloonPopup = function () {
+	// TODO: since we have balloonPopup per each column
+	// we should receive column index to return balloonPopup in specific column
+	return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
+};
+
+/** Get ef-autosuggest or atlas-autosuggest
+* @public
+* @return {Element}
+*/
+InCellEditingPlugin.prototype.getAutoSuggest = function () {
+	return this._autoSuggest;
+};
+
+/**
+* @public
+* @param {boolean=} disabled
+* @return {boolean} previous disablingScroll status
+*/
+InCellEditingPlugin.prototype.setDisablingScroll = function (disabled) {
+	let prev = disabled;
+	this._disablingScroll = disabled;
+	return prev;
+};
+
+/** stop scrolling to move to prevent editor close
+* @private
+* @param {Object} grid grid instance
+* @param {boolean=} frozen
+*/
+InCellEditingPlugin.prototype._freezeScrolling = function (grid, frozen) {
+	if(!grid) return;
+
+	let vs = grid.getVScrollbar();
+	let hs = grid.getHScrollbar();
+	vs && vs.freezeScrolling(frozen);
+	hs && hs.freezeScrolling(frozen);
+};
+
+/** Set a timer to call onUpdateEditorPopup only once to avoid performance issue
+* @public
+*/
+InCellEditingPlugin.prototype.requestShowEditorPopup = function() {
+	if(!this._editorTimerId) {
+		this._editorTimerId = setTimeout(this._onUpdateEditorPopup.bind(this), 100);
+	}
+};
+
+/** @private */
+InCellEditingPlugin.prototype._onUpdateEditorPopup = function() {
+	this._editorTimerId = 0;
+	let grid = this.getActiveGrid() || this._lastActiveGrid;
+	if(!grid){
+		return;
+	}
+	let parentElement = document.body;
+	if(this._compositeGrid || this._realTimeGrid) {
+		parentElement = grid.getElement().parentElement;
+	}
+
+	let rowIndex, colIndex;
+
+	if(this._activeInCellCache){
+		let activePos = this._activePos;
+		if(activePos){
+			rowIndex = activePos["rowIndex"];
+			colIndex = activePos["colIndex"];
+			let section = grid.getSection(activePos["sectionType"]);
+			let cell = section.getCell(colIndex, rowIndex);
+			let stretchedCell = section.getStretchedCell(cell, rowIndex);
+			if(stretchedCell){
+				cell = stretchedCell;
+			}
+			if(cell){
+				let popup = this._activeInCellCache["balloonPopup"];
+				popup.attachTo(cell.getElement());
+				popup.show(true, parentElement);
+
+				this._updateEditorPopup(this._activeInCellCache, cell, grid);
+			}
+		}
+	}
+	else if(this._activeRowId){
+		let sectionContent = grid.getSection("content");
+		rowIndex = this._getRowIndex(this._activeRowId);
+		if(sectionContent.isRowVisible(rowIndex)){
+			let lastIndex = (sectionContent.getColumnCount() || 0) - 1;
+			for(let columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+				let columnData = this._getColumnData(columnIndex, grid);
+				let inCellCache = columnData["inCellCache"];
+				let cellContent = sectionContent.getCell(columnIndex, rowIndex);
+				if(!inCellCache || !cellContent){
+					continue;
+				}
+				let popupCache = inCellCache["balloonPopup"];
+				popupCache.attachTo(cellContent.getElement());
+				popupCache.show(true, parentElement);
+
+				this._updateEditorPopup(inCellCache, cellContent, grid);
+			}
+		}
+	}
+};
+/** Update editor popup position and styles
+* @private
+* @param {Object} contentEditor
+* @param {Object} cell
+* @param {Object} grid grid instance
+*/
+InCellEditingPlugin.prototype._updateEditorPopup = function(contentEditor, cell, grid) {
+	let popup = contentEditor["balloonPopup"];
+	let editor = contentEditor["editor"];
+	let inputElement = contentEditor["inputElement"];
+	let popupElem = popup.getElement();
+	let pos = grid.getRelativePosition(cell);
+	let width = cell.getWidth();
+	let height = cell.getHeight();
+	let colRect = grid.getColumnRect(0, grid.getColumnCount());
+	let rowRect = grid.getRowRect(0, grid.getRowCount());
+	let offsetWidth = colRect.scrollViewSize;
+	let offsetHeight = rowRect.scrollViewSize;
+	let offsetLeft = 0;
+	let offsetTop = pos["sectionType"] == "content" ? rowRect.scrollViewTop : 0;
+
+	let newHeight = height;
+	let newWidth = width;
+	let displayStyle =  "inline-block";
+	let marginLeft = 0;
+	let marginTop = 0;
+
+	if(colRect.leftPinnedIndex != -1){
+		let diff = 0;
+		if(grid.getVScrollbar().isActive()){
+			diff -= 8; // If column is left pinned, scrollbar width need to be subtracted
+		}
+		diff += colRect.width - colRect.scrollViewSize;
+		offsetWidth += diff;
+		offsetLeft += diff;
+	}
+
+	if(editor.classList.contains("balloon") && !this._activeRowId){
+		popupElem.style.display = "";
+		editor.style.width = "";
+		editor.style.marginLeft = "";
+		editor.style.marginTop = "";
+		marginLeft = -4;
+		marginTop = -4;
+
+		newWidth = popup.getElement().offsetWidth;
+	}
+
+	if(!pos["hit"]){
+		displayStyle = "none";
+	} else {
+		let acquiredWidth = pos["x"] + newWidth;
+		let acquiredHeight = pos["y"] - offsetTop + newHeight;
+
+		let isPinned = grid.isPinnedColumn(pos["colIndex"]);
+		// if column is pinned, doesn't need to calculate left overflow
+		if(!isPinned) {
+			// Left overflow
+			if(pos["x"] < offsetLeft){
+				newWidth = (newWidth - (offsetLeft - pos["x"]));
+				marginLeft = marginLeft + Math.abs(pos["x"] - offsetLeft);
+			}
+		}
+
+		// Right overflow
+		if(acquiredWidth > offsetWidth){
+			newWidth = newWidth - (acquiredWidth - offsetWidth);
+		}
+		// Top overflow
+		if(pos["y"] < offsetTop){
+			newHeight = (newHeight + pos["y"] - offsetTop);
+			marginTop = marginTop + Math.abs(pos["y"] - offsetTop);
+		}
+		// Bottom overflow
+		if(acquiredHeight > offsetHeight){
+			newHeight = newHeight - (acquiredHeight - offsetHeight);
+		}
+
+		if((newWidth < 48 && newWidth != width) || (newHeight < 16 && newHeight != height)){
+			displayStyle = "none";
+		}
+	}
+
+	popupElem.style.display = displayStyle;
+	editor.style.width = newWidth ? newWidth + "px" : "";
+	editor.style.height = newHeight ? newHeight + "px" : "";
+	editor.style.marginLeft = marginLeft ? marginLeft + "px" : 0;
+	editor.style.marginTop = marginTop ? marginTop + "px" : 0;
+	inputElement.focus();
+};
+
+
+
+export default InCellEditingPlugin;
+export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };