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

package/lib/rt-grid/es6/Grid.js

@@ -0,0 +1,4653 @@
+/* eslint-disable */
+import { Dom } from "../../tr-grid-util/es6/Dom.js";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { Engine } from "../../tr-grid-util/es6/formula/Engine.js";
+import { cloneObject, extendObject, arrayToObject, isEmptyObject, deepEqual } from "../../tr-grid-util/es6/Util.js";
+import { DateTime } from "../../tr-grid-util/es6/DateTime.js";
+
+import { RowDefinition, ROW_DEF } from "./RowDefinition.js";
+import { ColumnDefinition, COL_DEF } from "./ColumnDefinition.js";
+import SnapshotFiller from "./SnapshotFiller.js";
+import StyleLoader from "./StyleLoader.js";
+import FieldDefinition from "./FieldDefinition.js";
+import DataConnector from "./DataConnector.js";
+import RowDefSorter from "./RowDefSorter.js";
+
+import { Core } from "../../core/es6/grid/Core.js";
+import { SortableTitlePlugin } from "../../core/es6/grid/plugins/SortableTitlePlugin.js";
+import { DataCache } from "../../core/es6/data/DataCache.js";
+import { DataTable } from "../../core/es6/data/DataTable.js";
+import { DataView } from "../../core/es6/data/DataView.js";
+import { ElementWrapper } from "../../core/es6/grid/components/ElementWrapper.js";
+/* eslint-enable */
+
+/** @typedef {Object} Grid~SynapseConfig
+* @description Configuration object that can be provided directly at the initialization phase
+* @property {string} apiKey Synapse api key
+* @property {string} contextApp Synapse context app name
+* @property {string=} auth Synapse authen token
+* @property {boolean=} debug=false If true, Synapse response will be mock
+*/
+
+/** @typedef {Object} Grid~ADCOptions
+* @description ADC requesting level config from adc team
+* @property {string=} productId=001 required parameter, it specifies the product for which you request data. Contact the adc staff to create one.
+*/
+
+/** @typedef {Object} Grid~GridOptions
+* @description Configuration object that can be provided directly at the initialization phase
+* @property {Array.<ColumnDefinition~Options|string>=} columns Collection of the column definitions
+* @property {ColumnDefinition~Options=} defaultColumnOptions All Columns will inherit from this default object
+* @property {Array.<RowDefinition~Options>=} rows Collection of the row definitions
+* @property {Array.<string>=} fields Shorthand for setting fields
+* @property {Array.<string>=} rics Shorthand for creating row definition
+* @property {Array=} plugins Additional plugins for core grid (from getBlotter()/getCoreGrid())
+* @property {Array=} extensions Alias to `plugins`
+* @property {boolean=} scrollbar=true Enable both vertical and horizontal scrollbar in grid
+* @property {boolean=} linearWheelScrolling=false If enabled, wheel scrolling will move the content linearly regardless of how long the content is (i.e. no skipping).
+* @property {boolean=} stepScroll=false If enabled, a full row will be scrolled at a time instead of actual scroll value.
+* @property {boolean=} autoHideScrollbar=true Fading in/out Scrollbar on hover.
+* @property {string=} pageSize=0 Make grid show specified number of row
+* @property {number=} rowHeight=32 Set default row height for body (content) section
+* @property {number=} headerRowHeight=32 Set default row height for header section
+* @property {boolean=} noColumnDragging=false All columns can be moved by dragging. If this option is true, the feature is disabled
+* @property {boolean=} columnReorder=true Alias with noColumnDragging but in opposite value. This property deprecated in favor of noColumnDragging.
+* @property {boolean=} rowHighlighting=true Highlight a row when hovering mouse over grid
+* @property {(boolean|number)=} autoLayoutUpdate=false Grid will check for layout change periodically.
+* @property {number=} columnFreezing Deprecated in favor of column's leftPinned property. Enable horizontal scrollbar after `columnFreezing` index
+* @property {number=} freezeColumn Deprecated in favor of column's leftPinned property. An alias to columnFreezing
+* @property {number=} pinnedRightColumns=0 Deprecated in favor of column's rightPinned property. Number of columns to be frozen/pinned on the right side.
+* @property {Array=} staticDataRows Shorthand for calling {@link Grid#addStaticDataRows}
+* @property {Array.<string>=} dataFields Shorthand for calling {@link Grid#addDataFields}
+* @property {boolean=} rowVirtualization=true If disabled, all data rows will be rendered. This will greatly impact grid's performance if the data set is huge.
+* @property {boolean=} columnVirtualization=false If enabled, columns that are out of grid's view will NOT be rendered. This could greatly improve grid's performance when there are a lot of columns.
+* @property {(number|null|boolean)=} topFreezingCount=null If number >= 0 will fix number of frozen title section, If false = disabled scrollbar, if null then title section will freeze auto when new section added, this option will not work with scrollbar option.
+* @property {(number|null)=} bottomFreezingCount=null If number >= 0 will fix nuber of frozen footer section, if null then footer section will freeze auto when new section added, this option will not work with scrollbar option.
+* @property {boolean=} borders=false Lines around grid element
+* @property {boolean=} gridlines Horizontal and Vertical lines for ONLY content sections
+* @property {boolean=} verticalLines=false Vertical lines for all sections
+* @property {boolean=} contentVerticalLines=false Vertical lines for all content section
+* @property {boolean=} horizontalLines=true Horizontal lines for all sections
+* @property {*=} RTK=null rtk toolkit instance
+* @property {Grid~ADCOptions=} ADC=null ADC requesting level config object from adc team
+* @property {Grid~SynapseConfig=} synapse=null synapse config object
+* @property {number=} contentRightPadding=0 Padding that is added next to the right most column. The padding is still a part of scrollable content.
+* @property {number=} contentBottomPadding=0 Padding that is added below the last section. The padding is still a part of scrollable content.
+* @property {number=} dataConflationRate=0 set delay for data to avoid to much sorting operation when data changed
+* @property {boolean=} autoDateConversion=false If enabled, date-time field with numeric value will be automatically converted to native date object.
+* @property {boolean=} textSelect=false If enabled, user can select content text by using mouse drag.
+* @property {string=} lang laguage for config localization date time, if null the default language is "en"
+* @property {Element=} scrollbarParent=null Element to be attached by grid's scrollbars, allowing them to move outside and avoid overlapping with the content.
+* @property {boolean=} formulaEngine=false If enabled, field with leading equal sign will be treated as a formula and rows will be filled with the calculated values.
+* @property {number=} adcPollingInterval=0 Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.
+* @property {boolean=} fieldCaching=false If enabled, field definition will be caching internal mechanism
+* @property {boolean=} timeSeriesExpansion=true If disabled, the time series field will be treated as a normal field and not expanded.
+* @property {string=} childDataField=CHILD_VALUES The given field will be used to store children's static data, such as row color assignment.
+* @property {boolean=} topSection=true If disabled, title section will not be rendered
+* @property {SortableTitlePlugin~Options=} sorting Options for sorting
+* @property {Function=} dataComposed Handler for dataComposed event
+* @property {Function=} beforeContentBinding Handler for beforeContentBinding event
+* @property {Function=} firstRendered Handler for firstRendered event
+* @property {Function=} afterContentBinding Handler for afterContentBinding event
+*/
+
+/** @typedef {number|string|RowDefinition} Grid~RowReference
+* @description A row in Grid can be referred by the following values: <br>
+* <b>number</b> : Row index of a visible rows, excluding invisible (hidden) rows<br>
+* <b>RowDefinition</b> : Row definition object<br>
+* <b>string</b> : Unique row Id existing in current data table, including invisible rows<br>
+*/
+
+/** @typedef {number|string|ColumnDefinition} Grid~ColumnReference
+* @description A column in Grid can be referred by the following values:<br>
+* <b>number</b> : Column index including all invisible (hidden) columns<br>
+* <b>string</b> : Field name or column id of the column<br>
+* <b>ColumnDefinition</b> : Column definition object<br>
+*/
+
+/** @event Grid#fieldAdded
+* @description Fired after the field has been added to the data table.
+* @property {string} type "fieldAdded"
+* @property {Array.<string>} addedFields An array of newly added fields
+* @property {Array.<string>} fields All fields
+* @property {Array.<string>} rics All rics
+* @property {Array.<RowDefinition>} rowDefs All row definitions
+*/
+/** @event Grid#fieldRemoved
+* @description Fired after the field has been removed from the data table.
+* @property {string} type "fieldRemoved"
+* @property {Array.<string>} removedFields An array of recently removed fields
+* @property {Array.<string>} fields All fields
+* @property {Array.<string>} rics All rics
+* @property {Array.<RowDefinition>} rowDefs All row definitions
+*/
+/** @event Grid#ricAdded
+* @description Fired after the ric has been added to the data table.
+* @property {string} type "ricAdded"
+* @property {Array.<string>} addedRics An array of newly added rics
+* @property {Array.<string>} fields All fields
+* @property {Array.<string>} rics All rics
+* @property {Array.<RowDefinition>} rowDefs All row definitions
+*/
+/** @event Grid#ricRemoved
+* @description Fired after the ric has been removed from the data table.
+* @property {string} type "ricRemoved"
+* @property {Array.<string>} removedRics An array of recently removed rics
+* @property {Array.<string>} fields All fields
+* @property {Array.<string>} rics All rics
+* @property {Array.<RowDefinition>} rowDefs All row definitions
+*/
+
+/** @event Grid#adcDataReceived
+* @description Fired after ADC data or response received from the server
+* @property {Array.<Array>} data Data part of the server response
+*/
+/** @event Grid#pageIndexChanged
+* @description Fired after page index in the data view is changed during the active pagination mode
+*/
+/** @event Grid#pageCountChanged
+* @description Fired after page count in the data view is changed during the active pagination mode
+*/
+/** @event Grid#dataComposed
+* @description Trigger before dataChanged. Perform any data update during the event will NOT cause more dataChanged events
+* @property {Grid} grid
+* @property {RowDefinition} rowDef
+*/
+
+/** @event Grid#beforeContentBinding
+* @property {Object} e Event of beforeContentBinding, we can use e.actualUpdate to check the actual data update, otherwise It will be empty when it is rendered by row virtualization or only the UI changes.
+* @description Trigger before content binding.
+*/
+
+/** @event Grid#firstRendered
+* @property {Object} e Event of firstRendered
+* @description This event is triggered when the content is rendered for the first time.
+*/
+
+/** @event Grid#afterContentBinding
+* @property {Object} e Event of afterContentBinding
+* @description Trigger after content binding.
+*/
+
+/** @event Grid#beforeRowRemoved
+* @description Fired only when a row will be removed through Grid's API and before occurring of the actual removal
+*/
+
+/** @event Grid#beforeUnlinked
+* @description Trigger before unlinking a chain row.
+* @type {Object}
+* @property {RowDefinition} chain An row definition object of a chain row.
+* @property {boolean} collapsed Collapsing state of a chain row.
+* @property {Object} ridMap A map of constituent rics and row ids used to customize row ids.
+*/
+
+/** @private
+* @param {RowDefinition} rowDef
+* @return {Object}
+*/
+let toRowData = function(rowDef) {
+	return rowDef ? rowDef.getRowData() : null;
+};
+
+/** @private
+* @param {RowDefinition} rowDef
+* @return {boolean}
+*/
+let excludeAutoGenerated = function (rowDef) {
+	return !rowDef.isAutoGenerated();
+};
+
+/** @private
+* @param {Object} colConfig column config
+* @return {boolean}
+*/
+let _byNonAutoGeneratedColumn = function (colConfig) {
+	return !colConfig.autoGenerated;
+};
+/** @private
+* @param {string} rowDefA
+* @param {string} rowDefB
+* @param {string} sortOrder
+* @param {string} fieldName
+* @return {number} The outcome of the value comparison
+*/
+let compareNumber = function(rowDefA, rowDefB, sortOrder, fieldName) { // edit name
+	return (rowDefA.getData(fieldName) - rowDefB.getData(fieldName)) * sortOrder; // for numeric comparison
+};
+
+/**
+ * @private
+* @param {string} rowDefA
+* @param {string} rowDefB
+* @param {string} sortOrder
+* @return {number} The outcome of the value comparison
+*/
+let _sortChildrenOfChain = function (rowDefA, rowDefB, sortOrder) {
+	let parentA = rowDefA.getParent();
+
+	if (!parentA) {
+		return 0;
+	}
+
+	let parentB = rowDefB.getParent();
+
+	if (!parentB) {
+		return 0;
+	}
+
+	if (parentA !== parentB) {
+		return 0;
+	}
+
+	let a = rowDefA.getData('CHILD_ORDER');
+
+	if (a == null) {
+		return 0;
+	}
+
+	let b = rowDefB.getData('CHILD_ORDER');
+
+	if (b == null) {
+		return 0;
+	}
+
+	return ( a - b ) * sortOrder;
+};
+
+/** @private
+* @param {ColumnDefinition} colDef
+* @return {string}
+*/
+let _getName = function(colDef) {
+	if(colDef) {
+		return colDef.getName();
+	}
+	return "";
+};
+/** @private
+* @param {ColumnDefinition} colDef
+* @param {string} str
+* @return {boolean}
+*/
+let _hasFieldOrId = function(colDef, str) {
+	return (colDef.getField() === str) || (colDef.getId() === str);
+};
+
+/** Compare the difference in the 'id' property.
+* @private
+* @param {Object} obj1
+* @param {Object} obj2
+* @returns {boolean} If the id property of two objects is equal, the return will be true, otherwise it will be false.
+*/
+let _hasMatchingId = function(obj1, obj2) {
+	if(!obj1 || !obj2 || !obj1.id || !obj2.id) { // Handle nullable, if the object or id have null, it's means difference value
+		return false;
+	}
+	return obj1.id === obj2.id;
+};
+
+/** @private
+* @param {Object} e
+*/
+let _preventDefault = function(e) {
+	if(e) {
+		e.preventDefault();
+	}
+};
+/** @private
+* @param {number=} id
+* @returns {number} Always return 0
+*/
+let _clearTimeout = function(id) {
+	if(id) {
+		clearTimeout(id);
+	}
+	return 0;
+};
+
+/** @constructor
+* @extends {EventDispatcher}
+* @param {(Element|null)=} placeholder
+* @param {Grid~GridOptions=} config
+*/
+let Grid = function(placeholder, config) {
+	let t = this; // This is to primarily reduce file size
+
+	t._onDataChanged = t._onDataChanged.bind(t);
+	t._onQuote2PostUpdate = t._onQuote2PostUpdate.bind(t);
+	t._onQ2DataChanged = t._onQ2DataChanged.bind(t);
+	t._onDataComposed = t._onDataComposed.bind(t);
+	t._onSubSegmentChanged = t._onSubSegmentChanged.bind(t);
+	t._recalculateFormulas = t._recalculateFormulas.bind(t);
+	t.updateColumnTitle = t.updateColumnTitle.bind(t);
+	t._populateTimeSeriesChildren = t._populateTimeSeriesChildren.bind(t);
+
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._asyncClearDataUpdates = t._asyncClearDataUpdates.bind(t);
+	t._clearDataUpdates = t._clearDataUpdates.bind(t);
+	t._onPreDataSorting = t._onPreDataSorting.bind(t);
+	t._mainSorter = t._mainSorter.bind(t);
+	t._updateRowData = t._updateRowData.bind(t);
+	t._onFormulaDataChanged = t._onFormulaDataChanged.bind(t);
+	t._onFormulaDataRequired = t._onFormulaDataRequired.bind(t);
+	t._registerConstituents = t._registerConstituents.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onRowExpansionBinding = t._onRowExpansionBinding.bind(t);
+	t._onColumnHeaderBinding = t._onColumnHeaderBinding.bind(t);
+	t._getRowId = t._getRowId.bind(t);
+	t._onFieldLoadedError = t._onFieldLoadedError.bind(t);
+
+	t._snapshotFillerDataChanged = t._snapshotFillerDataChanged.bind(t);
+	t._onPollingInterval = t._onPollingInterval.bind(t);
+
+	t._onTabNavigation = t._onTabNavigation.bind(t);
+	t._requestScroll = t._requestScroll.bind(t);
+	t._onVScroll = t._onVScroll.bind(t);
+	t._selfScrollToRow = t._selfScrollToRow.bind(t);
+
+	t._dcConflator = new Conflator(50, t._onDataChanged);
+	t._formulaConflator = new Conflator(300, t._onFormulaDataChanged);
+	t._chainConflator = new Conflator(100, t._registerConstituents);
+	t._columnTitleConflator = new Conflator(0, t.updateColumnTitle);
+	t._timeSeriesChildConflator = new Conflator(0, t._populateTimeSeriesChildren);
+
+
+	t._defaultColumnOptions = {};
+
+	t._topNode = placeholder || Dom.div();
+	t._topNode.classList.add("rt-grid");
+	t._grid = new Core();
+	t._grid._wrapper = this; // For back referencing
+
+	t._sorter = new RowDefSorter();
+	t._sorter.setContext("grid", this);
+	t._sorter.setContext("core", t._grid); // TODO: Handle multiple core grids
+
+	t._dateTimeUtil = DateTime;
+
+	t._grid.listen("columnAdded", t._onColumnAdded); // Columns could be added by some plugins
+
+	if(config) {
+		if(config["dataView"]) {
+			t._sharedDataSource = true;
+			t._dv = config["dataView"];
+			t._dt = t._dv.getDataTable();
+			t._mainGrid = config["grid"];
+
+			let core = t._mainGrid.getCoreGrid();
+			t._stp = core.getPlugin("SortableTitlePlugin");
+		}
+		if(config["SortableTitle"]) { // Exception for built-in plugin
+			t._stp = config["SortableTitle"];
+		}
+		if(config["topSection"] === false) {
+			t._topSection = false;
+		}
+	}
+	if(!t._sharedDataSource) {
+		t._dc = new DataCache();
+		t._dc.listen("dataChanged", t._onDataChanged);
+		t._dc.listen("dataComposed", t._onDataComposed);
+
+		t._dt = new DataTable();
+		t._dt.setSortingLogic(/** @type{Function} */(t._mainSorter));
+		t._dt.setClassificationSource(t._dc);
+		t._dt.listen("subSegmentChanged", t._onSubSegmentChanged);
+		t._dv = new DataView(t._dt);
+		t._dv.listen("pageIndexChanged", t._dispatch.bind(t, "pageIndexChanged"));
+		t._dv.listen("pageCountChanged", t._dispatch.bind(t, "pageCountChanged")); // TODO: When implementing filtered row, it may need to implement the conflator
+	}
+	t._grid.setDataSource(t._dv); // Avoid triggering sorting
+
+	if(t._stp) {
+		t._sharedSorter = true;
+		t._stp.listen("preDataSorting", t._onPreDataSorting);
+		t._grid.loadPlugin(t._stp); // The plugin instance is shared and don't need to be reconfigured.
+	} else { // Create built-in plugin
+		t._stp = new SortableTitlePlugin({
+			"userManagedLogic": true,
+			"sortableColumns": true,
+			"disableDoubleClickToSort": true,
+			"ROW_DEF": true // Enable Row Definition Mode
+		});
+		t._stp.listen("preDataSorting", t._onPreDataSorting);
+
+		// TODO: Built-in plugins don't have normal workflow unlike other extensions. Make them have the same workflow like the others
+		// defaultColumnOptions property does not work with them.
+		// beforeInit is not called.
+		t._grid.loadPlugin(t._stp, config);
+	}
+
+	t._grid.listen("beforeContentBinding", t._dispatch.bind(t, "beforeContentBinding"));
+	t._grid.listen("preSectionRender", t._onColumnHeaderBinding);
+	t._grid.listen("postSectionDataBinding", t._onPostSectionDataBinding);
+	t._grid.listen("firstRendered", t._dispatch.bind(t, "firstRendered"));
+	t._grid.listen("afterContentBinding", t._dispatch.bind(t, "afterContentBinding"));
+	t._grid.listen("tabNavigation", t._onTabNavigation);
+
+	t._grid.getVScrollbar().listen("scroll", t._onVScroll);
+
+	t._grid.enableRowHighlighting(true);
+
+	t._addGridSections();
+	t._grid.setParent(t._topNode);
+
+	t._snapshot = new SnapshotFiller();
+	t._snapshot.addEventListener("adcDataReceived", t._dispatch.bind(t, "adcDataReceived"));
+	t._snapshot.addEventListener("dataChanged", this._snapshotFillerDataChanged);
+
+	t._connector = new DataConnector();
+	t._connector.addEventListener("ricAdded", t._onRicAdded.bind(t));
+	t._connector.addEventListener("ricRemoved", t._onRicRemoved.bind(t));
+	t._connector.addEventListener("fieldAdded", t._onFieldAdded.bind(t));
+	t._connector.addEventListener("fieldRemoved", t._onFieldRemoved.bind(t));
+
+	t.initialize(config);
+
+	StyleLoader.applyStyle(t._grid);
+};
+Ext.inherits(Grid, EventDispatcher);
+
+/** @private
+ * @type {Element}
+ */
+Grid.prototype._topNode = null;
+/** @private
+ * @type {Grid}
+ */
+Grid.prototype._mainGrid = null;
+/** @private
+ * @type {Core}
+ */
+Grid.prototype._grid = null;
+/** Store all actual data including streaming data, ADC data, snapshot data, user input data.
+ * @type {DataCache}
+ * @private
+ */
+Grid.prototype._dc = null;
+/** Used for hiding and filtering out rows. Always have greater or equal number of rows than that in grid
+ * @type {DataTable}
+ * @private
+ */
+Grid.prototype._dt = null;
+/** Used for sorting. Number of rows is always the same as that in grid
+ * @type {DataView}
+ * @private
+ */
+Grid.prototype._dv = null;
+/** @type {boolean}
+ * @private
+ */
+Grid.prototype._sharedDataSource = false;
+/** @type {boolean}
+ * @private
+ */
+Grid.prototype._sharedSorter = false;
+
+/** JET/RTK's Quotes2 subscription object
+ * @type {Object}
+ * @private
+ */
+Grid.prototype._subs = null;
+
+/** @type {SortableTitlePlugin}
+ * @private
+ */
+Grid.prototype._stp = null;
+/** @type {Function}
+ * @private
+ */
+Grid.prototype._columnSorter = null;
+
+/** @private
+* @type {Conflator}
+*/
+Grid.prototype._dcConflator = null;
+/** @private
+* @type {SnapshotFiller}
+*/
+Grid.prototype._snapshot = null;
+/** @private
+* @type {DataConnector}
+*/
+Grid.prototype._connector = null;
+/** @private
+* @type {RowDefSorter}
+*/
+Grid.prototype._sorter = null;
+
+/** @private
+* @type {Engine}
+*/
+Grid.prototype._fnEngine = null;
+/** @private
+* @type {Conflator}
+*/
+Grid.prototype._formulaConflator = null;
+
+/** @private
+* @type {Conflator}
+*/
+Grid.prototype._chainConflator = null;
+/** @private
+* @type {Object}
+*/
+Grid.prototype._constituentMap = null;
+/** @private
+* @type {number}
+*/
+Grid.prototype._clientWidth = NaN;
+/** @private
+* @type {number}
+*/
+Grid.prototype._autoLayoutTimer = 0;
+/** @private
+ * @type {ColumnDefinition~Options}
+ */
+Grid.prototype._defaultColumnOptions = null;
+/** @private
+* @type {*}
+*/
+Grid.prototype._RTK = null;
+/** @private
+* @type {Grid~ADCOptions}
+*/
+Grid.prototype._ADCOptions = null;
+/** use for synapse service
+* @private
+* @type {string}
+*/
+Grid.prototype._synapse = null;
+/** @private
+* @type {boolean}
+*/
+Grid.prototype._autoDateConversion = false;
+/** @private
+* @type {boolean}
+*/
+Grid.prototype._textSelect = false;
+/** @type {string}
+* @private
+*/
+Grid.prototype._lang = null;
+/** @type {Object}
+* @private
+*/
+Grid.prototype._dateTimeUtil = null;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._initializing = false;
+/** @type {number}
+* @private
+*/
+Grid.prototype._pollingInterval = 0;
+/** @type {number}
+* @private
+*/
+Grid.prototype._pollingTimerId = 0;
+/** @type {number}
+* @private
+*/
+Grid.prototype._lastPollingRequest = 0;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._pollingEnabled = true;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._fieldCaching = false;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._timeSeriesExpansion = true;
+
+/** @type {string}
+* @private
+*/
+Grid.prototype._childDataField = "";
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._topSection = true;
+/** @type {Object}
+* @private
+*/
+Grid.prototype._focusingArgs = null;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._hasNewUpdates = false;
+
+/** @public
+*/
+Grid.prototype.dispose = function() {
+	this.removeAllEventListeners();
+	if(this._autoLayoutTimer) {
+		clearInterval(this._autoLayoutTimer);
+		this._autoLayoutTimer = 0;
+	}
+	this._pollingTimerId = _clearTimeout(this._pollingTimerId);
+
+	this.removeAllColumns(); // Some conflators are reset
+	this.removeAllRows(); // Some conflators are reset
+	this._sorter.dispose();
+	this._grid.dispose();
+	this._snapshot.dispose();
+	this._connector.dispose();
+	this._connector = null;
+
+	if(!this._sharedDataSource) { // Make sure that this is the final grid, and its data is disposed
+		if(this._subs) {
+			this._subs.removeEventListener("postUpdate", this._onQuote2PostUpdate);
+			this._subs.removeEventListener("dataChanged", this._onQ2DataChanged);
+			this._subs["dispose"]();
+		}
+		if(this._dc) {
+			this._dc.dispose();
+		}
+		if(this._dt) {
+			this._dt.dispose();
+		}
+		if(this._dv) {
+			this._dv.dispose();
+		}
+	}
+	this._mainGrid = this._dc = this._dt = this._dv = this._subs = null;
+
+	if(this._focusingArgs) {
+		_clearTimeout(this._focusingArgs.id);
+		_clearTimeout(this._focusingArgs.timeoutId);
+		this._focusingArgs = null;
+	}
+};
+/** @public
+* @return {Element}
+*/
+Grid.prototype.getElement = function() {
+	return this._topNode;
+};
+/** Alias to {@link EventDispatcher#removeAllEventListeners}
+* @public
+* @function
+*/
+Grid.prototype.removeEventListeners = Grid.prototype.removeAllEventListeners;
+/** Alias to {@link EventDispatcher#addEventListener}
+* @public
+* @function
+* @param {string} type Event name
+* @param {Function} handler Event handler
+*/
+Grid.prototype.listen = Grid.prototype.addEventListener;
+/** @public
+*/
+Grid.prototype.initSubscription = function() {
+	if(this._subs) { // Subscription is already initialized
+		return;
+	}
+	if(this._sharedDataSource) {
+		this._subs = this._mainGrid._subs;
+		return;
+	}
+
+	let jet, q, s;
+	jet = window["JET"]; // Assume that JET is already exist.
+	if (this._RTK) {
+		q = this._RTK.Quotes;
+	} else if(jet) {
+		q = jet["Quotes2"];
+	}
+	if(q) {
+		s = q["create"]();
+		if(this._RTK && this._RTK.prefetchWorkaround) { // The workaround for RTK Quotes has a bug concerning the removal of the last row; it isn't removed.
+			s.addRic("DUMMY.WORKAROUND", "DUMMY.WORKAROUND");
+		}
+	}
+	if(!s) {
+		return;
+	}
+	if(s["filter"]) {
+		s["filter"](-2, -1); // Enable skip header for chains
+	}
+
+	this._subs = s;
+	this._subs["start"]();
+	this._subs.addEventListener("postUpdate", this._onQuote2PostUpdate);
+	this._subs.addEventListener("dataChanged", this._onQ2DataChanged);
+
+	// TODO: Subscriptions should be registered per row.
+	// However, chain subscription cannot be integrated with DataConnector in this current implementation.
+	let rowDefs = this._getAllRowDefinitions();
+	let len = rowDefs.length;
+	for(let i = 0; i < len; ++i) {
+		let rowDef = rowDefs[i];
+		if(rowDef) {
+			rowDef.subscribeForUpdates(s);
+		}
+	}
+};
+
+/** @public
+*/
+Grid.prototype.updateLayout = function() {
+	this._grid.updateLayout();
+	this._stp.updateSortSymbols(); // HACK: There is a chance that grid may not yet be in the document
+};
+/** Force rerender of grid rows. TODO: Check this could be deprecated in favor of Core's requestRowRefresh method
+* @private
+* @param {number=} rowIndex
+*/
+Grid.prototype._updateRowData = function(rowIndex) {
+	if(rowIndex >= 0) {
+		let rowId = this._dv.getRowId(rowIndex);
+		if(rowId) {
+			this._dt.setRowData(rowId, {});
+		}
+	} else {
+		this._dt.dispatchGlobalChange(); // Trigger sorting too
+	}
+};
+/** @public
+* @function
+* @param {number=} opt_rowIndex
+*/
+Grid.prototype.updateRowData = Grid.prototype._updateRowData;
+
+/** @private
+ */
+Grid.prototype._addGridSections = function () {
+	let title = this._grid.addSection("title");
+	if(this._topSection == false){
+		title.setRowCount(0);
+	} else {
+		title.setRowCount(1);
+	}
+	this._grid.addSection("content");
+
+	let titleSettings = this._grid.getSectionSettings("title");
+	titleSettings.disableDataBinding();
+
+	let contentSettings = this._grid.getSectionSettings("content");
+	contentSettings.setAutoSyncRowCount(true);
+	contentSettings.setParent(titleSettings);
+};
+/** @public
+* @param {string=} sectionName
+* @return {*} Return Section instance
+ */
+Grid.prototype.addHeaderSection = function (sectionName) {
+	let titleSects = this._grid.getAllSections("title");
+
+	let headerSect = this._grid.addSectionAt(titleSects.length, "title", sectionName);
+	if(headerSect) {
+		headerSect.setRowCount(1);
+
+		let headerSettings = this._grid.getSectionSettings(headerSect);
+		headerSettings.disableDataBinding();
+	}
+
+	return headerSect;
+};
+/** @public
+* @param {string=} sectionName
+* @return {*} Return Section instance
+*/
+Grid.prototype.addFooterSection = function (sectionName) {
+	let footerSect = this._grid.addSection("footer", sectionName);
+	if(footerSect) {
+		footerSect.setRowCount(1);
+
+		let footerSettings = this._grid.getSectionSettings(footerSect);
+		footerSettings.disableDataBinding();
+	}
+
+	return footerSect;
+};
+
+/** @public
+* @param {Element} elem Parent element
+*/
+Grid.prototype.setParent = function (elem) {
+	Dom.appendChild(elem, this._topNode);
+	this.updateLayout();
+};
+/** @public
+* @param {Element} elem Sibling element
+*/
+Grid.prototype.insertBefore = function (elem) {
+	if(elem) {
+		let pn = elem.parentNode;
+		if(pn) {
+			pn.insertBefore(this._topNode, elem);
+			this.updateLayout();
+		}
+	}
+};
+/** The returned object contains <br>
+* `boolean` hit : Indicates whether the given position is on the grid <br>
+* `number` x : Horizontal coordinate that is relative to the top-left of the grid (Zero means left-most) <br>
+* `number` y : Vertical coordinate that is relative to the top-left of the grid (Zero means top-most) <br>
+* `number` colIndex <br>
+* `number` sectionIndex <br>
+* `number` rowIndex <br>
+* and other related property to the given position.
+* @public
+* @param {!ElementWrapper|Element|Event|MouseEvent} obj Element, Browser's Event object, Browser's Mouse Event object are all valid
+* @return {!Object}
+*/
+Grid.prototype.getRelativePosition = function (obj) {
+	return this._grid.getRelativePosition(obj);
+};
+/** The returned core grid
+* @public
+* @return {Core}
+*/
+Grid.prototype.getCoreGrid = function () {
+	return this._grid;
+};
+
+/** @public
+* @param {Grid~GridOptions=} gridOption
+*/
+Grid.prototype.initialize = function(gridOption) {
+	if (!gridOption) {
+		this.initSubscription();
+		return;
+	}
+	// TODO: clear all data before re-initialization
+	let t = this; // For minimizing file size
+	t._initializing = true;
+	let grid = t._grid; // core grid
+	grid.resetInternalState();
+	gridOption = grid.normalizeConfig(gridOption);
+
+	let exts = gridOption["plugins"] || gridOption["extensions"];
+
+	let cols = /** @type{Array} */(gridOption["fields"] || gridOption["columns"]);
+	if (gridOption["defaultColumnOptions"]) {
+		t._defaultColumnOptions = gridOption["defaultColumnOptions"];
+		t._defaultColumnSetup(t._defaultColumnOptions, cols);
+	}
+
+	// Tell all plugins that the initialization phase has started
+	t._processExtension(exts, "beforeInit", [grid.getElement(), gridOption]);
+
+	// option flag text-select
+	// allow user to select text for copy or so something
+	if (gridOption['textSelect']) {
+		t._textSelect = true;
+		grid.addClass('tr-text-select');
+	}
+
+	if (gridOption["RTK"]) {
+		t._RTK = gridOption["RTK"];
+		t._snapshot.setRTK(t._RTK);
+	}
+
+	if (gridOption["ADC"]) {
+		t._ADCOptions = gridOption["ADC"];
+		t._snapshot.setADCOptions(t._ADCOptions);
+	}
+
+	if (gridOption["synapse"]) {
+		t._synapse = gridOption["synapse"];
+		FieldDefinition.setSynapseConfig(t._synapse);
+	}
+
+	if (gridOption["fieldCaching"]) {
+		t._fieldCaching = gridOption["fieldCaching"];
+	}
+
+	if(gridOption["timeSeriesExpansion"] != null) {
+		t._timeSeriesExpansion = gridOption["timeSeriesExpansion"];
+		FieldDefinition.disableTimeSeriesExpansion(!t._timeSeriesExpansion);
+	}
+
+	if (gridOption["icons"] && gridOption["icons"]["rowGrouping"] && gridOption["icons"]["rowGrouping"]["expander"]) {
+		StyleLoader.chainIcon = gridOption["icons"]["rowGrouping"]["expander"];
+	}
+
+	if(gridOption["formulaEngine"]) {
+		t._fnEngine = new Engine();
+		t._fnEngine.addEventListener("dataChanged", t._onFormulaDataChanged);
+		t._fnEngine.addEventListener("dataRequired", t._onFormulaDataRequired);
+	}
+
+	let borders = gridOption["borders"];
+	if (borders != null) {
+		grid.toggleBorders(borders);
+	}
+	let gridlines = gridOption["gridlines"];
+	if (gridlines != null) {
+		grid.toggleGridlines(gridlines);
+	}
+	let vLines = gridOption["verticalLines"];
+	if (vLines != null) {
+		grid.toggleVerticalLines(vLines);
+	}
+	let cvLines = gridOption["contentVerticalLines"];
+	if (cvLines != null) {
+		grid.toggleContentVerticalLines(cvLines);
+	}
+	let hLines = gridOption["horizontalLines"];
+	if (hLines != null) {
+		grid.toggleHorizontalLines(hLines);
+	}
+
+	if(gridOption["pageSize"]) {
+		t._dv.setPageSize(+gridOption["pageSize"]);
+	}
+
+	let rowHeight = +gridOption["rowHeight"];
+	if(rowHeight) { // Non empty or zero
+		grid.setDefaultRowHeight(rowHeight);
+	}
+	let hRowHeight = +gridOption["headerRowHeight"];
+	if(hRowHeight) { // Non empty or zero
+		grid.getSection("title").setDefaultRowHeight(hRowHeight);
+	}
+
+	let val = gridOption["autoLayoutUpdate"];
+	if(!t._autoLayoutTimer && val) {
+		if(val !== "0" && val !== "false") { // HACK: Temporarily support incorrect data type
+			t._autoLayoutTimer = setInterval(t._onAutoLayoutUpdate.bind(t), 2000);
+		}
+	}
+
+	let bool = gridOption["rowHighlighting"];
+	if(bool != null) {
+		grid.enableRowHighlighting(!!bool);
+	}
+
+	let rowExpansionBinding = gridOption["rowExpansionBinding"];
+	if(typeof rowExpansionBinding === "function") {
+		grid.listen("rowExpansionBinding", t._onRowExpansionBinding); // TODO: Support multi-table feature
+		t.listen("rowExpansionBinding", rowExpansionBinding);
+	}
+
+	this.addListener(gridOption, "dataComposed");
+	this.addListener(gridOption, "beforeContentBinding");
+	this.addListener(gridOption, "firstRendered");
+	this.addListener(gridOption, "afterContentBinding");
+	this.addListener(gridOption, "tabNavigation");
+
+	if(gridOption["autoDateConversion"]) {
+		t._autoDateConversion = true;
+	}
+
+	if(gridOption["stepScroll"]) {
+		grid.setRowScrollingStep(1);
+	}
+	if(gridOption["linearWheelScrolling"]) {
+		grid.getVScrollbar().setMouseWheelSpeed("linear");
+	}
+	if(gridOption["autoHideScrollbar"] != null) {
+		grid.autoHideScrollbars(gridOption["autoHideScrollbar"] ? true : false);
+	}
+	if(gridOption["scrollbarParent"] != null) {
+		t._setScrollbarParent(gridOption["scrollbarParent"]);
+	}
+	let pollingInterval = gridOption["adcPollingInterval"];
+	if(pollingInterval != null) {
+		t._pollingInterval = pollingInterval ? +pollingInterval : 0;
+	}
+
+	// Column operations
+	t.setColumns(cols);
+
+	let rowVir = true;
+	if (gridOption["rowVirtualRendering"] != null) {
+		rowVir = gridOption["rowVirtualRendering"];
+	}
+	if (gridOption["rowVirtualization"] != null) {
+		rowVir = gridOption["rowVirtualization"];
+	}
+	grid.enableRowVirtualization(!!rowVir);
+
+	let colVir = false;
+	if (gridOption["columnVirtualRendering"] != null) {
+		colVir = gridOption["columnVirtualRendering"];
+	}
+	if (gridOption["columnVirtualization"] != null) {
+		colVir = gridOption["columnVirtualization"];
+	}
+	grid.enableColumnVirtualization(!!colVir);
+
+	let scrollbar = gridOption["scrollbar"] != null ? gridOption["scrollbar"] : true;
+	if (scrollbar) {
+		t._topNode.style.overflow = "hidden"; // TODO: Move this to CSS Class
+	} else {
+		grid.freezeSection(null); // Disable vertical scrollbar
+		t._topNode.style.overflow = "";
+	}
+
+	let topFreezingCount = gridOption["topFreezingCount"];
+	if (typeof topFreezingCount === "number") {
+		topFreezingCount = (topFreezingCount > 0) ? topFreezingCount : 0;
+		let sectionIndex = topFreezingCount - 1;
+		grid.freezeSection(sectionIndex);
+	} else if (topFreezingCount === false) {
+		grid.freezeSection(null);
+	}
+
+	let bottomFreezingCount = gridOption["bottomFreezingCount"];
+	if (typeof bottomFreezingCount === "number") {
+		bottomFreezingCount = (bottomFreezingCount > 0) ? bottomFreezingCount : 0;
+		grid.freezeFooter(bottomFreezingCount);
+	}
+
+	t.addDataFields(gridOption["dataFields"]);
+
+	// Plugins
+	gridOption[ROW_DEF] = true; // Enable ROW_DEF mode
+	if (Array.isArray(exts)) {
+		for (let i = 0; i < exts.length; ++i) {
+			let ext = exts[i];
+			let extInstance = null;
+			if (ext) {
+				let extName = ext["name"];
+				if(extName) {
+					extInstance = grid.loadPlugin(extName, ext); // pass plugin object as an argument for initialization
+				} else {
+					extInstance = grid.loadPlugin(ext, gridOption);
+				}
+			}
+			if (extInstance && extInstance["setGridWrapper"]) {
+				let hasApi = (typeof extInstance["getGridApi"] === "function") ? extInstance["getGridApi"]() : false;
+				if(!hasApi) {
+					extInstance["setGridWrapper"]("realTimeGrid", t);
+				}
+			}
+		}
+		t._initializing = false;
+	}
+
+	let lang = gridOption["lang"];
+	if(lang != null) {
+		t._lang = lang;
+		t._dateTimeUtil.setLocale(lang);
+	}
+
+	// Row operations
+	if(gridOption["childDataField"] != null) {
+		this._childDataField = RowDefinition._childDataField = gridOption["childDataField"];
+	}
+	let rows = gridOption["rows"];
+	if(!rows) {
+		rows = gridOption["rics"] || null; // Make "rics" an alias to "rows"
+	}
+	let bodies = /** @type{Array} */(gridOption["bodies"]);
+	if(!bodies) {
+		bodies = [];
+		if(gridOption["body"]) {
+			bodies.push(gridOption["body"]);
+		}
+		if(rows) {
+			for(let m = 0; m < rows.length; m++) {
+				if(typeof rows[m] === "string") {
+					rows[m] = { "ric": rows[m] };
+				}
+			}
+			bodies.push({ "rows": rows });
+		}
+	}
+
+	// Merge rows with static data rows
+	let staticRows = gridOption["staticDataRows"] || gridOption["dataModel"];
+	if(rows && staticRows) {
+		let ary = staticRows["data"] ? staticRows["data"] : staticRows;
+		let fields = staticRows["fields"] || t.getColumnFields();
+		let values, data;
+		let len = rows.length;
+		for(let n = 0; n < len; n++) {
+			if(rows[n]["values"]) { // merge row's values, values can be object or array
+				values = arrayToObject(rows[n]["values"], fields);
+				data = arrayToObject(ary[n], fields);
+				rows[n]["values"] = extendObject(values, data);
+			} else {
+				rows[n]["values"] = ary[n];
+			}
+		}
+		ary = ary.slice(len, ary.length);
+		if(staticRows["data"]) {
+			staticRows["data"] = ary;
+		} else {
+			staticRows = ary;
+		}
+	}
+
+	for(let j = 0; j < bodies.length; ++j) {
+		t.insertRows(bodies[j]["rows"]);
+		// break; // TODO: The first version supports only 1 grid
+	}
+
+	t.addStaticDataRows(staticRows);
+
+	if(gridOption.contentBottomPadding) {
+		grid.setBottomPaddingSection(gridOption.contentBottomPadding);
+	}
+
+	let contentRightPadding = gridOption.contentRightPadding;
+	if(contentRightPadding) {
+		if (typeof contentRightPadding !== "number") {
+			contentRightPadding = 6;
+		}
+
+		grid.reserveRightSpace(contentRightPadding);
+	}
+
+	// Let everything init first
+	// then set conflationRate to grid for better perfomance on rapidly updating
+	let dataConflationRate = gridOption['dataConflationRate'];
+	if (dataConflationRate != null) {
+		grid.setDataConflationRate(dataConflationRate);
+	}
+
+	// Tell all plugins that the initialization phase has ended
+	let extObjects = grid.getPluginList().map(grid.getPlugin.bind(grid));
+	t._processExtension(extObjects, "afterInit");
+	t.initSubscription();
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+Grid.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let grid = this._grid;
+	if(grid.getConfigObject) {
+		grid.getConfigObject(obj);
+	}
+
+	// Difference from composite grid in default config
+	if(obj["columnVirtualization"] === false) {
+		delete obj["columnVirtualization"];
+	}
+
+	if(obj["rowVirtualization"] === true) {
+		delete obj["rowVirtualization"];
+	}
+
+	if(obj["rowHighlighting"] === true) {
+		delete obj["rowHighlighting"];
+	}
+
+	if(obj["contentVerticalLines"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["contentVerticalLines"];
+	}
+
+	if(obj["borders"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["borders"];
+	}
+
+
+	let i, len, prevTimeSeriesField;
+	len = this.getColumnCount();
+	for (i = 0; i < len; ++i) {
+		let column = columns[i];
+		if(!column) {
+			column = columns[i] = {};
+		}
+		let colDef = this.getColumnDefinition(i);
+		// TODO: Update width and scalability changed by the extensions
+		colDef.getConfigObject(column);
+		let parentField = FieldDefinition.getFieldProperty(colDef.getField(), "timeSeriesParent");
+		if(parentField && !prevTimeSeriesField) { // Assume first column of time series child to convert to time series parent
+			prevTimeSeriesField = parentField;
+			column.field = parentField;
+			delete column.name; // WARNING: Name of child should be retained
+			delete column.autoGenerated; // Convert to parent time series field
+		}
+
+		if(!parentField && prevTimeSeriesField) { // Handled duplicate parent time series field in difference position of column
+			prevTimeSeriesField = null;
+		}
+	}
+	obj.columns = columns = columns.filter(_byNonAutoGeneratedColumn); // Time series child will be filtered out
+
+	if(this._topNode.style.overflow === "") {
+		obj["scrollbar"] = false;
+	}
+
+	let val = this._dv.getPageSize();
+	if(val > 0) {
+		obj["pageSize"] = val;
+	}
+
+	val = grid.getDefaultRowHeight();
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
+		obj["rowHeight"] = val;
+	}
+
+	val = grid.getSection("title").getDefaultRowHeight();
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
+		obj["headerRowHeight"] = val;
+	}
+
+	if(this._autoLayoutTimer) {
+		obj["autoLayoutUpdate"] = true;
+	}
+
+	val = isEmptyObject(this._defaultColumnOptions);
+	if (!val) { // Currently, this variable is the object, we need to check empty array for default value
+		obj["defaultColumnOptions"] = this._defaultColumnOptions;
+	}
+
+	if(this._autoDateConversion) {
+		obj["autoDateConversion"] = true;
+	}
+
+	if(this._textSelect) {
+		obj["textSelect"] = true;
+	}
+
+	if(this._lang) {
+		obj["lang"] = this._lang;
+	}
+	if(this._fnEngine) {
+		obj["formulaEngine"] = true;
+	}
+	if(this._pollingInterval) {
+		obj["adcPollingInterval"] = this._pollingInterval;
+	}
+	if(this._fieldCaching) {
+		obj["fieldCaching"] = this._fieldCaching;
+	}
+	if(this._timeSeriesExpansion != true) {
+		obj["timeSeriesExpansion"] = this._timeSeriesExpansion;
+	}
+
+	if(this._childDataField) {
+		obj["childDataField"] = this._childDataField;
+	}
+
+	// get all rows config
+	let rowDefs = this.getAllRowDefinitions();
+	let rows = obj["rows"] = [];
+	let rowDef, rowConfig;
+	len = rowDefs.length;
+	for (i = 0; i < len; i++) {
+		rowDef = rowDefs[i];
+		rowConfig = rowDef.getConfigObject();
+		rows.push(rowConfig);
+	}
+
+	// get row config from extensions
+	let extensions = grid.getPlugins();
+	let pluginInstance, row;
+	for(let key in extensions) {
+		pluginInstance = extensions[key];
+		if(typeof pluginInstance["getRowConfigObject"] === "function") {
+			len = rows.length;
+			for (i = 0; i < len; i++) {
+				rowDef = rowDefs[i];
+				row = rows[i];
+				pluginInstance["getRowConfigObject"](row, rowDef.getRowId());
+			}
+		}
+	}
+
+	// TODO: The following states need to be retrieved
+	// topFreezingCount, bottomFreezingCount
+	// scrollbarParent
+	// linearWheelScrolling
+	// stepScroll
+	// noColumnDragging
+	// columnReorder
+	// topSection
+
+	// NOTE: no need to export synapseApiKey, ADC and RTK
+
+	return obj;
+};
+
+/** @public
+* @ignore
+* @param {Object} dateTimeUtil
+*/
+Grid.prototype.setDateTimeUtil = function(dateTimeUtil) {
+	if(this._dateTimeUtil !== dateTimeUtil) {
+		this._dateTimeUtil = dateTimeUtil;
+		this._dateTimeUtil.setLocale(this._lang);
+	}
+};
+/** @public
+* @param {string} lang
+*/
+Grid.prototype.setLocale = function(lang) {
+	if(lang && this._lang !== lang) {
+		this._lang = lang;
+		this._dateTimeUtil.setLocale(lang);
+		this._grid.requestRowRefresh();
+	}
+};
+
+/** @private
+* @param {Object} defaultCol
+* @param {Array.<Object>} userColumns
+*/
+Grid.prototype._defaultColumnSetup = function (defaultCol, userColumns) {
+	let c = userColumns.length;
+	for (let i = 0; i < c; i++) {
+		let column = userColumns[i];
+		if (typeof column === 'object') {
+			for (let key in defaultCol) {
+				if (column[key] == null) {
+					column[key] = defaultCol[key];
+				}
+			}
+		}
+		// TODO: Handle columnOption type string
+		// else if (typeof column === 'string') { }
+	}
+};
+
+/** @private
+* @param {Array.<Object>} exts List of plugin instance
+* @param {string} field A function name of plugin instance
+* @param {Array.<*>} params Inputs that will pass to a function call
+*/
+Grid.prototype._processExtension = function (exts, field, params) {
+	if(Array.isArray(exts)) {
+		for (let i = 0; i < exts.length; i++) {
+			if (exts[i][field]) {
+				exts[i][field].apply(exts[i], params);
+			}
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onRicAdded = function(e) {
+	let addedRics = e.addedRics;
+	this._snapshot.addFields(e.fields);
+	let len = addedRics.length;
+	for (let i = 0; i < len; ++i) {
+		let ric = addedRics[i];
+		let rowDefs = this._connector.getRowDefByRic(ric);
+		let jLen = rowDefs ? rowDefs.length : 0;
+		for (let j = 0; j < jLen; ++j) {
+			let rowDef = rowDefs[j];
+			if (rowDef.getSymbol() === ric) {
+				this._snapshot.addRic(ric); // ADC
+			}
+		}
+	}
+
+	this._dispatch(e.type, e);
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onRicRemoved = function(e) {
+	this._dispatch(e.type, e);
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onFieldAdded = function(e) {
+	let rowDefs = e.rowDefs;
+	let addedFields = e.addedFields;
+
+	// ADC
+	for (let i in rowDefs) {
+		this._snapshot.addRic(rowDefs[i].getSymbol());
+	}
+	this._snapshot.addFields(addedFields);
+
+	// JET
+	if (this._subs) {
+		let realtimeFields = addedFields.filter(FieldDefinition.isRealTimeField);
+		if(realtimeFields.length > 0) {
+			this._subs["addFields"](realtimeFields);
+		}
+	}
+
+	this._dispatch(e.type, e);
+};
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onFieldRemoved = function(e) {
+	let removedFields = e.removedFields;
+
+	// TODO: ADC fields have an interval load. Currently, we only keep the field but do not delete it.
+	// JET
+	if(this._subs) {
+		this._subs["removeFields"](removedFields);
+	}
+
+	this._dispatch(e.type, e);
+};
+
+/** @public
+* @param {ColumnDefinition~Options|string} columnOption String will be treated as field, while object is treated as the column options
+* @param {number=} idx
+*/
+Grid.prototype.insertColumn = function (columnOption, idx) {
+	let colCount = this.getColumnCount();
+	if(idx == null || idx > colCount) {
+		idx = colCount;
+	}
+
+	// no need to merge defaultColumn during initialize process
+	// because columnOption already mutate by initialize function
+	let configObj = (this._initializing) ? {} : cloneObject(this._defaultColumnOptions);
+
+	if (typeof columnOption === "string") {
+		configObj["field"] = columnOption;
+	} else { // columnOption is assumed to be an object
+		for (let key in columnOption) {
+			configObj[key] = columnOption[key];
+		}
+	}
+
+	if(this._fnEngine) {
+		configObj["formulaEngine"] = this._fnEngine; // Adding extra option
+	}
+
+	let colDef = new ColumnDefinition(configObj, this);
+	configObj[COL_DEF] = colDef;
+
+	// WARNING: width is processed twice by tr-grid and rt-grid
+	// Inserting column also initializes prefined formatter
+	this._grid.insertColumn(idx, configObj); // columnAdded is fired
+};
+
+/**
+* @private
+* @param {Object} e snapshort change event object
+*/
+Grid.prototype._updateTimeSeriesFields = function (e) {
+	let childField;
+	let snapShotData = e.data;
+	let childFields = {};
+	for (let ric in snapShotData) {
+		// childFields = snapShotData[ric];
+		for (childField in snapShotData[ric]) {
+			childFields[childField] = true; // Merge child fields to parent (Don't truth each ric it will be have some empty data)
+		}
+		this.setRicData(ric, snapShotData[ric]); // update cell data if exist
+	}
+	let parentField, field, colIndex, parentColDef, childColIndex;
+	let parentMap = {}; // map parent time series field and their first child
+	for (field in childFields) { // Warning: data change can be differ time series child field
+		parentField = e.childrenFieldToParent[field];
+		if(!parentMap[parentField]) {
+			parentMap[parentField] = [field];
+		} else {
+			parentMap[parentField].push(field);
+		}
+	}
+
+	for (parentField in parentMap) { // WARNING: one dataChanged event can be multiple fields
+		let childrenField = parentMap[parentField];
+		colIndex = this.getColumnIndex(parentField);
+		parentColDef = this._getColumnDefinition(colIndex);
+		let i, len;
+		len = childrenField.length;
+		for (i = 0; i < len; i++) {
+			childField = childrenField[i];
+			childColIndex = this.getColumnIndex(childField);
+			if(childColIndex < 0) { // not found column index in view tried to clone from parent
+				colIndex = this.getColumnIndex(parentField);
+				parentColDef = this._getColumnDefinition(colIndex);
+				this._cloneTimeSeriesColumn(parentColDef, childField, colIndex);
+				FieldDefinition.addTimeSeriesChild(parentField, childField); // TODO: time series child can be difference of response even if the input is the same, It should be dynamic add/remove fields
+			}
+		}
+		this.removeColumn(parentField);
+	}
+
+};
+
+
+/** @private
+* @param {ColumnDefinition} colDef
+*/
+Grid.prototype._populateTimeSeriesChildren = function (colDef) {
+	if(this._timeSeriesChildConflator.conflate(colDef) ) {
+		return;
+	}
+
+	let colDefs = this._timeSeriesChildConflator.popAllData();
+	let i, j, len, childField, idx;
+
+	for (i = 0; i < colDefs.length; i++) {
+		colDef = colDefs[i];
+		idx = this.getColumnIndex(colDef);
+
+		if(!colDef) {
+			continue;
+		}
+		let parentField = colDef.getField();
+		let childFields = FieldDefinition.getTimeSeriesChildren(parentField);
+		if(!childFields) { // not found time series field
+			return;
+		}
+
+		len = childFields.length;
+		if(len < 1) {
+			return; // normal field
+		}
+
+		for (j = 0; j < len; j++) {
+			idx = this.getColumnIndex(colDef);
+			childField = childFields[j];
+			this._cloneTimeSeriesColumn(colDef, childField, idx);
+		}
+	}
+
+};
+
+/** @private
+* @param {ColumnDefinition} parentColDef Parent definition
+* @param {string} childField field
+* @param {number} idx index of insertion column
+*/
+Grid.prototype._cloneTimeSeriesColumn = function (parentColDef, childField, idx) {
+	let parentConfig, columnOption;
+	parentConfig = parentColDef.getConfigObject();
+	columnOption = cloneObject(parentConfig);
+	columnOption["field"] = childField.replace("TR.", ""); // We need to remove the 'TR' prefix from the field to avoid confusion with time series fields.
+	columnOption["name"] = childField.split("_")[1].split("T")[0]; // Currently, response server format utc date ex "2022-11-23T00:00:00"
+	columnOption["parent"] = parentColDef;
+	columnOption["timeSeriesName"] = parentColDef.getName();
+	columnOption["timeSeriesId"] = parentColDef.getId();
+	this.insertColumn(columnOption, idx++);
+
+};
+
+/** @public
+* @param {ColumnDefinition~Options|string} columnOption String will be treated as field, while object is treated as the column options
+* @param {Grid~ColumnReference} colRef
+*/
+Grid.prototype.replaceColumn = function (columnOption, colRef) {
+	let colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) {
+		return;
+	}
+	let colConfig = {};
+	let core = this._grid;
+	let columnDef = core._getColumnDef(colIndex);
+
+	let value = core.getColumnScalability(colIndex);
+	colConfig["scalable"] = value;
+
+	value = core.getColumnCustomLaneSize(colIndex);
+	colConfig["width"] = value;
+
+	value = core.getMinimumColumnWidth(colIndex);
+	if(value > 0) {
+		colConfig["minWidth"] = value;
+	}
+
+	value = core.getColumnVisibility(colIndex, 0); // flag 0 means get only core api hidden state
+	if(!value) {
+		colConfig["hidden"] = true;
+	}
+
+	value = columnDef["stationary"];
+	if (value) {
+		colConfig["stationary"] = value;
+	}
+
+	value = columnDef["leftPinned"];
+	if (value) {
+		colConfig["leftPinned"] = value;
+	}
+
+	value = columnDef["rightPinned"];
+	if (value) {
+		colConfig["rightPinned"] = value;
+	}
+
+	if(typeof columnOption === "string") {
+		colConfig["field"] = columnOption;
+	} else { // type object from user
+		for (let key in columnOption) {
+			colConfig[key] = columnOption[key];
+		}
+	}
+
+	if(columnOption["width"] && !columnOption["scalable"]) {
+		colConfig["scalable"] = false;
+	}
+
+	if(columnOption["scalable"] && !columnOption["width"]) {
+		colConfig["width"] = 1;
+	}
+
+	let colDef = this.getColumnDefinition(colIndex);
+	if(colDef && colConfig.id == null) {
+		colConfig.id = colDef.getId(); // retain ID
+	}
+	this._grid.startBatch("reset");
+	this.removeColumn(colIndex);
+	this.insertColumn(colConfig, colIndex);
+	this._grid.stopBatch("reset");
+};
+
+/** to update column name when field info is loaded
+ * @private
+ * @param {string} field
+ * @param {ColumnDefinition} colDef
+ * @param {Object} response
+ */
+Grid.prototype._onFieldLoadedSuccess = function (field, colDef, response) {
+	if(this._connector && response && response.id) {
+		let fieldDef = response;
+		if (colDef && colDef.getField() === field) {
+			if (colDef.isDefaultName() && fieldDef.name) {
+				colDef.setName(fieldDef.name);
+				this.updateColumnTitle(); // has conflator -> async operation
+			}
+		}
+	}
+};
+
+/**
+ * @private
+ * @param {Object} err
+ */
+Grid.prototype._onFieldLoadedError = function (err) {
+	// TODO: May implement retry mechanism here, if need
+};
+
+/**
+ * @private
+ * @param {string} field
+ * @param {string} referrer
+ */
+Grid.prototype._onFieldLoaded = function (field, referrer) {
+	if(this._connector) {
+		// For time series, we need to wait until the field is loadedm, then we can insert a child from the field data.
+		if(FieldDefinition.isTimeSeries(field)) {
+			let colDef = this.getColumnDefinitionById(referrer); // The 'referrer' is a column ID that was just added
+			this._populateTimeSeriesChildren(colDef);
+		}
+		this._connector.addFields(field, referrer);
+	}
+};
+
+/**
+ * @private
+ * @param {Element} host
+ */
+Grid.prototype._setScrollbarParent = function (host) {
+	host.style.boxSizing = "border-box";
+	host.style.overflow = "hidden";
+	host.style.position = "relative";
+
+	this._topNode.style.height = "100%";
+
+	this._grid.autoHideScrollbars(false);
+	this._grid.getVScrollbar().attachToExternalElement(host);
+	this._grid.getHScrollbar().attachToExternalElement(host);
+};
+
+/** Get stored field information. If field information has not been requested or no data has been received yet, null value is returned.
+* @public
+* @function
+* @param {string} field
+* @return {Object}
+*/
+Grid.prototype.getFieldInfo = function(field) {
+	return FieldDefinition.getFieldInfo(field);
+};
+/** Request field information from Synapse service. If field information already exists, a resolved promise is returned. Synapse config must be supplied before the request can be made.
+* @public
+* @function
+* @param {string} field
+* @return {Promise}
+* @example
+* let gridConfig = {
+*   synapse: { // define synapse configuration
+*     apiKey: "xxx",
+*     contextApp: "xxx",
+*     auth: "xxx" (optional)
+*   }
+* };
+* let promise = grid.loadFieldInfo("CF_LAST");
+*/
+Grid.prototype.loadFieldInfo = function(field) {
+	return FieldDefinition.loadFieldInfo(field);
+};
+
+/**
+* @private
+* @param {string} field
+* @returns {boolean}
+*/
+Grid.prototype._shouldLoadFieldInfo = function (field) {
+
+	let val = this._RTK || window["JET"]; // Fastest checking can be performed by checking the first condition.
+	if(!val) {
+		return false;
+	}
+
+	// WARNING: If field caching is disabled, it shouldn't load field info
+	if(!this._fieldCaching) {
+		return false;
+	}
+
+	val = FieldDefinition.hasFieldInfo(field);
+	if(val) {
+		return false;
+	}
+
+	val = FieldDefinition.isAdc(field) || FieldDefinition.isRealTimeField(field);
+	if(!val) {
+		return false;
+	}
+
+	return true;
+};
+/** Remove all existing columns and add new columns based on the given objects
+* @public
+* @param {Array.<Object>} columns Array of column options
+*/
+Grid.prototype.setColumns = function(columns) {
+	let grid = this._grid;
+	let colCount = (columns) ? columns.length : 0;
+
+	grid.startBatch("reset");
+	this.removeAllColumns();
+	if(colCount > 0) {
+		let prevState = false;
+		if(colCount > 1) {
+			prevState = grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+		}
+		for(let i = 0; i < colCount; ++i) {
+			this.insertColumn(columns[i], i);
+		}
+		if(colCount > 1) {
+			grid.freezeLayout(prevState);
+		}
+	}
+	grid.stopBatch("reset");
+};
+
+
+/** Remove, add and keep column based on the given column data
+* @public
+* @param {Array.<Object>} columns Array of column options
+* @param {boolean=} byId=false, if enable it, this method will only check for differences in the 'id' property
+*/
+Grid.prototype.restoreColumns = function(columns, byId) {
+	let grid = this._grid;
+	grid.startBatch("reset");
+	let configObj = this.getConfigObject();
+	let previousColumns = configObj.columns;
+
+	let preColLen = previousColumns.length;
+	let newColLen = columns.length;
+
+	let compareLogic = byId ? _hasMatchingId : deepEqual;
+	let removingFields = [];
+	let keepingColumns = [];
+	let columnOrdering = [];
+
+	let i, j, found;
+	// Slow, time complexity BigO(n ^ 2)
+	for (i = 0; i < preColLen; i++) {
+		found = false;
+		for (j = 0; j < newColLen; j++) {
+			if(compareLogic(previousColumns[i], columns[j])) {
+				keepingColumns.push(previousColumns[i]);
+				found = true;
+				break;
+			}
+		}
+		if (!found) {
+			removingFields.push(i);
+		}
+	}
+
+	this.removeColumns(removingFields);
+
+	let keepingLen = keepingColumns.length;
+	let prevState = false;
+	if(newColLen > 1) {
+		prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+	}
+	for (i = 0; i < newColLen; i++) {
+		found = false;
+		for (j = 0; j < keepingLen; j++) { // loop only keeping column
+			if(compareLogic(columns[i], keepingColumns[j])) {
+				found = true;
+				let colIndex = this.getColumnIndex(columns[i].id || columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				columnOrdering.push(this.getColumnId(colIndex));
+				break;
+			}
+		}
+		if (!found) {
+			this.insertColumn(columns[i], i);
+			columnOrdering.push(this.getColumnId(i)); // Use new insertion column index
+		}
+	}
+
+	if(newColLen > 1) {
+		this._grid.freezeLayout(prevState);
+	}
+
+	grid.reorderColumns(columnOrdering);
+	grid.stopBatch("reset");
+};
+
+/** Remove all existing columns and add new columns based on the given texts/fields
+* @public
+* @function
+* @param {Array.<string>} ary Array of fields (string)
+* @see {@link Grid#setColumns}
+*/
+Grid.prototype.setFields = Grid.prototype.setColumns;
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onColumnAdded = function(e) {
+	let colDef = /** @type{ColumnDefinition} */(e.context[COL_DEF]);
+	delete e.context[COL_DEF];
+	let idx = e.colIndex;
+
+	let coreColDef = this._grid._getColumnDef(idx);
+	colDef._setCoreColumnDef(coreColDef); // For column id and field
+
+	let colData = this._grid.getColumnData(idx);
+	if(!colData) { // Save column inside grid
+		colData = this._grid.setColumnData(idx, {});
+	}
+	colData[COL_DEF] = colDef;
+	let userModel = colDef.getUserModel();
+	// binding
+	this._grid.setColumnDataBindingHandler(idx, colDef.getRenderer());
+	// width and scalable
+	let value = userModel["width"];
+	// eslint-disable-next-line no-undefined
+	if(value !== undefined) {
+		value = +value;
+		let scalable;
+		if(userModel["scalable"] != null) {
+			scalable = userModel["scalable"] ? true : false;
+		} else {
+			scalable = value !== value; // NaN means scalable
+		}
+		this._grid.setColumnWidth(idx, value, scalable);
+	} else {
+		this._grid.setColumnWidth(idx, 1, true);
+	}
+	// minWidth
+	value = userModel["minWidth"];
+	if(value >= 0) {
+		this._grid.setMinimumColumnWidth(idx, value);
+	}
+	// hidden
+	value = userModel["hidden"];
+	if(value) {
+		this._grid.hideColumn(idx, true);
+	}
+	// textAlign
+	value = userModel["textAlign"] || userModel["alignment"];
+	if(typeof value === "string") {
+		this._grid.setColumnAlignment(idx, value);
+	}
+	if(!userModel["keepModel"]) {
+		colDef.clearUserModel();
+	}
+
+	// text select flag per column
+	// with this flag enabled user can select text in cell of this column
+	if (colDef.isTextSelect()) {
+		this._grid.enableColumnClass(idx, 'tr-text-select', true, "content");
+	}
+
+	// className
+	let i, classes = colDef.getClasses();
+	for(i = 0; i < classes.length; i++) {
+		this._grid.enableColumnClass(idx, classes[i]);
+	}
+	let colField = colDef.getField();
+	this._grid.setDataColumnName(idx, ROW_DEF); // This make ColumnDefinition renderer work
+	let fields = colDef.getAllFields();
+	let referrer = colDef.getId();
+	let len = fields.length;
+	let field, dataType, prom, onLoaded;
+	for(i = 0; i < len; i++) {
+		field = fields[i];
+		if(this._shouldLoadFieldInfo(field)) {
+			if(field === colField) {
+				dataType = colDef.getDataType(); // Data-type from user's column options
+			} else { // Other required fields
+				dataType = ColumnDefinition.getDataType(field); // Data-type evaluated from FieldDefinition
+			}
+			prom = FieldDefinition.loadFieldInfo(field)
+				.then(this._onFieldLoadedSuccess.bind(this, field, colDef))
+				.catch(this._onFieldLoadedError);
+
+			if(!dataType) {
+				// wait field-info to be loaded before adding field
+				onLoaded = this._onFieldLoaded.bind(this, field, referrer);
+				prom = prom.then(onLoaded).catch(onLoaded);
+			} else {
+				if(colDef.isTimeSeries()) {
+					this._populateTimeSeriesChildren(colDef);
+				}
+				this._connector.addFields(field, referrer);
+			}
+		} else {
+			if(colDef.isTimeSeries()) {
+				this._populateTimeSeriesChildren(colDef);
+			}
+			this._connector.addFields(field, referrer);
+		}
+	}
+};
+
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @see {@link Grid#removeColumns}
+* @see {@link Grid#removeAllColumns}
+*/
+Grid.prototype.removeColumn = function(colRef) {
+	let colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) {
+		return;
+	}
+
+	let colDef = this.getColumnDefinition(colIndex);
+
+	this._grid.removeColumnAt(colIndex);
+	this._connector.removeFields(colDef);
+
+	colDef.dispose(); // Dispose at the last line to avoid making properties inaccessible
+	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
+};
+/** Remove multiple columns through array. To remove all columns, use removeAllColumns() instead of this method
+* @public
+* @param {Array.<Grid~ColumnReference>} colRefs
+* @see {@link Grid#removeColumn}
+* @see {@link Grid#removeAllColumns}
+*/
+Grid.prototype.removeColumns = function(colRefs) {
+	let indices = this.getColumnIndices(colRefs);
+	let len = indices.length;
+	if(len <= 1) {
+		if(len === 1) {
+			this.removeColumn(indices[0]);
+		}
+		return;
+	}
+	indices.sort(Grid._descendingOrder); // Removal must be done from the back
+
+	let prevState = this._grid.freezeLayout(); // To prevent multiple UI updates
+
+	for(let i = 0; i < len; ++i) {
+		let colIndex = indices[i];
+		let colDef = this.getColumnDefinition(colIndex);
+		colDef.dispose();
+		this._grid.removeColumnAt(colIndex);
+		this._connector.removeFields(colDef);
+	}
+
+	this._grid.freezeLayout(prevState);
+};
+/** Sorting is also cleared.
+* @public
+* @see {@link Grid#removeColumn}
+* @see {@link Grid#removeColumns}
+*/
+Grid.prototype.removeAllColumns = function() {
+	let colCount = this.getColumnCount();
+	if(colCount <= 0) {
+		return;
+	}
+
+	if(!this._sharedSorter) {
+		this.clearSort();
+	}
+	for(let i = colCount; --i >= 0;) {
+		// WARNING: This may affect plugins event listeners
+		this._grid.setColumnDataBindingHandler(i, null);
+		let colDef = this.getColumnDefinition(i);
+		colDef.dispose();
+	}
+	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
+
+	this._columnTitleConflator.reset();
+	this._timeSeriesChildConflator.reset();
+
+	this._connector.removeAllFields();
+	this._grid.setColumnCount(0);
+};
+
+/** Move the column at the specified index to the target index. When moving multiple columns, the original order of the source columns will be sorted by their index and the position of the columns will not be guaranteed to be exactly at the destination index.
+* @public
+* @param {number|Array.<number>} fromColIndex index or array of indices of the column(s) to be moved.
+* @param {number} toColIndex target column index
+* @return {boolean} Return true if there is any change, and false otherwise
+* @see {@link Grid#moveColumnById}
+*/
+Grid.prototype.moveColumn = function (fromColIndex, toColIndex) {
+	return this._grid.moveColumn(fromColIndex, toColIndex);
+};
+/** If source column is not found, no operation is performed. If destination column is not found, the source column will be moved to the last position.<br>
+* Note: this method behaves slightly different from moveColumn method in that it always put source column at the position before the specified destination column, while moveColumn method will put column at exactly at the destination index.
+* @public
+* @param {number|string} srcCol Column Id or index
+* @param {(number|string)=} destCol Column Id or index of the destination
+* @return {boolean} Return true if there is any change, and false otherwise
+* @see {@link Grid#moveColumn}
+* @example
+* grid.moveColumnById(3, 1); // Move column 3 to position before column 1
+* grid.moveColumnById(0, 2); // Move column 0 to position before column 2 (column index 1)
+* grid.moveColumnById(0, 1); // Nothing is moved
+* grid.moveColumnById("sourceColumnId", "anotherId");
+* grid.moveColumnById("sourceColumnId", ""); // move to the last position
+*/
+Grid.prototype.moveColumnById = function (srcCol, destCol) {
+	return this._grid.moveColumnById(srcCol, destCol);
+};
+
+/** @public
+* @param {number|string|Array.<number|string>} colRefs List of column index or column id to be moved
+* @param {(number|string)=} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index
+* @return {boolean} Return true if there is any change, and false otherwise
+*/
+Grid.prototype.reorderColumns = function (colRefs, destCol) {
+	return this._grid.reorderColumns(colRefs, destCol);
+};
+
+/** The hidden column still occupies the same index.
+* @public
+* @param {Grid~ColumnReference} colRef
+* @param {boolean=} hidden
+* @see {@link Grid#hideColumns}
+* @see {@link Grid#showAllColumns}
+*/
+Grid.prototype.hideColumn = function(colRef, hidden) {
+	let colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) { // not found
+		return;
+	}
+	this._grid.hideColumn(colIndex, hidden);
+
+};
+/** Hide multiple columns at once. The hidden columns still occupy the same index.
+* @public
+* @param {Array.<Grid~ColumnReference>} colRefs
+* @param {boolean=} hidden
+* @see {@link Grid#hideColumn}
+* @see {@link Grid#showAllColumns}
+*/
+Grid.prototype.hideColumns = function(colRefs, hidden) {
+	this._grid.hideColumns(this.getColumnIndices(colRefs), hidden);
+};
+/** @public
+* @see {@link Grid#hideColumn}
+* @see {@link Grid#hideColumns}
+*/
+Grid.prototype.showAllColumns = function() {
+	this._grid.showAllColumns();
+};
+/** @private
+* @function
+* @param {number} a
+* @param {number} b
+* @return {number}
+*/
+Grid._descendingOrder = function(a, b) {
+	return b - a;
+};
+
+/** Add fields for real-time data without adding column nor UIs. No duplication is allowed
+* @public
+* @param {string|Array.<string>} fieldRef
+* @param {string=} referrer
+* @return {boolean}
+*/
+Grid.prototype.addDataFields = function(fieldRef, referrer) {
+	if(!fieldRef) {
+		return false;
+	}
+
+	let fields = Array.isArray(fieldRef) ? fieldRef : [fieldRef];
+	let len = fields.length;
+	let i, field, dataType, prom, onLoaded;
+	for(i = 0; i < len; i++) {
+		field = fields[i];
+		if(this._shouldLoadFieldInfo(field)) {
+			dataType = ColumnDefinition.getDataType(field);
+			prom = FieldDefinition.loadFieldInfo(field)
+				.catch(this._onFieldLoadedError);
+
+			if(!dataType) {
+				// wait field-info to be loaded before adding field
+				onLoaded = this._onFieldLoaded.bind(this, field, referrer);
+				prom = prom.then(onLoaded).catch(onLoaded);
+			} else {
+				this._connector.addFields(field, referrer || "grid");
+			}
+		} else {
+			this._connector.addFields(field, referrer || "grid");
+		}
+	}
+
+	return true;
+};
+/** Add fields for real-time data without adding column nor UIs. No duplication is allowed
+* @public
+* @param {string|Array.<string>} fieldRef
+* @param {string=} referrer
+* @return {boolean}
+*/
+Grid.prototype.removeDataFields = function(fieldRef, referrer) {
+	if(!fieldRef) {
+		return false;
+	}
+
+	this._connector.removeFields(fieldRef, referrer || "grid");
+	return true;
+};
+/** @public
+* @param {string} referrer
+*/
+Grid.prototype.removeFieldReferrer = function(referrer) {
+	if(!referrer) {
+		return;
+	}
+
+	this._connector.removeFieldReferrer(referrer);
+};
+
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {string=} opt_order This can be "ascending", "descending", "none", "noOrder", or "originalOrder"
+*/
+Grid.prototype.sortColumn = function(colRef, opt_order) {
+	if(typeof colRef === "string") {
+		this._stp.sortColumn(colRef, opt_order); // Allow sorting by field
+		return;
+	}
+
+	let colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) {
+		this._stp.sortColumn(this.getSortedColumnIndex(), "n"); // reset current sorting
+	} else {
+		this._stp.sortColumn(colIndex, opt_order);
+	}
+};
+/** @public
+* @param {number} colIndex
+* @param {string} str
+*/
+Grid.prototype.setColumnName = function(colIndex, str) {
+	let colDef = this.getColumnDefinition(colIndex);
+	if(colDef) {
+		colDef.setName(str);
+		this.updateColumnTitle();
+	}
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @return {string}
+*/
+Grid.prototype.getColumnBackgroundColor = function(colRef) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		return colDef.getBackgroundColor();
+	}
+	return "";
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {string} color
+*/
+Grid.prototype.setColumnBackgroundColor = function(colRef, color) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		colDef.setBackgroundColor(color);
+	}
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {Function=} func
+*/
+Grid.prototype.setColumnRenderer = function(colRef, func) {
+	let colIndex = this.getColumnIndex(colRef);
+	this.setColumnFormatter(colIndex, func);
+};
+
+/** @public
+* @param {Grid~ColumnReference} colRef Column index or id
+* @param {string=} id ID for renderer mapping. If not specified the default renderer will be picked up
+* @param {Function=} func If not specified the renderer which corresponded id from mapping will be picked up
+*/
+Grid.prototype.activateColumnRenderer = function(colRef, id, func) {
+	let colIndex = this.getColumnIndex(colRef);
+	if (colIndex == null) { return; }
+
+	let colDef = this.getColumnDefinition(colIndex);
+	if(!colDef) { return; }
+
+	colDef.activateRenderer(id, func);
+
+	this._grid.setColumnDataBindingHandler(colIndex, colDef.getRenderer());
+	this._grid.requestRowRefresh();
+};
+
+/**
+ * @public
+ * @param {number} colIndex Column index of the position of the column to be updated
+ * @param {Object|Function=} formatter Formatter object or bind function
+ */
+Grid.prototype.setColumnFormatter = function (colIndex, formatter) {
+	if (colIndex == null) { return; }
+
+	let colDef = this.getColumnDefinition(colIndex);
+	if(!colDef) {
+		return;
+	}
+
+	let func = null;
+	if (formatter) {
+		if(typeof formatter === "object") {
+			if(typeof formatter.init === "function") { // Initialize predefined formatter
+				// WARNING: Column definition has not been updated
+				formatter.init(colDef.getConfigObject(), this._grid);
+			}
+			func = formatter.binding;
+		} else {
+			func = formatter;
+		}
+		if(typeof func !== "function") {
+			func = null;
+		}
+	}
+
+	if(func !== colDef.getRenderer()) {
+		let section = this._grid.getSection("content");
+		let col = /** @type {Column} */section.getColumn(colIndex);
+		if (col) {
+			col.clearContent();
+		}
+
+		this._grid.setColumnDataBindingHandler(colIndex, null);
+
+		colDef.setRenderer(func);
+
+		this._grid.setColumnDataBindingHandler(colIndex, colDef.getRenderer());
+		this._grid.requestRowRefresh();
+	}
+};
+
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {ColumnDefinition~SortLogic=} func
+*/
+Grid.prototype.setColumnSorter = function(colRef, func) {
+	let colIndex = this.getColumnIndex(colRef);
+	let colDef = this.getColumnDefinition(colIndex);
+	if(colDef) {
+		colDef.setSorter(func);
+
+		let sortedColumn = this.getSortedColumnIndex(); // TODO: Support multi-column sorting
+		if(sortedColumn === colIndex) {
+			this._stp.refresh();
+		}
+	}
+};
+
+
+/** Initialize data for the given rowDef from another rowDef with the same RIC
+* @private
+* @param {!RowDefinition} rowDef
+*/
+Grid.prototype._initDuplicateRicData = function(rowDef) {
+	if(!rowDef) {
+		return;
+	}
+	let rowDefs = this._connector.getRowDefByRic(rowDef.getSymbol());
+	if(rowDefs && rowDefs.length > 0) { // Found at least 1 Duplicate chain/ric data
+		let firstRowDef = rowDefs[0];
+		rowDef.copyRowData(firstRowDef);
+		if(rowDef.isChain()) {
+			let children = firstRowDef.getChildren();
+			if(children && children.length > 0) {
+				setTimeout(this._cloneChain.bind(this, rowDef), 0); // Need to delay to wait row inserted
+			}
+		}
+	}
+};
+
+/** @private
+* @param {Object} newRowDef
+*/
+Grid.prototype._cloneChain = function(newRowDef) {
+	let rowDefs = this._connector.getRowDefByRic(newRowDef.getSymbol());
+	let firstRowDef = rowDefs ? rowDefs[0] : null;
+	let constituents = firstRowDef ? firstRowDef.getChildren() : null;
+	let count = constituents ? constituents.length : 0;
+	if(count < 0) {
+		return;
+	}
+
+	let subId = newRowDef.getSubId();
+	if(!subId) {
+		return; // A chain without subscription cannot have constituents
+	}
+	let evtArg = {
+		"subId": subId
+	};
+	for (let i = 0; i < count; i++) {
+		let childRowDef = constituents[i];
+		evtArg["ric"] = childRowDef.getRic();
+		evtArg["values"] = childRowDef.cloneRowData();
+		evtArg["values"]["SUB_ID"] = subId; // Imitate real-time service responses
+
+		this._onQ2DataChanged(evtArg); // WARNING: evtArg is shared across multiple calls
+	}
+};
+/** @public
+* @param {(RowDefinition~Options|string)=} rowOption
+* @param {Grid~RowReference=} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
+* @returns {RowDefinition}
+* @example
+* let grid = new rt.Grid(grid_div, options);
+* grid.insertRow({"ric": "RIC"}, 0); // A new row is added at the top
+*/
+Grid.prototype.insertRow = function(rowOption, rowRef) {
+	if(this._mainGrid) {
+		return this._mainGrid.insertRow(rowOption, this._getRowId(rowRef));
+	}
+
+	if(rowOption) {
+		if(typeof rowOption === "string") {
+			rowOption = { "ric": rowOption };
+		} else if(Array.isArray(rowOption["values"])) {
+			if(!rowOption["fields"]) { // Static values are defined but no fields
+				rowOption["fields"] = this.getColumnFields(); // For initializing static value
+			}
+		}
+	}
+	let rowDef = new RowDefinition(rowOption);
+
+	if(rowDef.setDataSource(this._dc, this._subs)) { // This could also subscribe chain index/ric to JET/RTK
+		this._hasNewUpdates = true; // Mark data table for cleaning it up later
+	}
+	rowDef.registerToView(this._dv, this._getRowId(rowRef));
+
+	this._initDuplicateRicData(rowDef);
+
+	if(rowOption && rowOption["hidden"]) {
+		this._dv.hideRow(rowDef.getRowId()); // Try to obtain rowId in rowDef since rowId is not assigned when new rows are created.
+	}
+	this._connector.addRic(rowDef);
+	return rowDef;
+};
+/** Insert a row as a segment separator
+* @public
+* @param {RowDefinition~Options=} rowOption
+* @param {Grid~RowReference=} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
+* @returns {RowDefinition}
+*/
+Grid.prototype.insertSegmentSeparator = function(rowOption, rowRef) {
+	if(!rowOption) {
+		rowOption = {};
+	}
+	if(typeof rowOption === "object") {
+		rowOption.asSegment = true;
+		return this.insertRow(rowOption, rowRef);
+	}
+	return null;
+};
+/** @public
+* @param {Array.<RowDefinition~Options|string>} rowOptions Array of row option object
+* @param {Grid~RowReference=} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
+* @param {Array.<string>=} opt_fields
+* @example
+* let grid = new rt.Grid(grid_div, options);
+* grid.insertRows([
+*  {ric: "RIC"},
+*  {values: {"field1": 0, "field2": 1}},
+*  {ric: "RIC2", values: [1, 2, 3, 4]},
+*  null
+* ]); // 4 rows are appended
+*/
+Grid.prototype.insertRows = function(rowOptions, rowRef, opt_fields) {
+	if(this._mainGrid) {
+		this._mainGrid.insertRows(rowOptions, this._getRowId(rowRef));
+		return;
+	}
+	if(!Array.isArray(rowOptions)) {
+		return;
+	}
+
+	let prevState = this._dt.freeze(); // Avoid sorting for each inserted row
+	let fields = opt_fields || this.getColumnFields();
+	let rowId = this._getRowId(rowRef);
+	let len = rowOptions.length;
+	for(let r = 0; r < len; ++r) {
+		let rowOption = rowOptions[r];
+		if(rowOption) {
+			if(typeof rowOption === "string") {
+				rowOption = { "ric": rowOption };
+			}
+			rowOption["fields"] = fields; // For initializing static value
+		}
+		this.insertRow(rowOption, rowId); // Note that data view is being frozen, so only using row id will work properly
+	}
+	this._dt.freeze(prevState);
+};
+/** Add multiple rows without `ric` property in {@link RowDefinition}
+* @public
+* @param {Array} dataRows 2D Array of data or Array of Field/Value pair object
+* @param {Array.<string>=} fields If no field is given, field defined in column definition will be used instead
+* @see {@link Grid#logDV}
+* @see {@link Grid#logDT}
+* @example
+* let grid = new rt.Grid(grid_div, options);
+* grid.addStaticDataRows([
+*  [10, "a", true],
+*  [20, "b", false],
+*  [30, "c", true]
+* ], ["field1", "field2", "field3"]); // 3 rows are appended
+*
+* grid.addStaticDataRows([ // Object format can also be used
+*  {"field1": 40, "field2": "a", "field3": true},
+*  {"field1": 50, "field2": "b"}, // each row doesn't have to be the same
+*  {"field1": 60, "field4": "some thing"}
+* ]); // 3 more rows are appended
+* grid.logDV({"colNames": ["field1", "field2", "field3", "field4"]}); // See results in console
+*/
+Grid.prototype.addStaticDataRows = function(dataRows, fields) {
+	if(this._mainGrid) {
+		this._mainGrid.addStaticDataRows(dataRows, fields);
+		return;
+	}
+
+	if(!Array.isArray(dataRows)) {
+		let userObj = dataRows;
+		dataRows = null;
+		if(userObj) {
+			if(userObj.fields && !fields) {
+				fields = userObj.fields;
+			}
+			if(Array.isArray(userObj.data)) { // dataRows must has an array type
+				dataRows = userObj.data;
+			}
+		}
+	}
+	if(dataRows) {
+		this.insertRows(dataRows.map(Grid._dataToRowOptions), null, fields);
+	}
+};
+/** Insert, update, remove and reorder data based on the given array of records
+* @public
+* @param {Array.<Object>} records Array of records for insert, remove, update, reorder in one operation
+* @param {string=} rowIdentifier Check difference data with the row identifier map property for operate record.
+* @example
+* // Grid data set will be updated to 3 records. All rows in the grid will be cleared and new rows will be inserted
+* grid.updateDataSet([
+* 	{ id: "A", field2: 1, field3: 2, field4: "Something A" },
+*	{ id: "B", field2: 1, field3: 2, field4: "Something B" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* ], "id");
+* // Update record id "B" in "field2", "field3" value 100, 200
+* grid.updateDataSet([
+* 	{ id: "A", field2: 1, field3: 2, field4: "Something A" },
+* 	{ id: "B", field2: 100, field3: 200, field4: "Something B" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* ], "id");
+* // Delete record id "B"
+* grid.updateDataSet([
+* 	{ id: "A", field2: 1, field3: 2, field4: "Something A" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* ], "id");
+* // Insert record id "D"
+* grid.updateDataSet([
+* 	{ id: "A", field2: 1, field3: 2, field4: "Something A" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* 	{ id: "D", field2: 1, field3: 2, field4: "Something D" },
+* ], "id");
+* // Reorder to "D", "C", "A"
+* grid.updateDataSet([
+* 	{ id: "D", field2: 1, field3: 2, field4: "Something D" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* 	{ id: "A", field2: 1, field3: 2, field4: "Something A" },
+* ], "id");
+* // Insert, Update, Delete And Reorder
+* grid.updateDataSet([
+* 	{ id: "F", field2: 1, field3: 2, field4: "Something F" },
+* 	{ id: "D", field2: 1, field3: 2, field4: "Something D" },
+* 	{ id: "C", field2: 1, field3: 2, field4: "Something C" },
+* 	{ id: "E", field2: 1, field3: 2, field4: "Something E" },
+* ], "id");
+*/
+Grid.prototype.updateDataSet = function(records, rowIdentifier) {
+	if(!Array.isArray(records) || records.length === 0 ) {
+		this.removeAllRows();
+		return;
+	}
+
+	// Map new data index
+	let recordCount = records.length;
+	let fieldSorting = "ROW_ORDER"; // TODO: Should be config by options
+	let oldDataMap = {};
+	let rowDef, id, record, i;
+	let rowDefs = this.getAllRowDefinitions(); // Include the filter/hidden rows
+	let rowDefCount = rowDefs.length;
+	let prevState = false;
+	if(rowIdentifier) {
+		prevState = this._dt.freeze();
+		for (i = 0; i < rowDefCount; i++) {
+			rowDef = rowDefs[i];
+			if(rowDef) {
+				id = rowDef.getRowData()[rowIdentifier];
+				if(id || id === 0) {
+					oldDataMap[id] = rowDef;
+				} else { // Any existing rowDef without row identifier should be removed
+					this.removeRow(rowDef); // Slow
+				}
+			}
+		}
+
+		let idMap = {};
+		let newDataMap = {};
+		for (i = recordCount - 1; i >= 0; i--) {
+			record = records[i];
+			id = record[rowIdentifier];
+			rowDef = oldDataMap[id];
+			newDataMap[id] = record; // Assign a new data map to compare to the previous data
+			record[fieldSorting] = i;
+			if(idMap[id]) { // Prevent assign data in duplicate row
+				continue;
+			}
+			idMap[id] = true;
+			if (!rowDef) {
+				this.insertRow({ values: record}); // Insert last position
+			} else {
+				rowDef.setRowData(record);
+			}
+		}
+		// Check Remove previous data
+		for (let rowIdentifierName in oldDataMap) {
+			if (oldDataMap[rowIdentifierName] && !newDataMap[rowIdentifierName]) {
+				this.removeRow(oldDataMap[rowIdentifierName]); // Slow
+			}
+		}
+		this._dt.sortOnce(ROW_DEF, "a", compareNumber, fieldSorting);
+		this._dt.freeze(prevState);
+	} else {
+		if(recordCount - rowDefCount > 1 || rowDefCount - recordCount > 1) {
+			prevState = this._dt.freeze();
+		}
+		for (i = 0; i < rowDefCount; i++) {
+			record = records[i];
+			if(record) {
+				oldDataMap[i] = rowDefs[i]; // Use index instead of rowIdentifier
+			} else {
+				this.removeRow(rowDefs[i]); // Need to use rowRef, can't use index in view
+			}
+		}
+
+		for (i = 0; i < recordCount; i++) { // It will be sort by index when insert / update
+			record = records[i];
+			rowDef = oldDataMap[i];
+			if (!rowDef) {
+				this.insertRow({ values: record}); // Insert last position
+			} else {
+				rowDef.setRowData(record);
+			}
+		}
+		if(recordCount - rowDefCount > 1 || rowDefCount - recordCount > 1) {
+			this._dt.freeze(prevState);
+		}
+	}
+};
+/** @private
+* @param {Array|Object} item
+* @return {!Object}
+*/
+Grid._dataToRowOptions = function(item) {
+	return {values: item};
+};
+/** @public
+* @param {Grid~RowReference} rowRef
+* @return {RowDefinition}
+* @see {@link Grid#removeRows}
+* @see {@link Grid#removeAllRows}
+*/
+Grid.prototype.removeRow = function(rowRef) {
+	if(this._mainGrid) {
+		return this._mainGrid.removeRow(this._getRowId(rowRef));
+	}
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		if(!rowDef.isAutoGenerated()) { // Users cannot remove auto-generated row by themselves
+			this._removeRow(rowDef);
+		}
+	}
+	return rowDef;
+};
+/** Remove multiple rows at once. This prevents duplicate operation and improve performance. To remove all rows, use removeAllRows() method instead of this method.
+* @public
+* @param {Array.<Grid~RowReference>} rowRefs
+* @return {Array.<RowDefinition>} Array of removed row definitions
+* @see {@link Grid#removeRow}
+* @see {@link Grid#removeAllRows}
+*/
+Grid.prototype.removeRows = function(rowRefs) {
+	let rowDef;
+	if(!Array.isArray(rowRefs)) {
+		rowDef = this.removeRow(rowRefs);
+		return rowDef ? [rowDef] : [];
+	}
+	if(this._mainGrid) {
+		return this._mainGrid.removeRows(rowRefs.map(this._getRowId));
+	}
+
+	let i;
+	let rowDefs = [];
+	let len = rowRefs.length;
+
+	// Verify user input
+	for(i = 0; i < len; ++i) {
+		rowDef = this._getRowDefinitionByRef(rowRefs[i]);
+		if(rowDef) {
+			if(!rowDef.isAutoGenerated()) {
+				rowDefs.push(rowDef);
+			}
+		}
+	}
+	len = rowDefs.length;
+
+	let prevState = false;
+	if(len > 1) {
+		prevState = this._dt.freeze(); // Prevent multiple changes that trigger sorting and filtering
+	}
+
+	for(i = 0; i < len; ++i) {
+		this._removeRow(rowDefs[i]);
+	}
+
+	if(len > 1) {
+		this._dt.freeze(prevState);
+	}
+	return rowDefs;
+};
+/** @public
+* @see {@link Grid#removeRow}
+* @see {@link Grid#removeRows}
+*/
+Grid.prototype.removeAllRows = function() {
+	if(this._sharedDataSource) {
+		return;
+	}
+	if(!this._dt.getRowCount()) {
+		return;
+	}
+	// Data source is not shared at this point
+	let rowDefs = this._getAllRowDefinitions();
+
+	this._dc.clearAllData();
+	this._dt.clearAllData();
+	this._dt.setClassificationSource(this._dc);
+	this._clearDataUpdates();
+
+	rowDefs.forEach(RowDefinition.dispose); // Each individual subscription is unsubscribed along with disposed rowDef
+
+	this._dcConflator.reset();
+	this._formulaConflator.reset();
+	this._chainConflator.reset();
+	this._constituentMap = null;
+	this._connector.removeAllRics();
+
+	// TODO: This logic should also be in the core grid
+	this._grid.getVScrollbar().setScrollTop(0);
+};
+/** WARNING: This does not remove data stored in the data cache
+* @private
+* @param {!RowDefinition} rowDef
+*/
+Grid.prototype._removeRow = function(rowDef) {
+	if(this._sharedDataSource) {
+		return;
+	}
+	this._dispatch("beforeRowRemoved", {});
+
+	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
+	if(childRowDefs) {
+		this._removeConstituentRows(childRowDefs);
+	}
+	this._connector.removeRic(rowDef);
+	this._dt.removeRow(rowDef.getRowId()); // TODO: Merge this with the above removeRows() method
+	rowDef.dispose(); // WARNING: This does not remove child reference from its parent
+};
+
+/** @private
+* @param {Array.<RowDefinition>} rowDefs
+*/
+Grid.prototype._removeConstituentRows = function(rowDefs) {
+	let connector = this._connector;
+	let rowIds = [];
+	for(let i = 0; i < rowDefs.length; i++) {
+		let childRowDef = rowDefs[i];
+		rowIds.push(childRowDef.getRowId());
+		connector.removeRic(childRowDef);
+		childRowDef.dispose();
+	}
+
+	this._dt.removeRows(rowIds);
+};
+
+/** @public
+* @param {Grid~RowReference} rowRef
+* @param {boolean=} hidden if false, show instead of hide
+*/
+Grid.prototype.hideRow = function(rowRef, hidden) {
+	let rid = this._getRowId(rowRef);
+	let grid = this._mainGrid || this._grid;
+	grid.hideRow(rid, hidden);
+};
+
+/** Hide row(s) in the Grid by specifying the rIds
+* @param {Grid~RowReference | Array.<Grid~RowReference>} rowRefs
+* @param {boolean=} hidden if false, show instead of hide
+* @public
+*/
+Grid.prototype.hideRows = function (rowRefs, hidden) {
+	if (!Array.isArray(rowRefs)) {
+		rowRefs = [rowRefs];
+	}
+	let rids = rowRefs.map(this._getRowId);
+	let grid = this._mainGrid || this._grid;
+	grid.hideRows(rids, hidden);
+};
+/**
+* Show row(s) in the Grid by specifying the rIds
+* @param {Grid~RowReference | Array.<Grid~RowReference>} rowRefs
+* @param {boolean=} shown if false, hide instead of show
+* @public
+*/
+Grid.prototype.showRows = function (rowRefs, shown) {
+	this.hideRows(rowRefs, shown === false);
+};
+/**
+ * Unhide all hidden rows in the Grid
+ * @public
+ */
+Grid.prototype.unhideAllRows = function () {
+	this._grid.unhideAllRows();
+};
+/**
+* @public
+* @returns {boolean}
+*/
+Grid.prototype.hasHiddenRow = function(){
+	return this._grid.hasHiddenRow();
+};
+
+/** Set RIC to the specified row
+* @public
+* @param {Grid~RowReference} rowRef
+* @param {string} str RIC to be set to a row
+* @param {RowDefinition~Options=} options
+* @returns {RowDefinition} Returns modified Row Definition instance
+*/
+Grid.prototype.setRic = function(rowRef, str, options) {
+	if(this._mainGrid) {
+		return this._mainGrid.setRic(this._toRowId(rowRef), str, options);
+	}
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		let tempOpt = options || {};
+		if(typeof str === "string") {
+			tempOpt["ric"] = str;
+		} else {
+			if(str && !options) {
+				tempOpt = str;
+			}
+			str = tempOpt["ric"] ? tempOpt["ric"] : "";
+		}
+		let extractedOptions = RowDefinition.extractRowOptions(tempOpt);
+		let oldRic = rowDef.getSymbol();
+		if(rowDef.setContent(str, extractedOptions)) { // The given string may not be a RIC
+			this._connector.removeRic(rowDef, oldRic);
+			this._initDuplicateRicData(rowDef);
+			this._connector.addRic(rowDef);
+		}
+
+		let values = tempOpt["values"];
+		if(values != null) {
+			rowDef.setStaticRowData(values, tempOpt["fields"]);
+		}
+	}
+	return rowDef;
+};
+/** Unlink the chain and its constituents. When the chain is expanded,
+ * the chain row and its members are converted from autogenerated to
+ * regular real-time rows. Only the chain row will be transformed to
+ * a conventional real-time row if the chain is collapsed.
+ * All converted rows will continue to have their data updated.
+ *
+ * @public
+ * @param {Grid~RowReference} rowRef
+ */
+Grid.prototype.unlinkChain = function(rowRef) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(!rowDef) {
+		return;
+	}
+
+	if(!rowDef.isChain()) {
+		return;
+	}
+
+	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
+	if(childRowDefs) {
+		let len = childRowDefs.length;
+		let ridMap = {};
+		for(let i = 0; i < len; i++) {
+			ridMap[childRowDefs[i].getRic()] = "";
+		}
+		let collapsed = rowDef.isChainCollapsed();
+		let args = {
+			chain: rowDef,
+			collapsed: collapsed,
+			ridMap: ridMap
+		};
+		this._dispatch("beforeUnlinked", args);
+
+		if(!collapsed) {
+			let rowIdChanged = false;
+			let ridPair = {};
+			for(let i = 0; i < len; i++) {
+				let childRowDef = childRowDefs[i];
+				let mappedRowId = ridMap[childRowDef.getRic()];
+				if(mappedRowId) {
+					if(mappedRowId.match(RowDefinition.ROW_ID_PATTERN)) {
+						console.warn("Please change the rowId format to avoid duplicated rows' id causing unexpected behavior.");
+						mappedRowId = "";
+					} else {
+						rowIdChanged = true;
+						ridPair[childRowDef.getRowId()] = mappedRowId;
+					}
+				}
+				childRowDef.toRealTimeRow(mappedRowId);
+			}
+			if(rowIdChanged) {
+				this._dc.replaceRowIds(ridPair);
+				this._dt.replaceRowIds(ridPair);
+			}
+		} else {
+			this._removeConstituentRows(childRowDefs);
+		}
+	}
+
+	rowDef.unlinkChain();
+};
+
+/** Alias to setRic
+* @public
+* @function
+* @param {Grid~RowReference} rowRef
+* @param {string} str
+* @see {@link Grid.setRic}
+*/
+Grid.prototype.setRowContent = Grid.prototype.setRic;
+
+/**
+* @public
+* @param {string|number} rid Row Id or index
+* @param {boolean=} force
+*/
+Grid.prototype.toggleRowExpansion = function(rid, force) {
+	this._dv.toggleRowExpansion(rid, force);
+};
+/**
+* @private
+* @param {object} e
+*/
+Grid.prototype._onRowExpansionBinding = function(e) {
+	if(!this.hasListener("rowExpansionBinding")) {
+		return;
+	}
+
+	if(e["originalRowId"]) {
+		let rowIndex = this._dv.getRowIndex(e["originalRowId"]);
+		e["originalRowDef"] = this._getRowDefinitionByIndex(rowIndex);
+		e["originalRowData"] = e["originalRowDef"].getRowData();
+	} else {
+		e["rowDef"] = this._getRowDefinitionByIndex(e["rowIndex"]);
+		e["rowData"] = e["rowDef"].getRowData();
+	}
+
+	this._dispatch("rowExpansionBinding", e);
+};
+
+/** Reset existing rows. It is a combination of insertRows and removeAllRows.
+* @public
+* @param {Array.<string>} ary
+*/
+Grid.prototype.setRics = function(ary) {
+	this.removeAllRows();
+	if(ary && ary.length) {
+		this.insertRows(ary);
+	}
+};
+
+/** WARNING: This represents number of visible rows in a single grid
+* @public
+* @return {number}
+*/
+Grid.prototype.getRowCount = function() {
+	return this._dv.getRowCount();
+};
+/** Get all rows without paging
+* @public
+* @return {number}
+*/
+Grid.prototype.getPageItemCount = function() {
+	return this._dv.getRowCount(false, true);
+};
+/** WARNING: This represents number of rows in the DataTable which includes all invisible rows and rows in multiple wrapped grids
+* @public
+* @return {number}
+*/
+Grid.prototype.getDataRowCount = function() {
+	return this._dt.getRowCount();
+};
+/** @public
+* @return {number}
+*/
+Grid.prototype.getColumnCount = function() {
+	return this._grid.getColumnCount();
+};
+/** @public
+* @param {number} colIndex
+* @return {string}
+*/
+Grid.prototype.getColumnDataType = function(colIndex) {
+	let colDef = this.getColumnDefinition(colIndex);
+	if (colDef) {
+		return colDef.getDataType();
+	}
+	return '';
+};
+/** @public
+* @param {number} colIndex
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinition = function(colIndex) {
+	let colData = this._grid.getColumnData(colIndex);
+	if(colData) {
+		return /** @type{ColumnDefinition} */(colData[COL_DEF]) || null;
+	}
+	return null;
+};
+/** @public
+* @return {!Array.<ColumnDefinition>}
+*/
+Grid.prototype.getColumnDefinitions = function() {
+	let colCount = this.getColumnCount();
+	let colDefs = new Array(colCount);
+	for(let i = 0; i < colCount; i++) {
+		colDefs[i] = this.getColumnDefinition(i);
+	}
+	return colDefs;
+};
+
+/** @public
+* @param {string} colId
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionById = function(colId) {
+	if(typeof colId === "string") {
+		return this.getColumnDefinition(this.getColumnIndex(colId));
+	}
+	return null;
+};
+
+/** @public
+* @param {Array.<string>} colIds
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionsById = function(colIds) {
+	let colCount = Array.isArray(colIds) ? colIds.length : 0;
+	if(colCount > 0) {
+		let i, colId;
+		let colDefs = new Array(colCount);
+		for(i = 0; i < colCount; i++) {
+			colId = colIds[i];
+			colDefs[i] = this.getColumnDefinitionById(colId);
+		}
+		return colDefs;
+	}
+	return null;
+
+};
+/** @private
+* @param {Grid~ColumnReference} colRef
+* @return {ColumnDefinition}
+*/
+Grid.prototype._getColumnDefinition = function(colRef) {
+	if(colRef instanceof ColumnDefinition) {
+		return /** @type{!ColumnDefinition} */(colRef);
+	} else if(typeof colRef === "number") {
+		return this.getColumnDefinition(colRef);
+	} else if(typeof colRef === "string") {
+		let colCount = this.getColumnCount();
+		for(let i = 0; i < colCount; ++i) {
+			let colDef = this.getColumnDefinition(i);
+			if(_hasFieldOrId(colDef, colRef)) {
+				return colDef; // Return the first found column
+			}
+		}
+	}
+	return null;
+};
+/** @public
+* @param {number|string} rowRef Row index as shown in the view or row id (string)
+* @return {string}
+*/
+Grid.prototype.getRowType = function(rowRef) {
+	let rowDef = this.getRowDefinition(rowRef);
+	return rowDef ? rowDef.getType() : "";
+};
+/** Get RowDefinition object by either number or row id
+* @public
+* @param {number|string} rowRef Row index as shown in the view or row id (string)
+* @return {RowDefinition}
+*/
+Grid.prototype.getRowDefinition = function(rowRef) {
+	if(typeof rowRef === "number") {
+		return this._getRowDefinitionByIndex(rowRef);
+	} else if(typeof rowRef === "string") {
+		return this._getRowDefinitionById(rowRef);
+	}
+	return null;
+};
+/** @private
+* @param {number} rowIndex
+* @return {RowDefinition}
+*/
+Grid.prototype._getRowDefinitionByIndex = function(rowIndex) {
+	return this._dv.getDataAt(rowIndex, ROW_DEF) || null;
+};
+/** @private
+* @param {string} rowId
+* @return {RowDefinition}
+*/
+Grid.prototype._getRowDefinitionById = function(rowId) {
+	return this._dt.getData(rowId, ROW_DEF) || null;
+};
+/** @private
+* @param {Grid~RowReference} rowRef
+* @return {RowDefinition}
+*/
+Grid.prototype._getRowDefinitionByRef = function(rowRef) {
+	if(rowRef instanceof RowDefinition) {
+		if(rowRef.getRowId()) { // The row may have been removed from the grid
+			return /** @type{!RowDefinition} */(rowRef);
+		}
+	}
+	return this.getRowDefinition(rowRef);
+};
+/** Get all row definitions shown in the view, excluding rows that are hidden by filtering or pagination. <br>
+* A new array object is created every time. Do not call this method repeatedly.<br>
+* Group header row will return null for its rowDefinition since the row is auto generated and has no data nor definition.
+* @public
+* @return {!Array.<RowDefinition>}
+*/
+Grid.prototype.getRowDefinitions = function() {
+	return this._dv.getColumnData(ROW_DEF, true); // Include group header rows
+};
+/** Get all row definitions, including filtered and hidden rows, but without group header rows.
+* @private
+* @return {!Array.<RowDefinition>}
+*/
+Grid.prototype._getAllRowDefinitions = function() {
+	return this._dt.getColumnData(ROW_DEF); // no group header rows
+};
+
+/** Get all row definitions, including filtered and hidden rows, but without auto generated rows (i.e., group header and chain constituent).
+* @public
+* @param {boolean=} inclAutoGenerated=false Set to true to include auto generated rows. Default value is false (exclude auto generated rows)
+* @return {!Array.<RowDefinition>}
+*/
+Grid.prototype.getAllRowDefinitions = function(inclAutoGenerated) {
+	if(inclAutoGenerated) {
+		return this._getAllRowDefinitions();
+	}
+	return this._dt.getColumnData(ROW_DEF).filter(excludeAutoGenerated);
+};
+/** A shorthand to retrieve row data based on index of the specified row.
+* @public
+* @param {number} rowIndex Row index as shown in the view
+* @return {Object} "FIELD1": value1, "FIELD2": value2, ...
+*/
+Grid.prototype.getRowData = function(rowIndex) {
+	return toRowData(this._getRowDefinitionByIndex(rowIndex));
+};
+/** Get data from multiple rows. If null or undefined value is given, data from all rows are returned.
+* @public
+* @param {*=} obj The value can be rowIndex, array of row indices, array of row definitions, DataView instance, null or undefined
+* @return {!Array.<Object>}
+* @example
+* grid.getMultipleRowData(); // All row data are returned
+* grid.getMultipleRowData([0, 2, 4]); // Three row data are returned
+* grid.getMultipleRowData(1); // One row data from the specified row index is returned
+* grid.getMultipleRowData(DataView); // All row data from the specified DataView instance are returned
+*/
+Grid.prototype.getMultipleRowData = function(obj) {
+	if(typeof obj === "number") {
+		return [this.getRowData(obj)];
+	}
+	let rowDefs = null;
+	if(Array.isArray(obj)) {
+		let rowRefs = obj;
+		let rowCount = rowRefs.length;
+		let rows = new Array(rowCount);
+		rowDefs = this.getRowDefinitions();
+
+		for(let r = 0; r < rowCount; ++r) {
+			let rowRef = rowRefs[r];
+			if(typeof rowRef === "number") {
+				rows[r] = toRowData(rowDefs[rowRef]);
+			} else if(rowRef && rowRef.getRowData) {
+				rows[r] = toRowData(rowRef);
+			}
+		}
+		return rows;
+	}
+
+	if(obj && obj.getColumnData) { // Check if the given reference is DataView or DataTable
+		rowDefs = obj.getColumnData(ROW_DEF, false); // Get all row data WITHOUT group header rows
+	} else {
+		rowDefs = this.getRowDefinitions(); // Get all row definition from current view INCLUDING group header rows
+	}
+	return rowDefs.map(toRowData);
+};
+/** Set row data base on RIC.
+* @public
+* @param {string} ric
+* @param {Object} values {"FIELD1": value1, "FIELD2": value2, ...} Use null to remove current row data (not row in the view).
+*/
+Grid.prototype.setRicData = function(ric, values) {
+	let rowDefs = this._connector.getRowDefByRic(ric);
+	let rowCount = rowDefs ? rowDefs.length : 0;
+	for (let i = 0; i < rowCount; ++i) {
+		let rowDef = rowDefs[i];
+		if (rowDef && rowDef.getSymbol() === ric) {
+			rowDef.setRowData(values); // TODO: Need conflator to improve performance
+		}
+	}
+};
+/** Retrieve all RIC subscriptions. This method is not dependent on the number of rows, the RIC can vary from the current row in the grid.
+* @public
+* @return {Array.<string>}
+*/
+Grid.prototype.getAllRics = function() {
+	return this._connector.getAllRics();
+};
+
+/** Returns true if there is at least 1 RIC in the grid. This method includes RICs not in the row.
+* @public
+* @return {boolean}
+*/
+Grid.prototype.hasRic = function() {
+	return this._connector.hasRic();
+};
+/** Returns RIC of given row reference.
+* @public
+* @param {(string|number)=} rowRef
+* @return {string}
+*/
+Grid.prototype.getRic = function(rowRef) {
+	let rowDef = this.getRowDefinition(rowRef);
+	return rowDef.getRic();
+};
+/** A shorthand to set row data based on index of the specified row. It is better to keep rowDefinition object for updating data directly as row index can be changed by sorting and filtering.
+* @public
+* @param {Grid~RowReference} rowRef
+* @param {Object} values {"FIELD1": value1, "FIELD2": value2, ...} Use null to remove current row data (not row in the view).
+*/
+Grid.prototype.setRowData = function(rowRef, values) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		rowDef.setRowData(values);
+	}
+};
+
+/**
+* @public
+* @param {Grid~RowReference} rowRef
+* @param {Object} values
+*/
+Grid.prototype.setStaticRowData = function(rowRef, values) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		rowDef.setStaticRowData(values);
+	}
+};
+
+/**
+* @public
+* @param {Grid~RowReference} rowRef
+* @param {string} field
+* @param {*} value
+*/
+Grid.prototype.setStaticData = function(rowRef, field, value) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		rowDef.setStaticData(field, value);
+	}
+};
+
+/** @private
+* @param {Grid~RowReference=} rowRef
+* @return {string}
+*/
+Grid.prototype._getRowId = function(rowRef) {
+	if(typeof rowRef === "string") {
+		return rowRef;
+	} else if(typeof rowRef === "number") { // WARNING: This is view index, excluding hidden row
+		return this._dv.getRowId(rowRef);
+	} else if(rowRef instanceof RowDefinition) {
+		return rowRef.getRowId();
+	}
+	return "";
+};
+
+/** Clear all existing data from the specified column(s).
+* @public
+* @param {Grid~ColumnReference|Array.<Grid~ColumnReference>} colRefs
+*/
+Grid.prototype.clearColumnData = function(colRefs) {
+	let colIndices = this.getColumnIndices(colRefs);
+	let colCount = colIndices.length;
+	if(!colCount) {
+		return;
+	}
+	let emptyData = {};
+	for(let c = 0; c < colCount; ++c) {
+		let colIndex = colIndices[c];
+		let field = this.getColumnField(colIndex);
+		if(field) {
+			emptyData[field] = null;
+		}
+	}
+
+	let rowDefs = this.getAllRowDefinitions();
+	let rowCount = rowDefs.length;
+	for(let r = 0; r < rowCount; ++r) {
+		rowDefs[r].setRowData(emptyData); // There is a conflator caching the data change in DataCache
+	}
+};
+
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @return {number}
+*/
+Grid.prototype.getColumnIndex = function(colRef) {
+	if(colRef instanceof ColumnDefinition) {
+		let colCount = this.getColumnCount();
+		for(let i = 0; i < colCount; ++i) {
+			let colDef = this.getColumnDefinition(i);
+			if(colDef === colRef) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	return this._grid.getColumnIndex(colRef);
+};
+/** Any invalid column reference will be excluded from the output array
+* @public
+* @param {Array.<Grid~ColumnReference>} colRefs
+* @return {!Array.<number>}
+*/
+Grid.prototype.getColumnIndices = function(colRefs) {
+	let ary = [];
+	if(colRefs || colRefs === 0) {
+		let colCount = this.getColumnCount();
+		let inputAry = Array.isArray(colRefs) ? colRefs : [colRefs];
+		let len = inputAry.length;
+		// Verify user input
+		for(let i = 0; i < len; ++i) {
+			let colIndex = this.getColumnIndex(inputAry[i]);
+			if(colIndex >= 0 && colIndex < colCount) {
+				ary.push(colIndex); // WARNING: We have not checked for duplication
+			}
+		}
+	}
+	return ary;
+};
+/** Return column id that is set through configuration object
+* @public
+* @param {number} colIndex
+* @return {string} Return empty string if no existing id or column
+* @see {@link Grid#getColumnDefinition}
+*/
+Grid.prototype.getColumnId = function(colIndex) {
+	return this._grid.getColumnId(colIndex);
+};
+/** Get ids from each column definition.
+* @public
+* @return {!Array.<string>} New array is created
+*/
+Grid.prototype.getColumnIds = function() {
+	return this._grid.getColumnIds();
+};
+/** Return field defined in the column definition
+* @public
+* @param {number} colIndex
+* @return {string}
+* @see {@link Grid#getColumnDefinition}
+*/
+Grid.prototype.getColumnField = function(colIndex) {
+	return this._grid.getColumnField(colIndex);
+};
+/** Get fields from each column definition. Note that this does not include any required field or data fields. Duplicates may exist.
+* @public
+* @return {!Array.<string>} New array is created
+*/
+Grid.prototype.getColumnFields = function() {
+	return this._grid.getColumnFields();
+};
+/** Get column name from each column definition. Note that this does not include any required field or data fields. Duplicates may exist.
+* @public
+* @return {!Array.<string>} New array is created
+*/
+Grid.prototype.getColumnNames = function() {
+	return this.getColumnDefinitions().map(_getName);
+};
+/** Get all fields, including required fields and data fields, with no duplicate
+* @public
+* @return {!Array.<string>} New array is created
+*/
+Grid.prototype.getAllFields = function() {
+	return this._connector.getAllFields();
+};
+/** Freeze the column at the left side of the table starting from index 0 to the specified colIndex
+* If no index is specified (null or undefined index), unfreeze all columns.
+* @public
+* @param {number=} colIndex Negative index is equivalent to null value
+* @param {number=} pinnedRightColumns Number of columns to be pinned/snapped on the right side
+*/
+Grid.prototype.freezeColumn = function(colIndex, pinnedRightColumns) {
+	if(colIndex == null) {
+		colIndex = -1;
+	}
+	this._grid.freezeColumn(colIndex, pinnedRightColumns);
+};
+
+/** Pin column to the left side by moving the specified column to the rightmost of the frozen columns. <br>
+* The method will do nothing if the specified column is already pinned to the left side
+* @public
+* @param {Grid~ColumnReference|Array.<Grid~ColumnReference>} colRef
+* @param {string=} side Available values are: left|right. If no value is supplied, the column will be pinned to the left.
+* @return {boolean}
+*/
+Grid.prototype.pinColumn = function(colRef, side) {
+	if(Array.isArray(colRef)) {
+		let ary = colRef;
+		let len = ary.length;
+
+		let dirty = 0;
+		for(let i = 0; i < len; ++i) {
+			dirty |= this._pinColumn(ary[i], side);
+		}
+		return dirty ? true : false;
+	}
+	return this._pinColumn(colRef, side);
+};
+/** @private
+* @param {Grid~ColumnReference} colRef
+* @param {string=} side Available values are: left|right. If no value is supplied, the column will be pinned to the left.
+* @return {boolean}
+*/
+Grid.prototype._pinColumn = function(colRef, side) {
+	let colIndex = this.getColumnIndex(colRef);
+	let colCount = this.getColumnCount();
+	if(colIndex < 0 || colIndex > colCount) {
+		return false;
+	}
+
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	let stationaryIdx = this._grid.getStationaryColumnIndex();
+
+	if(side && side.toLowerCase() === "right") {
+		let rightPinnedIndex = this._grid.getFirstPinnedRightIndex();
+		if(colIndex >= rightPinnedIndex) {
+			return false; // The column is already pinned area
+		}
+
+		if(stationaryIdx >= 0 && colIndex <= stationaryIdx) {
+			return false;
+		}
+
+		this.moveColumnById(colIndex, rightPinnedIndex);
+		rightPinnedCount += 1;
+		leftPinnedCount -= 1;
+	} else {
+		if(colIndex < leftPinnedCount) {
+			return false; // The column is already pinned area
+		}
+		if(!leftPinnedCount) {
+			if(stationaryIdx >= 0) {
+				leftPinnedCount = stationaryIdx;
+				if(colIndex > stationaryIdx) {
+					leftPinnedCount++;
+				}
+			}
+		}
+		this.moveColumnById(colIndex, leftPinnedCount);
+	}
+
+	this._grid.freezeColumn(leftPinnedCount, rightPinnedCount);
+	return true;
+};
+/** Unpin column from the left side by moving the specified column to the end of the frozen columns. <br>
+* The method will do nothing if the specified column is not pinned on the left side.
+* @public
+* @param {Grid~ColumnReference|Array.<Grid~ColumnReference>} colRef
+* @param {Grid~ColumnReference=} dest The unpinned column will be placed before the destination position after the operation
+* @return {boolean}
+*/
+Grid.prototype.unpinColumn = function(colRef, dest) {
+	if(Array.isArray(colRef)) {
+		let ary = colRef;
+		let len = ary.length;
+
+		let dirty = 0;
+		for(let i = len; --i >= 0;) { // WARNING: unpinning is done in reversed order
+			dirty |= this._unpinColumn(ary[i], dest);
+		}
+		return dirty ? true : false;
+	}
+	return this._unpinColumn(colRef, dest);
+};
+/** @private
+* @param {Grid~ColumnReference} colRef
+* @param {Grid~ColumnReference=} dest The unpinned column will be placed before the destination position after the operation
+* @return {boolean}
+*/
+Grid.prototype._unpinColumn = function(colRef, dest) {
+	let colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) {
+		return false;
+	}
+
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	let colCount = this.getColumnCount();
+	let firstRightPinnedIndex = colCount - rightPinnedCount;
+
+	if(colIndex >= leftPinnedCount && colIndex < firstRightPinnedIndex) {
+		return false;
+	}
+
+	let srcId = null;
+	let destId = null;
+	if(dest != null) {
+		let destIdx = this.getColumnIndex(dest);
+		destId = this.getColumnId(destIdx);
+		srcId = this.getColumnId(colIndex);
+	}
+
+	let stationaryIdx = this._grid.getStationaryColumnIndex();
+
+	if(colIndex < leftPinnedCount) {
+		if(colIndex > stationaryIdx) {
+			this.moveColumnById(colIndex, leftPinnedCount);
+		}
+
+		this._grid.freezeColumn(leftPinnedCount - 2, rightPinnedCount); // Column index is used for freezing
+	} else if(colIndex >= firstRightPinnedIndex) {
+		if(colIndex > stationaryIdx) {
+			this.moveColumnById(colIndex, firstRightPinnedIndex);
+		}
+
+		this._grid.freezeColumn(leftPinnedCount - 1, rightPinnedCount - 1); // Column index is used for freezing
+	}
+
+	if(colIndex > stationaryIdx) {
+		if(destId != null) {
+			this.moveColumnById(srcId, destId);
+		}
+	}
+
+	return true;
+};
+/** A shorthand to unpin all columns from the left hand side
+* @public
+* @return {boolean}
+*/
+Grid.prototype.unpinAllColumns = function() {
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	if(!leftPinnedCount && !rightPinnedCount) {
+		return false;
+	}
+	this._grid.freezeColumn(-1, 0); // Column index is used for left freezing and column count is used for right freezing
+	return true;
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onColumnHeaderBinding = function(e) {
+	if(e["sectionType"] !== "title" || e["sectionIndex"] > 0) {
+		return; // WARNING: Assume that only the first title section is owned by the grid. Anything else is assumed to be generated by plugins
+	}
+
+	let c = e["fromColIndex"];
+	let toC = e["toColIndex"];
+	while(c < toC) {
+		this._renderColumnHeader(c++, e);
+	}
+};
+/** @private
+* @param {number=} colIndex
+* @param {Object} arg
+*/
+Grid.prototype._renderColumnHeader = function(colIndex, arg) {
+	let colDef = this.getColumnDefinition(colIndex);
+	if(!colDef) {
+		return;
+	}
+	let customRenderer = colDef.getHeaderRenderer();
+	let tSection = arg.section;
+	let rowCount = tSection.getRowCount();
+	arg["colIndex"] = colIndex;
+	arg["columnDef"] = colDef;
+
+	let colName = colDef.getName();
+	let colTooltip = colDef.getTooltip();
+	let headerAlignment = colDef.getHeaderAlignment();
+	let tooltipValue = colDef.getTooltipValue();
+
+	for(let r = 0; r < rowCount; ++r) {
+		let tCell = tSection.getCell(colIndex, r, false);
+		// Default behaviors
+		tCell.setContent(colName);
+		tCell.setTooltipInfo("columnDefault", tooltipValue);
+		tCell.setTooltipInfo("columnTooltip", colTooltip);
+		tCell.updateTooltip();
+		tCell.setStyle("textAlign", headerAlignment);
+
+		if(customRenderer) {
+			arg["rowIndex"] = r;
+			arg["cell"] = tCell;
+			customRenderer(arg);
+		}
+	}
+};
+/** @public
+*/
+Grid.prototype.updateColumnTitle = function() {
+	if(this._columnTitleConflator.conflate()) {
+		return;
+	}
+	let tss = this._grid.getSectionSettings("title"); // WARNING: Assume that only the first title section is owned by the grid
+	if(tss) {
+		tss.rerender();
+	}
+};
+/** @public
+* @return {boolean}
+*/
+Grid.prototype.isSorting = function() {
+	return this._stp.isSorting();
+};
+/** @public
+* @return {number}
+*/
+Grid.prototype.getSortedColumnIndex = function() {
+	return this._stp.getSortedColumnIndex();
+};
+/** @public
+* @return {string} "a" for "ascending, "d" for descending, and "n" for none/noOrder
+*/
+Grid.prototype.getSortOrder = function() {
+	return this._stp.getSortOrder();
+};
+/** @public
+*/
+Grid.prototype.clearSort = function() {
+	this._stp.clearSortState(); // WARNING: No event is dispatched
+};
+/** Get sorting states from sorting columns
+* @public
+* @return {!Array.<Object>} Array of sorting states ordered by priority. If there is no sorting column, an empty array is returned
+*/
+Grid.prototype.getSortingStates = function () { // This method is mainly for backward compatability
+	let ary = [];
+	let states = this._stp.getSortingStates();
+	let stateCount = states.length;
+
+	for (let i = 0; i < stateCount; i++) {
+		let state = states[i];
+		let colIndex = this._stp.getSortedColumnIndex(i);
+
+		ary.push({
+			"colId": this.getColumnId(colIndex),
+			"colIndex": colIndex,
+			"order": state["sortOrder"]
+		});
+	}
+
+	return ary;
+};
+
+/**
+* @private
+* @param {Object} e Event object from quote2
+*/
+Grid.prototype._onQuote2PostUpdate = function (e) {
+	if(e.childOrderChange) { // For dynamic chain when CHILD_ORDER from the server change, it will be call sort children
+		if(!this.isSorting()) {
+			// Use rowDef for get CHILD_ORDER to sort
+			this._dt.sortOnce("ROW_DEF", "a", _sortChildrenOfChain);
+		}
+	}
+};
+
+/**
+* @private
+* @param {Object} e
+ */
+Grid.prototype._onQ2DataChanged = function (e) {
+	let rowDef = this._getRowDefinitionById(e["subId"]);
+	if(!rowDef) {
+		return; // WARNING: This should not be happened because row has been removed but the data is still received
+	}
+
+	let ric = e["ric"];
+	let values = e["values"];
+	if (values) {
+		let duplicateRics = null;
+		if(rowDef.verifyConstituent(ric)) {
+			let parentDef = rowDef;
+			let childDef = parentDef.getConstituent(ric);
+			if(childDef) { // The constituent will share the same sub id as its parent
+				rowDef = childDef;
+			} else {
+				rowDef = childDef = parentDef.addConstituent(ric);
+				if(!childDef) {
+					return; // Parent chain is not alive
+				}
+				duplicateRics = this._connector.getRowDefByRic(ric);
+				this._connector.addRic(childDef); // TODO: JET/RTK should not re-subscribe this
+				if(!this._constituentMap) {
+					this._constituentMap = {};
+				}
+				this._constituentMap[childDef.getRowId()] = childDef;
+				this._registerConstituents(childDef);
+			}
+		}
+
+		if(duplicateRics && duplicateRics.length) {
+			let duplicateRic = duplicateRics[0];
+			duplicateRic.cloneRowData(values, values);
+		}
+
+		rowDef.setRowData(values); // Trigger data changes
+	} else { // The constituent is requested to be removed by the real-time data provider
+		let childDef = rowDef.getConstituent(ric); // WARNING: normal ric and its delayed version must match with the one first given
+		if(childDef) {
+			childDef.setParent(null); // Manually remove child reference from its parent
+			this._removeRow(childDef);
+		}
+	}
+};
+
+/** @private
+* @param {RowDefinition} rowDef
+*/
+Grid.prototype._registerConstituents = function(rowDef) {
+	if(this._chainConflator.conflate(rowDef)) {
+		return;
+	}
+
+	this._constituentMap = null;
+
+	let view = this._dv;
+	let dt = view ? view.getDataSource() : null;
+	if(!dt) {
+		return;
+	}
+
+	let childDefs = this._chainConflator.popAllData(); // This must have no duplication
+	let childCount = childDefs ? childDefs.length : 0;
+
+	// Validate row definition and collect its info
+	let i;
+	let validDefs = [];
+	let maxCountMap = {};
+	for(i = 0; i < childCount; ++i) {
+		let childDef = childDefs[i];
+		let parentDef = childDef.getParent();
+		if(!parentDef) {
+			break; // A constituent without parent cannot be added to the view
+		}
+		let parentRowId = parentDef.getRowId();
+		let maxCount = maxCountMap[parentRowId];
+		if(maxCount == null) {
+			maxCount = maxCountMap[parentRowId] = parentDef.countChildInView();
+		}
+		validDefs.push(childDef);
+	}
+
+	childCount = validDefs.length;
+	if(!childCount) {
+		return;
+	}
+
+	let prevState = false;
+	if(childCount > 1) {
+		prevState = this._dt.freeze(); // Avoid sorting for each insertion
+	}
+
+	for(i = 0; i < childCount; ++i) {
+		let childDef = validDefs[i];
+		let parentDef = childDef.getParent();
+		let parentRowId = parentDef.getRowId();
+		let maxCount = maxCountMap[parentRowId];
+
+		// TODO: Handle nested children
+		view.addSegmentChild(parentRowId, childDef.getRowId());
+
+		// Added order and child order can be different
+		// CHILD_ORDER value from real-time service indicates the order of constituents.
+		let destIndex = dt.getRowIndex(parentRowId) + 1; // WARNING: Not checking for negative index
+		let childOrder = childDef.getData("CHILD_ORDER"); // CHILD_ORDER starts from 0
+		if(childOrder != null && childOrder < maxCount) {
+			destIndex += childOrder;
+		} else {
+			destIndex += maxCount;
+		}
+		let destRowId = dt.getRowId(destIndex);
+		childDef.registerToView(view, destRowId);
+		maxCountMap[parentRowId] = maxCount + 1; // Since new child has been added to the view, maxCount has to be updated
+	}
+	if(childCount > 1) {
+		this._dt.freeze(prevState);
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onDataChanged = function(e) {
+	if(!this._dt) {
+		return;
+	}
+	if(e) {
+		if(e["initialChanges"] && !this._dt.hasSegmentClassification()) {
+			return;
+		}
+
+		// TODO: Insertion should also be addressed here.
+		if(e["rid"] && e["changes"]) {
+			let rowDef = this._getRowDefinitionById(e["rid"]);
+			if(rowDef) {
+				if(rowDef.addUpdate(e["changes"])) { // This is the only place that update array can grow. It is used for blinking data.
+					this._hasNewUpdates = true; // Mark data table for cleaning it up later
+				}
+			}
+		}
+	}
+
+	if(this._dcConflator.conflate()) {
+		return;
+	}
+
+	this._dt.classifySegments();
+	this._dt.dispatchGlobalChange();
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onPreDataSorting = function (e) {
+	let objs = this._stp.getSortedColumns();
+
+	this._sorter.reset();
+	if(Array.isArray(objs)) {
+		let sortCount = objs.length;
+		for(let i = 0; i < sortCount; ++i) {
+			let obj = objs[i];
+			let field = obj["field"] || ""; // This supports "sortBy" option (sort by another column)
+			let colIndex = obj["colIndex"];
+			let colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
+
+			let rowSorting = false;
+			let sortLogic = null;
+			if(colDef) {
+				if(!field) {
+					field = colDef.getField(); // WARNING: Field and logic could be out of sync
+				}
+				rowSorting = colDef.isRowSorting();
+				sortLogic = colDef.getSorter();
+			}
+			// TODO: get sortLogic from DataView
+			// if(!sortLogic && field) {
+			// sortLogic = state["sortLogic"];
+			// }
+
+			this._sorter.addColumnContext(field, sortLogic, rowSorting, obj["sortOrder"], colIndex, colDef);
+		}
+	}
+
+	this._columnSorter = this._sorter.getSorter();
+};
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} order
+* @return {number}
+*/
+Grid.prototype._mainSorter = function (rowDefA, rowDefB, order) {
+	return this._columnSorter(rowDefA, rowDefB, order);
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onPostSectionDataBinding = function(e) {
+	if(e["actualUpdate"]) {
+		this._asyncClearDataUpdates();
+	}
+};
+/** @private
+*/
+Grid.prototype._asyncClearDataUpdates = function() {
+	setTimeout(this._clearDataUpdates, 0);
+};
+/** @private
+*/
+Grid.prototype._clearDataUpdates = function() {
+	if(!this._dt || !this._hasNewUpdates) {
+		return;
+	}
+	this._hasNewUpdates = false;
+	let rowIds = this._dt.getAllRowIds(true); // Use shallow copy for speed
+	for(let i = rowIds.length; --i >= 0;) {
+		let rowData = this._dt.getRowData(rowIds[i]);
+		let rowDef = rowData[ROW_DEF];
+		rowDef.resetUpdates();
+	}
+};
+
+/** @public
+* @return {DataView}
+*/
+Grid.prototype.getDataView = function() {
+	return this._dv;
+};
+/** @public
+* @param {number} pageIndex
+* @return {boolean}
+*/
+Grid.prototype.setPage = function(pageIndex) {
+	return this._dv.setPage(pageIndex);
+};
+/** @public
+* @param {number} size
+*/
+Grid.prototype.setPageSize = function(size) {
+	this._dv.setPageSize(size);
+};
+/** @public
+* @return {number}
+*/
+Grid.prototype.getPageIndex = function() {
+	return this._dv.getPageIndex();
+};
+/** @public
+* @return {number}
+*/
+Grid.prototype.getPageSize = function() {
+	return this._dv.getPageSize();
+};
+/** @public
+* @return {number}
+*/
+Grid.prototype.getPageCount = function() {
+	return this._dv.getPageCount();
+};
+
+/** @description Toggle between expanded and collapsed chain index
+ * @public
+ * @param {Grid~RowReference} rowRef
+ */
+Grid.prototype.toggleChain = function(rowRef) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		rowDef.toggleChain();
+	}
+};
+/**
+ * @public
+ * @param {Grid~RowReference} rowRef
+ * @param {Array.<string>} fields
+ * @return {boolean}
+ */
+Grid.prototype.setClassification = function(rowRef, fields) {
+	let rowDef = this._getRowDefinitionByRef(rowRef);
+	if(rowDef) {
+		return this._dt.setSegmentClassification(rowDef.getRowId(), fields);
+	}
+	return false;
+};
+
+/** Check element in the grid element
+ * @public
+ * @param {Element} elem
+ * @return {boolean}=true if an element from the parameter is inside a grid element
+ */
+Grid.prototype.contains = function(elem) {
+	if(elem) {
+		// This will impact the contents within the rt-grid element, but not those outside of it, such as the wrapper elements atlas-blotter and ef-grid.
+		return this._topNode.contains(elem);
+	}
+	return false;
+};
+
+/** Check grid element is focused
+ * @public
+ * @return {boolean}
+ */
+Grid.prototype.isFocused = function() {
+	let activeElement = document.activeElement;
+	if(!activeElement || !activeElement.shadowRoot) {
+		// active element is not in the shadow DOM. try using contains method to check
+		return this.contains(activeElement);
+	}
+ 	// For wrapper scenarios, such as atlas-blotter or efx-grid
+	return activeElement.shadowRoot === this._topNode.parentNode;
+};
+/** @description Focus grid element without moving window scrollbar
+ * @public
+ */
+Grid.prototype.focus = function() {
+	this._grid.focus();
+};
+/** Request re-rendering of content row by triggering data binding event without any change in data model
+ * @public
+ */
+Grid.prototype.requestRowRefresh = function() {
+	this._grid.requestRowRefresh();
+};
+/** Force recalculation of grid's layout
+ * @public
+ */
+Grid.prototype.updateLayout = function() {
+	this._grid.updateLayout();
+};
+/** Get extension instance
+* @public
+* @param {string} str Extension name
+* @return {*} Returns null, if the specified extension does not exist
+*/
+Grid.prototype.getExtension = function(str) {
+	if(str) {
+		return this._grid.getPlugin(str.replace(/Extension/ig, ""));
+	}
+	return null;
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onFormulaDataChanged = function(e) {
+	if (this._formulaConflator.conflate()) {
+		return;
+	}
+
+	// TODO: Check if we need to recompose the data in the data composed method
+	this._recalculateFormulas(); // Force recalculation of user formula
+	this._updateRowData(); // Re-render the data
+};
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onFormulaDataRequired = function(e) {
+	// if(obj["field"]) {
+	// this._registerFieldToDataProvider(obj); TODO
+	// if(this._dataRequiredTimerId) {
+	// window.clearTimeout(this._dataRequiredTimerId);
+	// }
+	// this._dataRequiredTimerId = window.setTimeout( this._recalculateFormulas, 0); // Force recalculation of all rows
+	// }
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onDataComposed = function(e) {
+	let changes = e["changes"];
+	if(!changes) {
+		if(e["initialChanges"]) {
+			changes = e["changes"] = e["initialChanges"]; // Need to keep e["changes"] for backward compatibility.
+		} else {
+			return; // Cannot do data composition if there is no change in data
+		}
+	}
+
+	let rowData = e["rowData"];
+	if(!rowData) {
+		return; // Row could already be removed or global change event is sent
+	}
+
+	let rowId = e["rid"];
+	let rowDef = e["rowDef"] || this._getRowDefinitionById(rowId);
+	if(!rowDef) {
+		rowDef = this._constituentMap ? this._constituentMap[rowId] : null; // Row def could be in pending for adding to view
+		if(!rowDef) {
+			return; // Somehow the given row id is invalid
+		}
+		if(rowDef.isDisposed()) {
+			this._constituentMap[rowId] = null;
+			return;
+		}
+	}
+
+	if(this._autoDateConversion) { // auto data conversion
+		let dataType;
+		for(let field in changes) {
+			let colDef = this._getColumnDefinition(field);
+			if(colDef) {
+				dataType = colDef.getDataType();
+			} else {
+				dataType = ColumnDefinition.getDataType(field);
+			}
+
+			if(dataType === "datetime") {
+				let value = rowData[field];
+				rowDef.setData(field + "_RAW", value);
+				value = DateTime.toDateObject(value);
+				rowDef.setData(field, value); // TODO: Check if this trigger data change multiple times
+			}
+		}
+	}
+
+	if(this.hasListener("dataComposed")) {
+		e["grid"] = this;
+		e["rowDef"] = rowDef;
+		this._dispatch("dataComposed", e);
+	}
+
+	this._recalculateFormulas(e);
+};
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onSubSegmentChanged = function(e) {
+	let insertionList = /** @type{Array.<Segment>} */(e["insertionList"]);
+	let removalList = /** @type{Array.<string>} */(e["removalList"]);
+	let removedRows = /** @type{Object} */(e["removedRows"]);
+
+	let i;
+	let removalCount = removalList.length;
+	let rowDef = null;
+	for(i = 0; i < removalCount; i++) {
+		let rid = removalList[i];
+		let removedRow = removedRows[rid];
+		if(removedRow) {
+			rowDef = removedRow[ROW_DEF];
+			if(rowDef) {
+				rowDef.dispose();
+				removedRow[ROW_DEF] = null;
+			}
+		}
+	}
+
+	let insertionCount = insertionList.length;
+	for(i = 0; i < insertionCount; i++) {
+		let segment = insertionList[i];
+		// let parentId = segment.getParentId();
+		let segmentId = segment.getId();
+		rowDef = new RowDefinition({
+			"segmentId": segmentId // WARNING: This could cause row id duplication
+		});
+		if(rowDef.setDataSource(this._dc)) { // auto generated row does not require a subscription
+			this._hasNewUpdates = true; // Mark data table for cleaning it up later
+		}
+		rowDef.registerToView(this._dv);
+	}
+};
+
+/** @private
+* @param {Object=} e
+*/
+Grid.prototype._recalculateFormulas = function(e) {
+	if(!this._fnEngine || this._fnEngine.getFormulaCount() <= 0) {
+		return;
+	}
+
+	if(e && e["rid"]) {
+		this._fnEngine.calculate(/** @type{Object.<string, *>} */ (e["rowData"]), /** @type{Object.<string, *>} */ (e["changes"]));
+	} else {
+		let rows = this._dc ? this._dc.getAllRowData() : null; // Slow
+
+		let rowCount = rows ? rows.length : 0;
+		for(let r = 0; r < rowCount; ++r) { // WARNING: This is very slow
+			this._fnEngine.calculate(rows[r]);
+		}
+	}
+};
+
+/** @private
+* @param {Object} e The updated data from snapshot filler when it request data from JET/RTK
+*/
+Grid.prototype._snapshotFillerDataChanged = function (e) {
+	if (!this._dt) return;
+
+	let data = e.data;
+	if(e.timeSeries) {
+		this._updateTimeSeriesFields(e); // Increase or decrease time series field
+	} else {
+		for (let ric in data) {
+			this.setRicData(ric, data[ric]);
+		}
+	}
+
+	if(!this._lastPollingRequest) { // This is the first time we receive successful ADC response
+		this._lastPollingRequest = 1; // Allow polling to be started
+	}
+	this._startPolling();
+};
+/** @private
+*/
+Grid.prototype._startPolling = function () {
+	if(this._pollingEnabled && this._pollingInterval) {
+		if(this._lastPollingRequest && !this._pollingTimerId) {
+			let now = new Date();
+			this._lastPollingRequest = now.getTime();
+			this._pollingTimerId = setTimeout(this._onPollingInterval, this._pollingInterval);
+		}
+	}
+};
+/** @private
+*/
+Grid.prototype._onPollingInterval = function () {
+	this._pollingTimerId = 0;
+	if(this._pollingEnabled && this._pollingInterval) {
+		this.refreshADCData();
+		this._startPolling();
+	}
+};
+/** @public
+* @param {boolean=} activated=true
+*/
+Grid.prototype.activateADCPolling = function (activated) {
+	if(activated !== false) {
+		this._pollingEnabled = true;
+		// Make immediate request after re-activation if it has been a long time
+		let now = new Date();
+		if(this._lastPollingRequest) {
+			let diff = now.getTime() - this._lastPollingRequest;
+			if(diff > this._pollingInterval) {
+				this.refreshADCData();
+			}
+		}
+		this._startPolling();
+	} else {
+		this._pollingEnabled = false;
+	}
+};
+/** Force re-requesting ADC data to immediately update the data
+* @public
+* @return {boolean} Return true, if a request has been made
+*/
+Grid.prototype.refreshADCData = function () {
+	let dirty = this._snapshot.addFields(this._connector.getAllFields());
+	if(dirty) {
+		dirty = this._snapshot.addRics(this._connector.getAllRics());
+		if(dirty) {
+			return true;
+		}
+	}
+	this._lastPollingRequest = 0; // No ADC field or RIC detected. Prevent polling from continuing
+	return false;
+};
+
+/** @private
+*/
+Grid.prototype._onAutoLayoutUpdate = function() {
+	let elem = this._topNode;
+
+	let cw = elem.clientWidth;
+	if(cw !== this._clientWidth) {
+		this._clientWidth = cw;
+		this.updateLayout();
+	}
+};
+
+/** @description Log DataTable to console. By default, this will log only fields specified in the column definition. To see other column data use "colNames" options
+ * @public
+ * @param {Object=} opt_options { "colNames": Array.<string>, "rowCount": number, "startIndex": number, "getter": function(Object, string):* }
+ */
+Grid.prototype.logDT = function(opt_options) {
+	let rowDefs = this._getAllRowDefinitions();
+	this._logData(rowDefs, opt_options);
+};
+/** @description Log DataView to console. By default, this will log only fields specified in the column definition. To see other column data use "colNames" options
+ * @public
+ * @param {Object=} opt_options { "colNames": Array.<string>, "rowCount": number, "startIndex": number, "getter": function(Object, string):* }
+ * @example
+// Options have the following format:
+// {
+//    "colNames": Array.<string>,
+//    "rowCount": number,
+//    "startIndex": number,
+//    "getter": function(rowData:Object, colName:string):*,
+//    "withRowIds": boolean
+// }
+grid.logDV({"rowCount": 10}); // Showing 10 records
+ */
+Grid.prototype.logDV = function(opt_options) {
+	let rowDefs = this.getRowDefinitions();
+	this._logData(rowDefs, opt_options);
+};
+/** Log the collection of data to console
+ * @private
+ * @param {!Array.<RowDefinition>} rowDefs
+ * @param {Object=} options
+ */
+Grid.prototype._logData = function(rowDefs, options) {
+	if(!options) {
+		options = {};
+	}
+	if(!options["colNames"]) {
+		// TODO: Get all required fields and eliminate duplicate fields
+		options["colNames"] = this.getColumnFields();
+	}
+	let tbl = DataCache.constructTable(rowDefs.map(toRowData), options);
+
+	console.table(tbl); // eslint-disable-line
+};
+
+/** @public
+* @description Replace existing row by a new row. Row Id is always changed, after the row is replaced.
+* If the rowId of the new row is identical to that of the replacing row. Grid will do nothing because
+* similar rowIds indicate that they are the same row.
+* @param {Grid~RowReference} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
+* @param {(RowDefinition~Options|string)=} rowOption
+* @returns {RowDefinition} Returns null, if the row is not replaced. Otherwise, a newly created row is returned
+*/
+Grid.prototype.replaceRow = function(rowRef, rowOption) {
+	let insertPos = this._getRowId(rowRef);
+	let rowDef = this._getRowDefinitionById(insertPos);
+
+	if(rowDef) {
+		if(rowDef.isAutoGenerated()) {
+			return null; // Users cannot replace an auto-generated row
+		}
+
+		let configObj = rowDef.getConfigObject();
+		if(rowDef.getRowId() === rowOption["rowId"]) {
+			return null; // Cannot replace a row with the same row id
+		}
+
+		if(deepEqual(configObj, rowOption)){
+			return null;
+		}
+	}
+
+	let newRow = this.insertRow(rowOption, insertPos);
+	if(rowDef) {
+		this.removeRow(insertPos);
+	}
+	return newRow;
+};
+
+/** Scroll the view to the specified column. If the column is already in the view, nothing happens. If the column is outside of the view, the view will be moved to the column with some additional offsets
+* @public
+* @param {number} colIndex
+* @param {boolean=} leftOfView Default is false. If true, the specified column will be put at the leftmost of the view (no offset)
+* @returns {boolean} Return true, if there is any change
+*/
+Grid.prototype.scrollToColumn = function (colIndex, leftOfView) {
+	return this._grid.scrollToColumn(colIndex, leftOfView);
+};
+/** Scroll the view to the specified row. If the row is already in the view, nothing happens. If the row is outside of the view, the view will be moved to the row with some additional offsets
+* @public
+* @param {number} rowIndex
+* @param {boolean=} topOfView=false If true, the specified row will be put at the top of the view (no offset)
+*/
+Grid.prototype.scrollToRow = function (rowIndex, topOfView) {
+	this._grid.scrollToRow("content", rowIndex, topOfView);
+};
+
+/** Get scroll value in pixel from the horizontal scrollbar
+* @public
+* @returns {number} pixels
+*/
+Grid.prototype.getScrollLeft = function () {
+	return this._grid.getScrollLeft();
+};
+/** Get scroll value in pixel from the vertical scrollbar
+* @public
+* @returns {number} pixels
+*/
+Grid.prototype.getScrollTop = function () {
+	return this._grid.getScrollTop();
+};
+
+/** Set scroll value to the horizontal scrollbar. This will move the scrollbar to specific position
+* @public
+* @param {number} pixels
+* @see {@link Grid.scrollRight}
+*/
+Grid.prototype.setScrollLeft = function (pixels) {
+	this._grid.setScrollLeft(pixels);
+};
+/** Set scroll value to the vertical scrollbar. This will move the scrollbar to specific position
+* @public
+* @param {number} pixels
+* @see {@link Grid.scrollDown}
+*/
+Grid.prototype.setScrollTop = function (pixels) {
+	this._grid.setScrollTop(pixels);
+};
+
+/** Scroll the view to the right by the specified value. Use negative value to scroll the view to the left
+* @public
+* @param {number} pixels
+* @see {@link Grid.setScrollLeft}
+*/
+Grid.prototype.scrollRight = function (pixels) {
+	this._grid.scrollRight(pixels);
+};
+/** Scroll the view down by the specified value. Use negative value to scroll the view to the top
+* @public
+* @param {number} pixels
+* @see {@link Grid.setScrollTop}
+*/
+Grid.prototype.scrollDown = function (pixels) {
+	this._grid.scrollDown(pixels);
+};
+
+/** Get width of scrollable area from the horizontal scrollbar. This is useful for determining the end of scrollbar
+* @public
+* @returns {number}
+*/
+Grid.prototype.getScrollWidth = function () {
+	return this._grid.getScrollWidth();
+};
+/** Get height of scrollable area from the vertical scrollbar. This is useful for determining the end of scrollbar
+* @public
+* @returns {number}
+*/
+Grid.prototype.getScrollHeight = function () {
+	return this._grid.getScrollHeight();
+};
+
+/** Get information about current grid's view and the vertical scrollbar
+* @public
+* @returns {Object} Returns null, if vertical scrollbar does not exists
+*/
+Grid.prototype.getVScrollView = function () {
+	return this._grid.getVScrollView();
+};
+
+/** @private
+* @param {Object} cell
+* @param {Object} args
+* @return {boolean}
+*/
+Grid.prototype._focusCell = function(cell, args) {
+	if(cell) {
+		let cellContent = cell.getContent();
+		if(cellContent) {
+			let nfe = null;
+			if(this.hasListener("tabNavigation")) {
+				let tabNavArg = {
+					"shiftKey": args.shiftKey,
+					"activeElement": args.activeElement,
+					"cellContent": cellContent,
+					"cell": cell,
+					"colIndex": args.colIndex,
+					"rowIndex": args.rowIndex,
+					"field": args.fields ? args.fields[args.colIndex] : ""
+				};
+				this._dispatch("tabNavigation", tabNavArg);
+				nfe = tabNavArg.nextFocusableElement;
+			} else if(cellContent.tagName !== "SPAN") {
+				nfe = cellContent;
+			}
+
+			if(nfe && nfe !== args.activeElement && !nfe.disabled) {
+				nfe.focus();
+				return true;
+			}
+		}
+	}
+	return false;
+};
+/** @private
+*/
+Grid.prototype._onVScroll = function() {
+	let args = this._focusingArgs;
+	if(args) {
+		args.timeoutId = _clearTimeout(args.timeoutId);
+		this._focusingArgs = null;
+		let cell = this._grid.getCell("content", args.colIndex, args.rowIndex);
+		if(!this._focusCell(cell, args)) {
+			if(args.shiftKey) {
+				this._focusPrevCellContent(args);
+			} else {
+				this._focusNextCellContent(args);
+			}
+		}
+	}
+};
+/** @private
+*/
+Grid.prototype._onScrollTimeout = function() {
+	this._focusingArgs = null;
+};
+/** @private
+*/
+Grid.prototype._selfScrollToRow = function() {
+	let args = this._focusingArgs;
+	if(args) {
+		args.id = 0;
+		this.scrollToRow(args.rowIndex);
+	}
+};
+/** @private
+* @param {Object} args
+*/
+Grid.prototype._requestScroll = function(args) {
+	if(!this._focusingArgs) {
+		this._focusingArgs = args;
+		args.event = null; // The event is invalid after the scroll
+		args.id = setTimeout(this._selfScrollToRow, 0); // Avoid event loop protection
+		args.timeoutId = setTimeout(this._onScrollTimeout, 100); // To avoid a fail case where scroll cannot be performed
+	}
+};
+/** @private
+* @param {Object} args
+*/
+Grid.prototype._focusNextCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
+
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = 0;
+	let i;
+	if(colIndex >= 0) {
+		for(i = 1; i < len; i++) {
+			if(colIndex < focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+
+	let grid = this._grid;
+	let section = grid.getSection("content");
+	let viewInfo = grid.getVerticalViewInfo();
+	let lastFullRow = viewInfo.lastFullRow;
+	let rowCount = this.getRowCount();
+
+	args.fields = grid.getColumnFields();
+	for(let r = rowIndex; r < rowCount; r++) {
+		args.rowIndex = r;
+		for(i = startIdx; i < len; i++) {
+			let c = focusableColIndices[i];
+			args.colIndex = c;
+			if(r > lastFullRow) {
+				_preventDefault(args.event);
+				this._requestScroll(args);
+				return;
+			} else {
+				let cell = section.getCell(c, r);
+				if(this._focusCell(cell, args)) {
+					_preventDefault(args.event);
+					return;
+				}
+			}
+		}
+		startIdx = 0;
+	}
+
+	// The current focus on the last focusable content
+	this._grid.getHiddenInput().focus();
+};
+/** @private
+* @param {Object} args
+*/
+Grid.prototype._focusPrevCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
+
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = len - 1;
+	let i;
+	if(colIndex >= 0) {
+		for(i = len - 1; --i >= 0;) {
+			if(colIndex > focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+
+	let grid = this._grid;
+	let section = grid.getSection("content");
+	let viewInfo = grid.getVerticalViewInfo();
+	let firstFullRow = viewInfo.firstFullRow;
+
+	args.fields = this.getColumnFields();
+	for(let r = rowIndex; r >= 0; r--) {
+		args.rowIndex = r;
+		for(i = startIdx; i >= 0; i--) {
+			let c = focusableColIndices[i];
+			args.colIndex = c;
+			if(r < firstFullRow) {
+				_preventDefault(args.event);
+				this._requestScroll(args);
+				return;
+			} else {
+				let cell = section.getCell(c, r);
+				if(this._focusCell(cell, args)) {
+					_preventDefault(args.event);
+					return;
+				}
+			}
+		}
+		startIdx = len - 1;
+	}
+
+	// The current focus on the last focusable content
+	this._grid.getHiddenInput(true).focus();
+};
+
+/** @private
+* @param {Object} e
+*/
+Grid.prototype._onTabNavigation = function(e) {
+	if(this._focusingArgs) {
+		return; // Cannot do another tab navigation while waiting for scrolling
+	}
+
+	let colDefs = this.getColumnDefinitions();
+	let colCount = colDefs.length;
+
+	let focusableColIndices = [];
+	for(let c = 0; c < colCount; c++) {
+		if(colDefs[c].isFocusable()) {
+			focusableColIndices.push(c);
+		}
+	}
+
+	if(!focusableColIndices.length) {
+		return;
+	}
+
+	let keyEvt = e.event;
+	let pos = this.getRelativePosition(keyEvt);
+	let startingRowIndex = pos["rowIndex"];
+	if(e.onTheEdge) {
+		let viewInfo = this._grid.getVerticalViewInfo();
+		startingRowIndex = keyEvt.shiftKey ? viewInfo.lastFullRow : viewInfo.firstFullRow;
+	}
+	let args = {
+		event: keyEvt,
+		shiftKey: keyEvt.shiftKey,
+		colIndex: pos["colIndex"],
+		rowIndex: startingRowIndex,
+		focusableColIndices: focusableColIndices,
+		activeElement: e.activeElement
+	};
+
+	if(keyEvt.shiftKey) {
+		this._focusPrevCellContent(args);
+	} else {
+		this._focusNextCellContent(args);
+	}
+};
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+Grid.prototype._getEventHandlers = function() {
+	return {
+		"tabNavigation": this._onTabNavigation,
+		"q2DataChanged": this._onQ2DataChanged
+	};
+};
+
+export { Grid };
+export default Grid;