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

package/lib/tr-grid-util/es6/GridPlugin.js

@@ -0,0 +1,1055 @@
+import {Ext} from "./Ext.js";
+import {EventDispatcher} from "./EventDispatcher.js";
+import {Deferred} from "./Deferred.js";
+import {injectCss} from "./Util.js";
+import {ElfUtil} from "./ElfUtil.js";
+
+/** This class is designed to be a base class for other tr.Grid plug-ins. It provide commonly used functionalities by the plug-ins.
+* @constructor
+* @extends {EventDispatcher}
+* @example
+* import {Ext} from "../../node_modules/tr-grid-util/src/Ext.js";
+* import {GridPlugin} from "../../node_modules/tr-grid-util/src/GridPlugin.js";
+*
+* let SomePlugin = function() {};
+* Ext.inherits(SomePlugin, GridPlugin);
+*/
+let GridPlugin = function() {};
+Ext.inherits(GridPlugin, EventDispatcher);
+
+/** @type {Array.<tr.Grid>}
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._hosts = null;
+/** This is for backward compatible with tr.CompositeGrid
+* @type {tr.CompositeGrid}
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._compositeGrid = null;
+/** @type {tr.rt.Grid}
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._realTimeGrid = null;
+/** @type {Function}
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._rowGetter = null;
+/** Indicates that columns, rows, and components in the primary grid have been initialized
+* @type {boolean}
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._initializedGrid = false;
+
+
+/** Alias to {@link EventDispatcher#addEventListener}
+* @public
+* @function
+* @param {string} type Event name
+* @param {Function} handler Event handler
+*/
+GridPlugin.prototype.listen = GridPlugin.prototype.addEventListener;
+/** Alias to {@link EventDispatcher#removeEventListener}
+* @public
+* @function
+* @param {string} type Event name
+* @param {Function} handler Event handler
+*/
+GridPlugin.prototype.unlisten = GridPlugin.prototype.removeEventListener;
+
+/** This is for Composite Grid support. Do NOT override this method. Use protected _afterInit() instead.
+* @public
+* @param {Element=} elem Root element
+* @param {Object=} model Composite grid object model
+* @param {tr.CompositeGrid=} grid Composite grid control
+*/
+GridPlugin.prototype.afterInit = function(elem, model, grid) {
+	let core = null;
+	if(grid && grid["getCoreGrid"]) {
+		core = grid["getCoreGrid"]();
+	}
+
+	if(core) {
+		if(!this.getGridApi()) {
+			this.setGridWrapper("compositegrid", grid); // Plugin is loaded in afterInit for composite grid
+		}
+		if(this._compositeGrid) {
+			core.loadPlugin(this, model); // Allow sharing extension/plugin
+		}
+	}
+
+
+	if(!this._initializedGrid) { // Calling _afterInit only once per extension/plugin
+		this._initializedGrid = true;
+		this._rowGetter = this._realTimeGrid ? rowDefRowGetter : defaultRowGetter;
+		this._afterInit();
+	}
+};
+/** This method guarantees that grid (host) and config have been set. It should be used to update any setting that requires different implementation between Composite grid and Real-time grid
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._afterInit = function() {};
+
+/** This method is meant to be used by a derived class to release any resource hold by GridPlugin. Do not override this method.
+* @protected
+* @ignore
+*/
+GridPlugin.prototype._dispose = function() {
+	if(this._hosts) {
+		if(!this._hosts.length) {
+			this._compositeGrid = this._realTimeGrid = null;
+			this._initializedGrid = false;
+		}
+	}
+};
+
+
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+GridPlugin.prototype.hasMultiTableSupport = function() {
+	return false;
+};
+
+/** Executed before dispatching, allowing modification of user's event argument object.
+* @protected
+* @ignore
+* @param {string} type Event name
+* @param {Object} eventArg User's event argument object
+* @return {Object} New event argument object
+*/
+GridPlugin.prototype._prepareEventArguments = function(type, eventArg) {
+	if(!eventArg) {
+		eventArg = {};
+	}
+	eventArg.api = this.getGridApi();
+	return eventArg;
+};
+
+/** Get plugin/extension name. This should be unique as it will be used for duplicate protection. Derived class must override this method.
+* @public
+* @return {string}
+*/
+GridPlugin.prototype.getName = function () {
+	return "GridPlugin"; // Readonly
+};
+/** This is the entry point where Core grid instance has been initialized and grid configuration object is passed to the extension. Derived class should override this method to keep reference of Core grid for later referencing.
+* @public
+* @param {tr.Grid} host Core grid instance
+* @param {Object=} gridOptions Grid configuration object
+*/
+GridPlugin.prototype.initialize = function (host, gridOptions) {};
+/** This is where Core grid instance is being disposed. Derived class should override this method to release any resource hold by this plugin/extension, if the last core grid is being disposed (there will be multiple instances for multi-table mode).
+* @public
+* @param {tr.Grid=} host Core grid instance
+*/
+GridPlugin.prototype.unload = function (host) {
+	this._dispose();
+};
+
+/** Get Core grid instance from the given object (usually an Event Argument object).
+* @public
+* @param {Event|Element|tr.IElementControl} e
+* @return {tr.Grid}
+*/
+GridPlugin.prototype.getRelativeGrid = function (e) {
+	let targetEl = null;
+	if(e.target) { // The Given object is an Event
+		targetEl = /** @type{Element} */(e.target);
+		let gridAPI = targetEl["api"];
+		if(gridAPI && gridAPI["getCoreGrid"]) {
+			return /** @type{tr.Grid} */(gridAPI["getCoreGrid"]());
+		}
+	} else if(e["getElement"]) { // The Given object is implementing tr.IElementControl
+		targetEl = /** @type{Element} */(e["getElement"]());
+	} else if(e.nodeType === 1) { // The Given object is just an element
+		targetEl = /** @type{Element} */(e);
+	}
+
+	if(targetEl) {
+		for(let i = this._hosts.length; --i >= 0;) {
+			let host = this._hosts[i];
+			if(host.getElement().contains(targetEl)) {
+				return host;
+			}
+		}
+	}
+	return null;
+};
+
+/** @public
+* @param {string} gridType
+* @param {*} wrapperInstance
+*/
+GridPlugin.prototype.setGridWrapper = function (gridType, wrapperInstance) {
+	if(gridType) {
+		gridType = gridType.toLowerCase();
+		if(gridType === "compositegrid") {
+			this._compositeGrid = wrapperInstance;
+		} else if(gridType === "realtimegrid") {
+			this._realTimeGrid = wrapperInstance;
+		}
+	}
+};
+/** Get JavaScript wrapper instance. This could be either composite grid or real-time grid.
+* @public
+* @param {(number|Object)=} coreRef An index of the core grid or an instance of the core grid
+* @return {*} wrapperInstance
+*/
+GridPlugin.prototype.getGridApi = function (coreRef) {
+	if(coreRef == null) {
+		return this._compositeGrid || this._realTimeGrid;
+	} else {
+		let host = (typeof coreRef == "number") ? this._hosts[coreRef] : coreRef;
+		return host ? (host._wrapper || null) : null;
+	}
+};
+
+/** Get user specified column label (e.g. name) or field, if name does not exist
+* @public
+* @param {number|string} colRef Column index or column Id
+* @return {string}
+*/
+GridPlugin.prototype.getColumnName = function (colRef) {
+	if(this._compositeGrid) {
+		let colOptions = this._compositeGrid.getColumnModel(colRef);
+		if(colOptions) {
+			if(colOptions.title) {
+				return colOptions.title;
+			} else {
+				return colOptions.field;
+			}
+		}
+	} else {
+		let colIndex = this.getColumnIndex(colRef);
+		let colDef = this._realTimeGrid.getColumnDefinition(colIndex);
+		if(colDef) {
+			return colDef.getName();
+		}
+	}
+	return "";
+};
+/** @public
+* @param {number|string} colRef Column id, field name or column index
+* @return {number}
+*/
+GridPlugin.prototype.getColumnIndex = function (colRef) {
+	// TODO: Unify the below logics
+	if(typeof colRef === "number") {
+		return colRef;
+	}
+	if(this._compositeGrid) {
+		let allFields = this._compositeGrid.getColumnFields();
+		let colIndex = allFields.indexOf(colRef);
+		if(colIndex > -1) {
+			return colIndex;
+		} else {
+			return this._compositeGrid.getColumnIndex(colRef);
+		}
+	} else {
+		return this._realTimeGrid.getColumnIndex(colRef);
+	}
+};
+/** @public
+* @param {Array.<number|string>} colRefs A collection of column ids, field names or column indices
+* @return {Array.<number>} column indices
+*/
+GridPlugin.prototype.getColumnIndices = function (colRefs) {
+	let api = this.getGridApi();
+	if(api.getColumnIndices) {
+		return api.getColumnIndices(colRefs);
+	}
+
+	// TODO: Unify the below logics
+	if(this._compositeGrid) {
+		let allFields = this._compositeGrid.getColumnFields();
+		let columnCount = this._compositeGrid.getColumnCount();
+		let columnIndices = [];
+		let colRef;
+		for (let i = 0; i < colRefs.length; i++) {
+			colRef = colRefs[i];
+			if(typeof colRef === 'number') { // When user pass index
+			  if(colRef >= 0 && colRef < columnCount) {
+			  	columnIndices.push(colRef);
+			  }
+			} else {
+				let columnIndex = allFields.indexOf(colRef); // Looping check column index of colRefs field
+				if(columnIndex !== -1) {
+					columnIndices.push(columnIndex);
+				}
+			}
+		}
+		return columnIndices;
+	} else {
+		return this._realTimeGrid.getColumnIndices(colRefs);
+	}
+};
+/** @public
+* @param {number|string} colIndex Column index or column Id
+* @return {string}
+*/
+GridPlugin.prototype.getColumnId = function (colIndex) {
+	// TODO: Unify the below logics
+	if(typeof colIndex === "string") {
+		return colIndex;
+	}
+
+	let colCount = this.getColumnCount();
+	if(colIndex < 0 || colIndex >= colCount) { // Avoid creating undesired column definitions in Core Grid.
+		return "";
+	}
+
+	if(this._compositeGrid) {
+		return this._compositeGrid.getColumnId(colIndex);
+	} else {
+		let colDef = this._realTimeGrid.getColumnDefinition(colIndex);
+		if(colDef) {
+			return colDef.getId();
+		}
+	}
+	return "";
+};
+/** @public
+* @return {!Array.<string>} Return all column ids from existing column
+*/
+GridPlugin.prototype.getColumnIds = function () {
+	if(this._hosts && this._hosts.length) {
+		return this._hosts[0].getColumnIds();
+	}
+	return [];
+};
+/** @public
+* @param {number} colIndex
+* @return {string} Return empty string if the specified column does not exist
+*/
+GridPlugin.prototype.getColumnField = function (colIndex) {
+	if(this._hosts && this._hosts.length) {
+		return this._hosts[0].getColumnField(colIndex);
+	}
+	return "";
+};
+/** @public
+* @return {!Array.<string>} Return all column fields from existing column
+*/
+GridPlugin.prototype.getColumnFields = function () {
+	if(this._hosts && this._hosts.length) {
+		return this._hosts[0].getColumnFields();
+	}
+	return [];
+};
+/** @public
+* @return {number}
+*/
+GridPlugin.prototype.getColumnCount = function() {
+	if(this._hosts) {
+		let g = this._hosts[0];
+		return g ? g.getColumnCount() : 0;
+	}
+	return 0;
+};
+/** @protected
+* @ignore
+* @param {number|string} srcCol Column Id or index
+* @param {(number|string)=} destCol Column Id or index of the destination
+* @return {boolean}
+*/
+GridPlugin.prototype._moveColumnById = function (srcCol, destCol) {
+	let hosts = this._hosts;
+	let len = hosts ? hosts.length : 0;
+	if(len) {
+		let dirty = 0;
+		for(let i = 0; i < len; ++i) {
+			dirty |= hosts[i].moveColumnById(srcCol, destCol);
+		}
+		return dirty ? true : false;
+	}
+	return false;
+};
+/** @protected
+* @ignore
+* @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
+*/
+GridPlugin.prototype._reorderColumns = function (colRefs, destCol) {
+	let hosts = this._hosts;
+	let len = hosts ? hosts.length : 0;
+	if(len) {
+		let dirty = 0;
+		for(let i = 0; i < len; ++i) {
+			dirty |= hosts[i].reorderColumns(colRefs, destCol);
+		}
+		return dirty ? true : false;
+	}
+	return false;
+};
+
+/** @protected
+* @deprecated
+* @ignore
+* @param {*} curPlugin
+* @param {tr.Grid} host
+* @param {string} pluginName
+* @return {*} curPlugin
+*/
+GridPlugin.prototype._loadPlugin = function (curPlugin, host, pluginName) {
+	if(!curPlugin) {
+		curPlugin = host.getPlugin(pluginName);
+		if(!curPlugin) {
+			curPlugin = host.loadPlugin(pluginName);
+			if(curPlugin && this._initializedGrid) {
+				curPlugin._initializedGrid = true; // WARNING: Accessing private member
+			}
+		}
+	}
+	return curPlugin;
+};
+/** WARNING: Call this method only in _afterInit method to ensure existence of composite grid and real-time grid
+* @protected
+* @ignore
+* @param {tr.Grid} host
+* @param {*} pluginRef
+* @param {Object=} configObj
+* @return {Promise}
+*/
+GridPlugin.prototype._requestPlugin = function (host, pluginRef, configObj) {
+	if(this._initializedGrid) {
+		return GridPlugin.requestPlugin(host, pluginRef, configObj, this._compositeGrid, this._realTimeGrid);
+	}
+	return Promise.reject("Plugin should be requested after the initialization");
+};
+/** Make a request to load a plugin/extension into the given core grid (tr-grid). Return a promise of plugin/extension instance
+* @public
+* @param {*} ref This can be ef-grid, atlas-blotter, composite grid, real-time grid, or core grid.
+* @param {*} pluginRef Plugin/Extension name or instance
+* @param {Object=} configObj
+* @param {*=} compositeGrid
+* @param {*=} realTimeGrid
+* @return {Promise}
+*/
+GridPlugin.requestPlugin = function (ref, pluginRef, configObj, compositeGrid, realTimeGrid) {
+	let core = null;
+	if(ref) {
+		let gridWrapper = null;
+		if(ref.nodeType === 1) { // This is an element
+			// TODO: Support delayed resolving
+			gridWrapper = ref.api; // Grid element must already be initialized and configured
+		} else if(ref.getCoreGrid) {
+			gridWrapper = ref;
+		} else if(ref.getPlugin) {
+			core = ref;
+		}
+		if(gridWrapper) {
+			core = gridWrapper.getCoreGrid();
+			if(!compositeGrid && !realTimeGrid) {
+				if(gridWrapper.getModel) {
+					compositeGrid = gridWrapper;
+				} else {
+					realTimeGrid = gridWrapper;
+				}
+			}
+		}
+	}
+
+	if(!core) {
+		return Promise.reject("Cannot find grid element");
+	}
+
+	let curPlugin = core.getPlugin(pluginRef);
+	if(curPlugin) {
+		return Promise.resolve(curPlugin);
+	} else {
+		let d = new Deferred();
+		setTimeout(GridPlugin._onPluginRequested.bind(null, {
+			grid: core,
+			pluginRef: pluginRef,
+			compositeGrid: compositeGrid,
+			realTimeGrid: realTimeGrid,
+			config: configObj,
+			deferred: d
+		}), 10);
+		return d.promise;
+	}
+};
+/** @private
+* @param {Object} ctx
+* @return {Promise.<*>} Promise of plugin object
+*/
+GridPlugin._onPluginRequested = function (ctx) {
+	let grid = ctx.grid;
+	if(!grid.getElement()) {
+		return ctx.deferred.reject("Grid has been disposed before the plugin is fully loaded: " + ctx.pluginRef);
+	}
+
+	let curPlugin = grid.getPlugin(ctx.pluginRef);
+	if(curPlugin) {
+		return ctx.deferred.resolve(curPlugin);
+	}
+
+	let beforeInitPerformed = false;
+	if(ctx.pluginRef.beforeInit) { // WARNING: beforeInit is usually performed before the actual loading
+		beforeInitPerformed = true;
+		ctx.pluginRef.beforeInit(grid.getElement(), ctx.config, true);
+	}
+
+	curPlugin = grid.loadPlugin(ctx.pluginRef, ctx.config);
+	if(!curPlugin) {
+		return ctx.deferred.reject("Unable to load required dependency: " + ctx.pluginRef);
+	}
+
+	if(!beforeInitPerformed && curPlugin.beforeInit) { // WARNING: beforeInit is usually performed before the actual loading
+		curPlugin.beforeInit(grid.getElement(), ctx.config);
+	}
+	if(curPlugin.setGridWrapper) {
+		if(ctx.compositeGrid) {
+			curPlugin.setGridWrapper("compositegrid", ctx.compositeGrid);
+		} else if(ctx.realTimeGrid) {
+			curPlugin.setGridWrapper("realtimegrid", ctx.realTimeGrid);
+		}
+	}
+	if(curPlugin.afterInit) {
+		curPlugin.afterInit();
+	}
+	return ctx.deferred.resolve(curPlugin);
+};
+/** @protected
+* @ignore
+* @param {string} pluginName
+* @param {tr.Grid=} grid
+* @return {*}
+*/
+GridPlugin.prototype._getPlugin = function(pluginName, grid) {
+	if(grid == null) {
+		grid = this._hosts[0];
+	}
+	return (grid) ? grid.getPlugin(pluginName) : null;
+};
+
+/** @protected
+* @ignore
+* @param {number} colIndex
+* @param {tr.Grid=} grid
+* @return {Object}
+*/
+GridPlugin.prototype._getColumnData = function(colIndex, grid) {
+	if(grid == null) {
+		grid = this._hosts[0];
+	}
+	return grid ? grid.getColumnData(colIndex) : null;
+};
+/** @protected
+* @ignore
+* @param {number} colIndex
+* @param {string} prop
+* @param {tr.Grid=} grid
+* @return {*}
+*/
+GridPlugin.prototype._getColumnOption = function(colIndex, prop, grid) {
+	let colData = this._getColumnData(colIndex, grid);
+	if(colData) {
+		return colData[prop];
+	}
+	return null;
+};
+/** @protected
+* @ignore
+* @param {number} colIndex
+* @param {tr.Grid=} grid
+* @return {!Object}
+*/
+GridPlugin.prototype._newColumnData = function(colIndex, grid) {
+	if(grid == null) {
+		grid = this._hosts[0];
+	}
+	if(!grid) {
+		return {};
+	}
+
+	let colData = grid.getColumnData(colIndex);
+	if(!colData) {
+		colData = grid.setColumnData(colIndex, {});
+	}
+	return colData;
+};
+/** @protected
+* @ignore
+* @param {number} colIndex
+* @return {string}
+*/
+GridPlugin.prototype._getField = function(colIndex) {
+	let gridInst = this._compositeGrid || this._realTimeGrid;
+	if (gridInst) {
+		return gridInst.getColumnField(colIndex);
+	}
+	return "";
+};
+/** Note that this method is quite misleading and not consistent with other API method. Please avoid using it. We will deprecate this in the future. <br>
+* Use _rowGetter instead
+* @protected
+* @ignore
+* @deprecated
+* @param {Object} dvRowData { "a": 10, "c": 21 }
+* @return {Object}
+*/
+GridPlugin.prototype._getRowData = function(dvRowData) {
+	if(this._realTimeGrid) {
+		if(dvRowData) {
+			return dvRowData["ROW_DEF"].getRowData();
+		}
+	}
+	return dvRowData;
+};
+/** @protected
+* @ignore
+* @param {tr.DataView} dv
+* @param {number} rowIndex
+* @return {Object} dvRowData
+*/
+GridPlugin.prototype._getRow = function(dv, rowIndex) {
+	return rowGetter(dv.getRowDataAt(rowIndex));
+};
+/** @protected
+* @ignore
+* @param {tr.DataView} dv
+* @param {number} rowIndex
+* @param {string} field
+* @return {*}
+*/
+GridPlugin.prototype._getData = function(dv, rowIndex, field) {
+	let row = this._getRow(dv, rowIndex);
+	return row ? row[field] : undefined; // eslint-disable-line
+};
+/** @protected
+* @ignore
+* @param {tr.DataView|tr.DataTable} dv
+* @param {number|string} rowRef Row index or row id
+* @param {string} field
+* @param {*} val
+*/
+GridPlugin.prototype._setData = function(dv, rowRef, field, val) {
+	if(this._realTimeGrid) {
+		let rowDef = _toRowDef(dv, rowRef);
+		if(rowDef) {
+			rowDef.setData(field, val);
+		}
+	} else {
+		if(typeof rowRef === "number") {
+			dv.setDataAt(rowRef, field, val);
+		} else {
+			dv.setData(rowRef, field, val);
+		}
+	}
+};
+/** @protected
+* @ignore
+* @param {tr.DataView|tr.DataTable} dv
+* @param {number|string} rowRef Row index or row id
+* @param {Object} rowData
+*/
+GridPlugin.prototype._setRowData = function(dv, rowRef, rowData) {
+	if(this._realTimeGrid) {
+		let rowDef = _toRowDef(dv, rowRef);
+		if(rowDef) {
+			rowDef.setRowData(rowData);
+		}
+	} else {
+		if(typeof rowRef === "number") {
+			dv.setRowDataAt(rowRef, rowData);
+		} else {
+			dv.setRowData(rowRef, rowData);
+		}
+	}
+};
+/** @protected
+* @ignore
+* @param {tr.DataView|tr.DataTable} dv
+* @param {number|string} rowRef Row index or row id
+* @param {string} field
+* @param {*} value
+*/
+GridPlugin.prototype._setStaticData = function(dv, rowRef, field, value) {
+	if(this._realTimeGrid) {
+		let rowDef = _toRowDef(dv, rowRef);
+		if(rowDef) {
+			rowDef.setStaticData(field, value);
+		}
+	} else {
+		// TODO: composite grid should be has staticValues when get configObject, wait for request feature
+		this._setData(dv, rowRef, field, value);
+	}
+};
+
+/** Set data in a column manner. This is faster than repeatedly calling this._setData
+* @protected
+* @ignore
+* @param {tr.DataView|tr.DataTable} dv
+* @param {string} cid
+* @param {*} valueList
+* @param {Array.<string>=} ridList Specify row id to be set corresponding to the data item
+* @example
+* this._setColumnData(dv, "column 1", ["data1", "data2", "data3"]);
+* this._setColumnData(dv, "column 1", 10, ["rowId1", "rowId2]);
+*/
+GridPlugin.prototype._setColumnData = function (dv, cid, valueList, ridList) { // Data changed event may be dispatched
+	if(!cid) {
+		return;
+	}
+
+	let rids = Array.isArray(ridList) ? ridList : dv.getAllRowIds(true);
+	let rowCount = rids ? rids.length : 0;
+	if(!rowCount) {
+		return;
+	}
+	if(rowCount === 1) {
+		this._setData(
+			dv,
+			rids[0],
+			cid,
+			Array.isArray(valueList) ? valueList[0] : valueList
+		);
+		return;
+	}
+	let vals = Array.isArray(valueList) ? valueList : rids.map(function() { return valueList; });
+
+	if(this._realTimeGrid) {
+		for(let i = 0; i < rowCount; ++i) {
+			let dvRowData = dv.getRowData(rids[i]);
+			if(dvRowData) {
+				let rowDef = dvRowData["ROW_DEF"];
+
+				if(rowDef){
+					// WARNING: This does not trigger dataChanged and dataComposed on the DataCache
+					rowDef.getRowData()[cid] = vals[i];
+				}
+			}
+		}
+		if(!dv.dispatchGlobalChange) {
+			dv = dv.getDataSource(); // Get DataTable
+		}
+		// Force rendering by dispatching global change
+		if(dv && dv.dispatchGlobalChange) {
+			dv.dispatchGlobalChange();
+		}
+	} else {
+		dv.setColumnData(cid, vals, rids);
+	}
+};
+
+/** @protected
+* @ignore
+* @param {number} colIndex
+* @param {string=} id
+* @param {Function=} renderer
+*/
+GridPlugin.prototype._activateColumnRenderer = function(colIndex, id, renderer) {
+	// TODO: Support multiple Grids
+	if (colIndex == null) {
+		return;
+	}
+
+	let rtGrid = this._realTimeGrid;
+	if (rtGrid) {
+		rtGrid.activateColumnRenderer(colIndex, id, renderer);
+	} else {
+		if (typeof renderer === "function") {
+			this._hosts[0].setColumnDataBindingHandler(colIndex, renderer);
+		} else {
+			this._hosts[0].setColumnDataBindingHandler(colIndex, null);
+		}
+	}
+};
+
+/** @private
+* @function
+*/
+let _emptyFunc = function(){};
+/** @private
+* @type {Object.<string, number>}
+* @constant
+*/
+let KEY_MAP = {
+	"left": 37,
+	"right": 39,
+	"up": 38,
+	"down": 40,
+	"backspace": 8,
+	"tab": 9,
+	"enter": 13,
+	"esc": 27,
+	"escape": 27,
+	"space": 32,
+	"pageup": 33,
+	"pagedown": 34,
+	"del": 46,
+	"delete": 46
+};
+/** @public
+* @ignore
+* @param {number=} colIndex
+* @param {number=} rowIndex
+* @param {Object=} context
+* @return {!Object}
+*/
+GridPlugin.prototype._mockMouseEvent = function(colIndex, rowIndex, context) {
+	if (colIndex == null) {
+		colIndex = 0;
+	}
+
+	if (rowIndex == null) {
+		rowIndex = 0;
+	}
+
+	let evt = context ? context : {};
+	evt.preventDefault = _emptyFunc;
+	evt.stopPropagation = _emptyFunc;
+
+	if (colIndex >= 0 && rowIndex >= 0) {
+		let grid = this._activeGrid || this._hosts[0];
+		let cell = grid ? grid.getCell(evt.sectionType || "content", colIndex, rowIndex) : null;
+		evt.target = cell ? cell.getElement() : null;
+	}
+
+	return evt;
+};
+/** @public
+* @ignore
+* @param {number|string} keyCode
+* @param {Object=} context
+* @return {!Object}
+*/
+GridPlugin.prototype._mockKeyboardEvent = function(keyCode, context) {
+	let evt = context ? context : {};
+	evt.preventDefault = _emptyFunc;
+	evt.stopPropagation = _emptyFunc;
+
+	if (typeof keyCode === "string") {
+		let predefinedCode = KEY_MAP[keyCode.toLowerCase()] || 0;
+		keyCode = predefinedCode ? predefinedCode : keyCode.charCodeAt(0);
+	}
+	evt.keyCode = keyCode;
+
+	return evt;
+};
+
+/** @type {Object}
+* @private
+*/
+GridPlugin._staticStyles = {};
+
+/** @type {Object}
+* @private
+*/
+GridPlugin._themeLoaders = {};
+
+/** @private
+* @param {Function} styleCalculator
+* @param {Object} colors
+*/
+GridPlugin._themeLoadSuccess = function(styleCalculator, colors) {
+	let extName = this.getName();
+	let styles = GridPlugin._staticStyles[extName] = styleCalculator(colors);
+	this.applyStyles(styles, extName);
+};
+
+/** @public
+* @param {Function} styleCalculator
+*/
+GridPlugin.prototype.applyStaticStyles = function(styleCalculator) {
+	let extName = this.getName();
+	let styles = GridPlugin._staticStyles[extName];
+	if (!styles) {
+		if (styleCalculator) {
+			if (!GridPlugin._themeLoaders[extName]) {
+				GridPlugin._themeLoaders[extName] = ElfUtil.getThemeColors();
+			}
+			GridPlugin._themeLoaders[extName]
+				.then(GridPlugin._themeLoadSuccess.bind(this, styleCalculator));
+		}
+	} else {
+		this.applyStyles(styles, extName);
+	}
+};
+
+/** @public
+* @param {string} cssString
+* @param {string=} nameSpace
+* @param {boolean=} replaceable This allows the injected CSS to be replaceable (removable)
+*/
+GridPlugin.prototype.applyStyles = function(cssString, nameSpace, replaceable) {
+	if (!nameSpace) {
+		nameSpace = this.getName();
+	}
+
+	let intNameSpace = "_style" + nameSpace;
+
+	let hosts = this._hosts;
+	let len = hosts.length;
+	if (!len) {
+		return;
+	}
+
+	let i, host;
+	if (!replaceable) {
+		for (i = 0; i < len; i++) {
+			host = hosts[i];
+			if (!host[intNameSpace]) {
+				injectCss(cssString, host.getElement());
+				host[intNameSpace] = true;
+			}
+		}
+	} else {
+		for (i = 0; i < len; i++) {
+			host = hosts[i];
+			this.revokeStyles(host, nameSpace);
+			host[intNameSpace] = injectCss(cssString, host.getElement());
+		}
+	}
+};
+
+/** @public
+* @param {Object} host
+* @param {string} nameSpace
+*/
+GridPlugin.prototype.revokeStyles = function(host, nameSpace) {
+	if (!host || !nameSpace) {
+		return;
+	}
+
+	nameSpace = "_style" + nameSpace;
+	let styleTag = host[nameSpace];
+	if (styleTag && styleTag.nodeType === 1) {
+		styleTag.parentNode.removeChild(styleTag);
+		host[nameSpace] = null;
+	}
+};
+
+/** Export the plugin to the given object by attaching it to tr and tr.grid namespaces
+* @public
+* @function
+* @param {Window|Object} winObj
+* @param {GridPlugin} plugin
+* @example
+* import {exportExtension} from "../node_modules/tr-grid-util/src/GridPlugin.js";
+* import {SomePlugin} from "./js/SomePlugin.js";
+* exportExtension(window, SomePlugin);
+* console.log(tr.grid.SomePlugin); // tr.grid.SomePlugin is added to window scope
+* console.log(tr.SomeExtension); // tr.SomeExtension is added to window scope
+*/
+let exportExtension = function(winObj, plugin) {
+	if(!winObj || !plugin) { return; }
+	if(!plugin.prototype["getName"]) { return; }
+	let pluginName = plugin.prototype["getName"]().replace(/Plugin$/, "");
+	if(!pluginName) { return; }
+
+	let trNamespace = winObj["tr"]; // For supporting composite grid extension scheme
+	if(!trNamespace) {
+		trNamespace = winObj["tr"] = {};
+	}
+	let gridNamespace = trNamespace["grid"]; // For supporting grid plugin scheme
+	if(!gridNamespace) {
+		gridNamespace = trNamespace["grid"] = {};
+	}
+
+	gridNamespace[pluginName + "Plugin"] = plugin;
+	trNamespace[pluginName + "Extension"] = plugin;
+};
+
+/** @private
+* @function
+* @param {tr.DataView|tr.DataTable} dv
+* @param {number|string} rowRef Row index or row id
+* @return {*} RowDefinition instance
+*/
+let _toRowDef = function(dv, rowRef) {
+	let dvRowData = (typeof rowRef === "number") ? dv.getRowDataAt(rowRef) : dv.getRowData(rowRef);
+	if(dvRowData) {
+		return dvRowData["ROW_DEF"] || null;
+	}
+	return null;
+};
+
+/** @public
+* @function
+* @param {string} field
+* @param {Object} dvRowData Row data from tr.DataView
+* @return {*} Data value returned from the specified row and field
+*/
+let defaultDataGetter = function (field, dvRowData) {
+	return dvRowData[field];
+};
+/** @public
+* @function
+* @param {string} field
+* @param {Object} dvRowData Row data from tr.DataView
+* @return {*} Data value returned from the specified row and field
+*/
+let rowDefDataGetter = function (field, dvRowData) {
+	let rowData = dvRowData["ROW_DEF"].getRowData();
+	return (rowData) ? rowData[field] : null;
+};
+/** @public
+* @function
+* @param {Object} dvRowData
+* @return {Object} Row data Nothing is changed
+*/
+let defaultRowGetter = function (dvRowData) {
+	return dvRowData;
+};
+/** @public
+* @function
+* @param {Object} dvRowData Row data from tr.DataView
+* @return {Object} Row data
+*/
+let rowDefRowGetter = function (dvRowData) {
+	return dvRowData ? dvRowData["ROW_DEF"].getRowData() : null;
+};
+/** This is slower version of row getter. It is intended for ease of use.
+* @public
+* @function
+* @param {Object} dvRowData Row data from tr.DataView
+* @return {Object} Row data
+*/
+let rowGetter = function (dvRowData) {
+	if(dvRowData) {
+		let rowDef = dvRowData["ROW_DEF"];
+		return rowDef ? rowDef.getRowData() : dvRowData;
+	}
+	return null;
+};
+
+/** @public
+* @function
+* @param {string} field
+* @param {tr.DataTable} dt
+* @return {!Array.<Object>} Array of row data
+*/
+let colDataGetter = function(field, dt) {
+	let rowDefs = dt.getAllRowData();
+	let rowCount = rowDefs.length;
+	let rows = new Array(rowCount);
+	for(let i = 0; i < rowCount; ++i) { // WARNING: No data checking
+		rows[i] = rowDefDataGetter(field, rowDefs[i]);
+	}
+	return rows;
+};
+
+export default GridPlugin;
+export {
+	GridPlugin,
+	exportExtension,
+
+	defaultDataGetter,
+	rowDefDataGetter,
+
+	defaultRowGetter,
+	rowDefRowGetter,
+	rowGetter,
+
+	colDataGetter
+};