@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,1977 @@
+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 } 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";
+/** @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 {boolean=} 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.
+* @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 all editor in row commit
+* @property {Function=} rowEditorClosed=null Handler after all editors closed
+* @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
+*/
+
+/** @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
+*/
+
+/** @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
+* var 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
+* @example
+* var cep = new InCellEditingPlugin();
+* cep.listen("editorOpened", function(e) {
+*   var 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 {string=} text Text that user has entered
+* @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 {string=} text Text that user has entered
+* @property {boolean=} cancel Set to true to cancel the commit operation.
+* @example
+* var cep = new InCellEditingPlugin();
+* cep.listen("beforeCommit", function(e) {
+*   var 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} fieldValue object that contain text in each field
+* @property {boolean=} cancel Set to true to cancel the commit operation.
+* @example
+* var cep = new InCellEditingPlugin();
+* cep.listen("beforeRowCommit", function(e) {
+*		var fieldValue = e.fieldValue;
+*		for (var field in fieldValue) {
+*			if (!fieldValue.hasOwnProperty(field)) continue;
+*			var value = fieldValue[field];
+*			if (checkValid(value)) { // check value is valid
+*				fieldValue[field] = value + "foo bar"; // modify text
+*			} else {
+*				e.cancel = true; // if not valid maybe cancel commit
+*				break;
+*			}
+*		}
+* });
+*/
+
+/** @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 index of row
+* @property {boolean} committed Indicates whether the commit operation has been done or not.
+* @property {Object} grid grid instance
+* @property {Object} fieldValue object that contain text in each field
+*/
+
+/** @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}
+*/
+
+var InCellEditingPlugin = function InCellEditingPlugin(options) {
+  var 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._onTimer = t._onTimer.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._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._timerId = 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 {string}
+* @private
+*/
+
+InCellEditingPlugin.prototype._defaultTag = "input";
+/** status to show that row is closing
+* @type {boolean}
+* @private
+*/
+
+InCellEditingPlugin.prototype._rowClosing = false;
+/** @type {number}
+* @private
+*/
+
+InCellEditingPlugin.prototype._elfVersion = 0;
+/** @type {string}
+* @private
+*/
+
+InCellEditingPlugin._primaryColor = "";
+/** @private
+* @param {Object} colors
+*/
+
+InCellEditingPlugin._onThemeLoaded = function (colors) {
+  if (!InCellEditingPlugin._primaryColor) InCellEditingPlugin._primaryColor = colors.primary;
+};
+/** @private
+* @param {string} tag element tag
+* @return {Element} input element
+*/
+
+
+InCellEditingPlugin.prototype._createInputElement = function (tag) {
+  var t = this;
+  var elem = document.createElement(tag);
+  var 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) {
+    elem.addEventListener("value-changed", t._onValueChanged);
+  } else if (tag === "ef-input") {
+    elem.setAttribute("type", "number");
+  } else if (tag === typeMap.input) {
+    elem.setAttribute("type", "text");
+  }
+
+  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 () {
+  var 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) {
+  var popup = new Popup(editor, {
+    positioning: "over"
+  });
+  return popup;
+};
+/** @private
+* @param {Object} grid core grid object
+* @param {string} elemTag
+* @return {object} inCellCache
+*/
+
+
+InCellEditingPlugin.prototype._createInCellCache = function (grid, elemTag) {
+  var t = this;
+
+  var editor = t._createEditor();
+
+  var inputElement = t._createInputElement(elemTag);
+
+  var 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) {
+  var 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) {
+  var t = this;
+  var typeMap = InCellEditingPlugin._uiElementTypesMap;
+
+  var columnData = t._getColumnData(columnIndex, grid);
+
+  var inCellColumnConfig = columnData["inCellEditing"];
+  var elemTag = typeMap[inCellColumnConfig && inCellColumnConfig.type] || t._defaultTag;
+
+  if (!columnData["inCellCache"]) {
+    columnData["inCellCache"] = t._createInCellCache(grid, elemTag);
+  }
+
+  var 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);
+  }
+};
+/** 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;
+  }
+
+  host.listen("columnAdded", this._onColumnAdded);
+  host.getVScrollbar().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);
+
+  if (ElfUtil.getElfVersion() < 4) {
+    // ef-input available in elf version < 4
+    InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
+  }
+
+  this.config(options);
+
+  if (!InCellEditingPlugin._primaryColor) {
+    ElfUtil.getThemeColors().then(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();
+};
+/** @public
+* @param {Object=} options
+*/
+
+
+InCellEditingPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  var t = this; // config column
+
+  var columns = options["columns"];
+
+  if (columns) {
+    var len = columns.length;
+
+    for (var c = 0; c < len; ++c) {
+      t._retrieveColumnOption(columns[c], c);
+    }
+  }
+
+  var 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;
+  } // 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, "beforeRowCommit");
+  t.addListener(pluginOption, "rowEditorClosed");
+};
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+
+
+InCellEditingPlugin.prototype.getConfigObject = function (out_obj) {
+  var obj = out_obj || {};
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var col = columns[i];
+
+    if (!col) {
+      col = columns[i] = {};
+    }
+
+    var opt = this._getColumnData(i);
+
+    if (!opt) {
+      continue;
+    }
+
+    if (opt.editableContent != null) {
+      col.editableContent = opt.editableContent;
+    }
+
+    if (opt.inCellEditing != null) {
+      col.inCellEditing = opt.inCellEditing;
+    }
+  }
+
+  var extOptions = obj.inCellEditing;
+
+  if (!extOptions) {
+    extOptions = obj.inCellEditing = {};
+  }
+
+  extOptions.balloonMode = this._balloonMode;
+  extOptions.editableTitle = this._editableTitle;
+  extOptions.editableContent = this._editableContent;
+  extOptions.tabToMove = this._tabToMove;
+  extOptions.autoCommitText = this._autoCommitText;
+  extOptions.dataBinding = this._dataBinding;
+  extOptions.contentSource = this._contentSource;
+  extOptions.doubleClick = this._dblClick;
+  extOptions.inlineStyling = this._inlineStyling;
+  extOptions.disablingScroll = this._disablingScroll;
+  extOptions.uiBlocking = this._uiBlocking;
+  return obj;
+};
+/** @private
+* @param {Object} columnOption
+* @param {number} colIndex
+*/
+
+
+InCellEditingPlugin.prototype._retrieveColumnOption = function (columnOption, colIndex) {
+  var pluginOptions = columnOption["inCellEditing"];
+  var editableContent = columnOption["editableContent"];
+
+  if (pluginOptions != null || editableContent != null) {
+    var 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) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  this._hosts.splice(at, 1);
+
+  host.unlisten("columnAdded", this._onColumnAdded);
+  host.getVScrollbar().unlisten("scroll", this._onScroll);
+  host.unlisten("dblclick", this._onDoubleClick);
+  host.unlisten("touchstart", this._onTouchStart);
+  host.unlisten("touchend", this._onTouchEnd);
+  host.unlisten("touchcancel", this._onTouchEnd);
+
+  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;
+    }
+  }
+
+  var sectionSettings = grid.getSectionSettings(sectionRef || "content");
+  var activePos = this._activePos;
+
+  if (activePos) {
+    var 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
+  }
+
+  var section = sectionSettings ? sectionSettings.getSection() : null;
+  var 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) {
+  var dblClick = opt_disabled === false;
+
+  if (this._dblClick !== dblClick) {
+    this._dblClick = dblClick;
+
+    for (var i = this._hosts.length; --i >= 0;) {
+      this._listenForTriggering(this._hosts[i], dblClick);
+    }
+  }
+};
+/** 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) {
+      var columnData = this._getColumnData(columnIndex, grid);
+
+      var 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
+* @return {*}
+*/
+
+
+InCellEditingPlugin.prototype._getSourceContent = function (dataSource, rowIndex, field, content) {
+  if (this._contentSource == "field") {
+    return this._getData(dataSource, rowIndex, field);
+  } else {
+    var textNode, str;
+
+    if (content) {
+      var len = content.childNodes.length;
+
+      for (var 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) {
+    var dv = this._lastActiveGrid.getDataSource();
+
+    if (dv) return dv.getRowIndex(rowId);
+  }
+
+  return -1;
+};
+/**
+* @public
+* @param {number} rowIndex
+* @return {!string} return empty string if not found
+*/
+
+
+InCellEditingPlugin.prototype._getRowId = function (rowIndex) {
+  if (rowIndex != null && this._lastActiveGrid) {
+    var dv = this._lastActiveGrid.getDataSource();
+
+    if (dv) return dv.getRowId(rowIndex);
+  }
+
+  return "";
+};
+/** @public
+* @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) {
+    var 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
+    var 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) {
+  var val = this._getColumnOption(colIndex, "editableContent");
+
+  return val == null ? this._editableContent : val;
+};
+/** @private
+* @param {Event|Element} e
+* @param {Object=} opt_host core grid object
+* @fires InCellEditingPlugin#editorOpened
+*/
+
+
+InCellEditingPlugin.prototype._onDoubleClick = function (e, opt_host) {
+  var t = this;
+  var host = opt_host || t.getRelativeGrid(e);
+
+  if (t.isEditing() || !host) {
+    return;
+  }
+
+  var arg = host.getRelativePosition(e);
+  var sectionType = arg["sectionType"];
+
+  if (sectionType === "content" && !t.isColumnEditable(arg["colIndex"])) {
+    return;
+  } else if (sectionType === "title" && !t._editableTitle) {
+    return;
+  } else if (sectionType === "header") {
+    return;
+  } // Initialize internal states
+
+
+  if (e["preventDefault"]) {
+    Dom.preventDefault(e);
+  }
+
+  t.openEditor(arg.colIndex, arg.rowIndex, arg.section, host);
+};
+/** @private
+* @param {Element} e
+* @param {Object} host core grid object
+* @param {Object=} arg
+*/
+
+
+InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
+  var 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;
+  }
+
+  var colIndex = arg["colIndex"];
+  var rowIndex = arg["rowIndex"];
+  var section = arg["section"];
+  var cell = section.getCell(colIndex, rowIndex);
+
+  if (!cell || cell.hasClass("no-editing") || cell.hasClass("folder")) {
+    // TODO: Allow cell with folder (expander arrow) to be editable for row segmenting
+    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._activePos = arg;
+  arg["cell"] = t._activeCell = cell;
+  arg["content"] = t._prevContent = cell.getContent();
+  arg["field"] = t._getField(colIndex); // Initialize UIs
+
+  if (arg["sectionType"] === "title") {
+    t._activeInCellCache = t._createTitleEditor(host);
+  } else {
+    t._activeInCellCache = t._createContentEditor(colIndex, host);
+  }
+
+  var inputElement = arg["inputElement"] = t._activeInCellCache["inputElement"];
+  var editor = arg["editor"] = t._activeInCellCache["editor"];
+  var balloonPopup = t._activeInCellCache["balloonPopup"];
+  var sourceContent = arg ? t._getSourceContent(arg["dataSource"], arg["rowIndex"], arg["field"], arg["content"]) : "";
+
+  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");
+  }
+
+  var editorStyle = editor.style;
+
+  if (this._elfVersion || t._inlineStyling) {
+    editorStyle.backgroundColor = section.getComputedStyle().backgroundColor;
+  }
+
+  var rowH = section.getRowHeight(rowIndex);
+  var width = section.getCellWidth(colIndex, rowIndex);
+
+  if (!host.isPinnedColumn(colIndex)) {
+    var hScrollbar = host.getHScrollbar();
+
+    if (hScrollbar.isActive()) {
+      var paneSize = hScrollbar.getPaneSize();
+
+      if (width > paneSize) {
+        width = paneSize;
+      }
+    }
+  }
+
+  if (!t._usingBalloon || width > 208) {
+    editorStyle.width = width + "px";
+  } else {
+    editorStyle.width = "";
+  }
+
+  editorStyle.height = rowH + "px"; // Attach our popup (balloon element)
+
+  var parentElement = document.body;
+
+  if (t._compositeGrid || t._realTimeGrid) {
+    var activeGrid = t.getActiveGrid();
+
+    if (activeGrid) {
+      parentElement = activeGrid.getElement().parentElement;
+    }
+  }
+
+  balloonPopup.enableUIBlocking(t._uiBlocking);
+  balloonPopup.attachTo(cell.getElement());
+  balloonPopup.addEventListener("hidden", t._onPopupHide);
+  balloonPopup.disableAutoHiding(false);
+  balloonPopup.show(true, parentElement); // 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);
+  } // Dispatch an event for user to setup stuff
+
+
+  t._dispatch("editorOpened", arg); // User may modify the editor
+
+
+  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
+
+  t._lastActiveGrid = host;
+};
+/** Using to open row editor.
+* @public
+* @param {number} rowIndex
+* @param {Object=} grid core grid object
+*/
+
+
+InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
+  var t = this;
+  grid = grid || t._hosts[0]; // if open same row we will do nothing
+
+  if (t._getRowIndex(t._activeRowId) === rowIndex || !grid) {
+    return;
+  } // close all open editor
+
+
+  t.closeRowEditor(false, grid);
+
+  t._commitText(false);
+
+  var firstInput, firstPopup;
+  var section = grid.getSection("content");
+  var dataSource = grid.getDataSource();
+  var lastIndex = (section.getColumnCount() || 0) - 1;
+  var isBottom = rowIndex + 1 >= section.getRowCount();
+  var sectionBGColor = this._elfVersion || t._inlineStyling ? section.getComputedStyle().backgroundColor : null;
+  var rowH = section.getRowHeight(rowIndex); // if normally parent popup will be document.body
+
+  var 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;
+  } // loop for all column
+
+
+  for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+    // ignore column that can't edit
+    if (!t.isColumnEditable(columnIndex)) {
+      continue;
+    }
+
+    var cell = section.getCell(columnIndex, rowIndex);
+
+    if (!cell || cell.hasClass("no-editing") || cell.hasClass("folder")) {
+      continue;
+    } // all verify is done
+    // create editor, popup, inputElement
+
+
+    var inCellCache = t._createContentEditor(columnIndex, grid);
+
+    var content = cell.getContent();
+
+    var field = t._getField(columnIndex);
+
+    var sourceContent = t._getSourceContent(dataSource, rowIndex, field, content);
+
+    var inputElement = inCellCache["inputElement"];
+    var editor = inCellCache["editor"];
+    var balloonPopup = inCellCache["balloonPopup"];
+
+    if (!firstInput) {
+      firstInput = inputElement;
+      firstPopup = balloonPopup;
+      balloonPopup.enableUIBlocking(t._uiBlocking);
+    } else {
+      balloonPopup.enableUIBlocking(false);
+    }
+
+    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");
+    }
+
+    var editorStyle = editor.style;
+
+    if (sectionBGColor) {
+      editorStyle.backgroundColor = sectionBGColor;
+    }
+
+    editorStyle.height = rowH + "px"; // this is different from single edit mode
+    // row edit mode not support balloon mode
+
+    var width = section.getCellWidth(columnIndex, rowIndex);
+    editorStyle.width = width + "px";
+    editor.classList.remove("balloon"); // Attach our popup (editor element)
+
+    balloonPopup.attachTo(cell.getElement());
+    balloonPopup.show(true, parentElement);
+    balloonPopup.disableAutoHiding(true); // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
+  } // if firstInput not undefined that mean at lease one popup is open
+
+
+  if (firstInput) {
+    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);
+    }
+  }
+};
+/** 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) {
+  var t = this;
+  var grid = t._lastActiveGrid; // if no row active then do nothing
+
+  if (!t._activeRowId || !grid) {
+    return;
+  }
+
+  var rowId = t._activeRowId;
+
+  var 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
+  }
+
+  var section = grid.getSection("content");
+  var columnLength = grid.getColumnCount();
+  var fieldValue = {};
+  var inCellCaches = [];
+  var inCellCache; // in this section we just prepare data
+
+  for (var columnIndex = 0; columnIndex < columnLength; columnIndex++) {
+    var columnData = t._getColumnData(columnIndex, grid);
+
+    inCellCache = columnData && columnData["inCellCache"]; // if not have inCellCache then this column not have editor
+
+    if (!inCellCache) {
+      continue;
+    }
+
+    inCellCache.columnIndex = columnIndex;
+    inCellCaches.push(inCellCache);
+
+    if (isCommit) {
+      var field = t._getField(columnIndex);
+
+      inCellCache.field = field;
+      fieldValue[field] = this._getValue(inCellCache["inputElement"]);
+    }
+  }
+
+  var length = inCellCaches.length;
+  var i, e; // dispatch event beforeRowCommit
+
+  if (isCommit) {
+    if (t.hasListener("beforeRowCommit")) {
+      e = {
+        grid: grid,
+        rowIndex: rowIndex,
+        fieldValue: fieldValue,
+        cancel: false,
+        rowId: t._activeRowId
+      };
+
+      t._dispatch("beforeRowCommit", e); // e.cancel = true mean user want to cancel closeRowEditor operation
+
+
+      isCommit = !e.cancel;
+    }
+
+    if (isCommit) {
+      var dataSource = grid.getDataSource();
+
+      for (i = 0; i < length; i++) {
+        inCellCache = inCellCaches[i];
+        var value = fieldValue[inCellCache.field]; // set data to datasource
+
+        if (dataSource) {
+          // only use value from fieldValue
+          // because fieldValue maybe mutate from beforeRowCommit event
+          t._setData(dataSource, rowIndex, inCellCache.field, value);
+        } // set value to ui if content is a build in text
+
+
+        var cell = section.getCell(inCellCache.columnIndex, rowIndex);
+        var content = cell.getContent();
+
+        if (content && content.classList.contains("text")) {
+          cell.setContent(value);
+        }
+      }
+    }
+  }
+
+  if (t.hasListener("rowEditorClosed")) {
+    e = {
+      grid: grid,
+      rowIndex: rowIndex,
+      fieldValue: fieldValue,
+      committed: isCommit
+    };
+
+    t._dispatch("rowEditorClosed", e);
+  } // hide editor by remove popup from dom
+
+
+  for (i = 0; i < length; i++) {
+    var 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) {
+  // just close editor
+  this.closeRowEditor(false);
+
+  this._commitText(false);
+};
+/** handle popup hidden event
+* @private
+* @param {Object} e
+*/
+
+
+InCellEditingPlugin.prototype._onPopupHide = function (e) {
+  // 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} e
+*/
+
+
+InCellEditingPlugin.prototype._onValueChanged = function (e) {
+  if (this._activeRowId) {
+    return;
+  } // do nothing in rowEditMode
+
+
+  this._commitText(true);
+};
+/** @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) {
+    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
+
+
+  var tabKey = e.keyCode === 9;
+
+  if (tabKey || e.keyCode === 13) {
+    var text = this.getText();
+    var cellInfo = this._activePos;
+
+    if (this._initialText !== text) {
+      this._commitText(true);
+
+      e.preventDefault(); // TODO: Check if this is needed
+    } else {
+      this._commitText(false);
+    }
+
+    if (tabKey && this._tabToMove && !e.altKey && !e.ctrlKey) {
+      var host = cellInfo ? cellInfo["grid"] : null;
+
+      if (host && host["getCellInfo"]) {
+        var 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
+*/
+
+
+InCellEditingPlugin.prototype._commitText = function (committed) {
+  var t = this;
+  var arg = t._activePos;
+
+  if (!t.isEditing() || !arg) {
+    return;
+  }
+
+  arg["section"].removeClass("edit-mode");
+  t._editing = false;
+  var enteredValue = arg["text"] = this.getValue();
+
+  if (committed) {
+    if (t.hasListener("beforeCommit")) {
+      t._dispatch("beforeCommit", arg);
+
+      committed = !arg["cancel"];
+      enteredValue = arg["text"];
+    }
+
+    if (committed && t._dataBinding) {
+      var sectionSettings = arg["sectionSettings"];
+      var sectionType = sectionSettings.getType(); // case edit content
+
+      if ("content" === sectionType) {
+        var dv = sectionSettings.getDataSource();
+
+        if (dv) {
+          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);
+          }
+        }
+      } // case edit title
+      else if ("title" === sectionType) {
+        var _grid = this._compositeGrid || this._realTimeGrid || null;
+
+        if (_grid) {
+          _grid.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);
+
+  t._freezeScrolling(arg["grid"], false);
+
+  arg["grid"].focus();
+  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) {
+  var cellElem = cell.getElement();
+  var 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._resetTimer();
+
+  this._timerId = setTimeout(this._onTimer, this._longPressTime);
+};
+/** Use only press time on mobile devices.
+* @private
+* @param {Object} e
+*/
+
+
+InCellEditingPlugin.prototype._onTimer = function (e) {
+  this._timerId = 0;
+};
+/** Use only On-Touch-End event on mobile devices.
+* @private
+* @param {Event} e
+*/
+
+
+InCellEditingPlugin.prototype._onTouchEnd = function (e) {
+  if (!this._resetTimer()) {
+    this._onDoubleClick(e); // Trigger cell editor
+
+  }
+};
+/** Use only to reset timer on mobile devices.
+* @private
+* @return {boolean}
+*/
+
+
+InCellEditingPlugin.prototype._resetTimer = function () {
+  if (this._timerId) {
+    clearTimeout(this._timerId);
+    this._timerId = 0;
+    return true;
+  }
+
+  return false;
+};
+/** Set other elements to using like popup when editing cell.
+* @public
+* @param {Element} elm
+*/
+
+
+InCellEditingPlugin.prototype.setPopupElement = function (elm) {
+  var 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;
+  var inputTag = inputElement.tagName.toLowerCase();
+  var typeMap = InCellEditingPlugin._uiElementTypesMap;
+
+  if (inputTag === typeMap.checkbox) {
+    var checked = content ? !(content === "f" || content === "false") : false;
+
+    if (checked) {
+      inputElement.setAttribute("checked", "true");
+    } else {
+      inputElement.removeAttribute("checked");
+    }
+  } else if (inputTag === typeMap.combobox) {
+    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 {
+    var 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) {
+  var inputTag = inputElement.tagName.toLowerCase();
+  var 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) {
+  var inputTag = inputElement.tagName.toLowerCase();
+  var 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;
+  }
+
+  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;
+};
+/**
+* @public
+* @param {boolean=} disabled
+* @return {boolean} previous disablingScroll status
+*/
+
+
+InCellEditingPlugin.prototype.setDisablingScroll = function (disabled) {
+  var 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;
+  var vs = grid.getVScrollbar();
+  var hs = grid.getHScrollbar();
+  vs && vs.freezeScrolling(frozen);
+  hs && hs.freezeScrolling(frozen);
+};
+
+export default InCellEditingPlugin;
+export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };