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

package/lib/core/es6/grid/VirtualizedLayoutGrid.js

@@ -0,0 +1,1241 @@
+/* eslint-disable */
+import Ext from "../../../tr-grid-util/es6/Ext.js";
+import TrackLayout from "./util/TrackLayout.js";
+import SelectionList from "./util/SelectionList.js";
+import Reverter from "./util/Reverter.js";
+import ILayoutGrid from "./ILayoutGrid.js";
+import LayoutGrid from "./LayoutGrid.js";
+import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
+import CellBoundPainter from "./util/CellBoundPainter.js";
+/* eslint-enable */
+
+
+/** @constructor
+ * @ignore
+ * @param {Object=} options
+ * @extends {ElementWrapper}
+*/
+let VirtualizedLayoutGrid = function (options) {
+	let _t = this;
+	_t._onRestingPosition = _t._onRestingPosition.bind(_t);
+	_t._updateRowBounds = _t._updateRowBounds.bind(_t);
+
+	_t._element = document.createElement("div");
+	_t._element.className = "tr-vlg section";
+
+	if(!options) {
+		options = {};
+	}
+	if(options["horizontalScrollbar"]) {
+		_t._hscrollbar = options["horizontalScrollbar"];
+	}
+	options["owner"] = this;
+
+	_t._grid = new LayoutGrid(options);
+	_t._grid.setParent(_t._element);
+
+	_t._layoutY = new TrackLayout();
+	_t._selectionList =  new SelectionList();
+	_t._reverter = new Reverter(_t._onRestingPosition, 200); // WORKAROUND: GRID-402
+
+	_t._addEvent("rowHighlighted");
+	_t._addEvent("rowCountChanged");
+	_t._addEvent("rowHeightChanged");
+	_t._addEvent("rowAvailable");
+};
+Ext.inherits(VirtualizedLayoutGrid, ElementWrapper);
+
+
+/**
+ * @private
+ * @type {number}
+ */
+VirtualizedLayoutGrid.prototype._index = -1;
+
+/** Number of rows offsetting from the first section
+ * @private
+ * @type {number}
+ */
+VirtualizedLayoutGrid.prototype._rowOffset = 0;
+/** For virtualization in Y-Axis
+ * @private
+ * @type {number}
+ */
+VirtualizedLayoutGrid.prototype._firstIndex = 0;
+
+/** @private
+* @type {!LayoutGrid}
+*/
+VirtualizedLayoutGrid.prototype._grid;
+
+/** @private
+* @type {!TrackLayout}
+*/
+VirtualizedLayoutGrid.prototype._layoutY;
+
+/** @private
+ * @type {SelectionList}
+ */
+VirtualizedLayoutGrid.prototype._selectionList = null;
+
+/** @type {Reverter}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._reverter = null;
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundCache = null;
+/** @type {boolean}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowSelDirty = false;
+/** @type {Object}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cellBoundPainter = null;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundTimer = 0;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._boundLayer = null;
+/** @type {HScrollbar}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._hscrollbar = null;
+/** @type {string}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._session = "A";
+/** @type {Array<boolean>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._tempRowHeights = null;
+
+//#region ====== Override ElementWrapper ======//
+/** @override */
+VirtualizedLayoutGrid.prototype.getWidth = function () {
+	if(this.isVisible()) {
+		return this._grid.getWidth();
+	}
+	return 0;
+};
+/** @override */
+VirtualizedLayoutGrid.prototype.getHeight = function () {
+	if (this.isVisible()) {
+		return this._element.offsetHeight;
+	}
+	return 0;
+};
+/** @override */
+VirtualizedLayoutGrid.prototype.dispose = function () {
+	this.setRowCount(0); // Fire rowCountChanged
+	this.unlistenAll();
+
+	this._hscrollbar = null;
+	this._grid.dispose();
+	this._dispose();
+	this._reverter.dispose();
+
+	this._rowBounds = this._rowBoundCache = null;
+	this._rowSelDirty = false;
+	if(this._rowBoundTimer) {
+		clearTimeout(this._rowBoundTimer);
+		this._rowBoundTimer = 0;
+	}
+	if(this._cellBoundPainter) {
+		this._cellBoundPainter.dispose();
+	}
+};
+/** @override */
+VirtualizedLayoutGrid.prototype.setWidth = function (px) {
+	return this._grid.setWidth(px);
+};
+/** @override */
+VirtualizedLayoutGrid.prototype.setHeight = function (px) {
+	return false;
+};
+/** {@link ElementWrapper#show}
+* @override */
+VirtualizedLayoutGrid.prototype.show = function (opt_shown) {
+	this._element.style.display = (opt_shown !== false) ? "" : "none";
+	this._dispatchRowHeightChangedEvent(0, this._layoutY.getLaneCount());
+};
+//#endregion
+
+//#region ====== Implementing ILayoutGrid ======//
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hitTest = function (x, y) {
+	let e = [];
+	e["colIndex"] = this._grid.hitTestX(x);
+	e["rowIndex"] = this._layoutY.hitTest(y);
+	return e;
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hitTestX = function (x) {
+	return this._grid.hitTestX(x);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hitTestY = function (y) {
+	return this._layoutY.hitTest(y);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getDefaultColumnWidth = function () {
+	return this._grid.getDefaultColumnWidth();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setDefaultColumnWidth = function (val) {
+	this._grid.setDefaultColumnWidth(val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getDefaultRowHeight = function () {
+	return this._layoutY.getDefaultLaneSize();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setDefaultRowHeight = function (val) {
+	let prevVal = this._layoutY.getDefaultLaneSize();
+	if (prevVal !== val) {
+		this._layoutY.setDefaultLaneSize(val);
+		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._grid.setDefaultRowHeight(val);
+		this._dispatchRowHeightChangedEvent(0, this._layoutY.getLaneCount());
+	}
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnWidth = function (index) {
+	return this._grid.getColumnWidth(index);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setColumnWidth = function (index, val) {
+	return this._grid.setColumnWidth(index, val);
+};
+/** @public
+ * @ignore
+ * @param {number} indexX
+ * @param {number} val
+ * @return {boolean}
+ */
+VirtualizedLayoutGrid.prototype._setColumnWidth = function (indexX, val) {
+	return this._grid._setColumnWidth(indexX, val);
+};
+/** @public
+ * @ignore
+ */
+VirtualizedLayoutGrid.prototype._updateColumnLayout = function () {
+	this._grid._updateColumnLayout();
+};
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+VirtualizedLayoutGrid.prototype._startBindingSession = function (enabled) {
+	this._isBinding = enabled;
+	if(!enabled){
+		// Clear old session
+		if(this._tempRowHeights){
+			let defaultRowHeight = this.getDefaultRowHeight();
+			let hasSession = true;
+			let removedIndices = [];
+
+			for(let key in this._tempRowHeights){
+				let index = +key;
+				let rowSession = this._layoutY.getLaneProperty(index, "sizeSession");
+				if(rowSession) {
+					if(rowSession != this._session){
+						this.setRowHeight(index, defaultRowHeight);
+						this._layoutY.setLaneProperty(index, "sizeSession", null);
+						removedIndices.push(index);
+					}
+				}
+			}
+			let removedCount = removedIndices.length;
+			for(let i = 0; i < removedCount; i++){
+				delete this._tempRowHeights[removedIndices[i]];
+			}
+			if(removedCount){
+				for(let remainingKey in this._tempRowHeights){
+					hasSession = remainingKey != null;
+					break;
+				}
+			}
+			if(!hasSession){
+				this._tempRowHeights = null;
+			}
+
+		}
+		this._session = this._session === "A" ? "B" : "A";
+	}
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+VirtualizedLayoutGrid.prototype._getTempRowHeights = function () {
+	return this._tempRowHeights;
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowHeight = function (index) {
+	return this._layoutY.getLaneSize(index);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowHeight = function (index, val) {
+	if(this._isBinding && val != this.getDefaultRowHeight()){
+		this._layoutY.setLaneProperty(index, "sizeSession", this._session);
+		if(!this._tempRowHeights){
+			this._tempRowHeights = [];
+		}
+		this._tempRowHeights[index] = true; // Store row index that set temporary row height
+	}
+	if(this._layoutY.setLaneSize(index, val)) {
+		this._grid.setRowHeight(index - this._firstIndex, val);
+		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
+		return this._dispatchRowHeightChangedEvent(index, index + 1);
+	}
+	return false;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.isColumnVisible = function (index) {
+	return this._grid.isColumnVisible(index);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hideColumn = function (index, val) {
+	return this._grid.hideColumn(index, val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.isRowVisible = function (index) {
+	return this._grid.isRowVisible(index - this._firstIndex);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hideRow = function (index, val) {
+	return this._grid.hideRow(index - this._firstIndex, val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getMinimumColumnWidth = function (index) {
+	return this._grid.getMinimumColumnWidth(index);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setMinimumColumnWidth = function (index, val) {
+	return this._grid.setMinimumColumnWidth(index, val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getMinimumRowHeight = function (index) {
+	return this._layoutY.getMinimumLaneSize(index);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setMinimumRowHeight = function (index, val) {
+	return false;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellLeft = function (indexX) {
+	return this._grid.getCellLeft(indexX);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellTop = function (indexY) {
+	return this._layoutY.getLaneStart(indexY);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellWidth = function (indexX, indexY) {
+	return this._grid.getCellWidth(indexX, 0); //In virtualization, every cell in the same column has the same width
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellHeight = function (indexX, indexY) {
+	return this._layoutY.getLaneSize(indexY); //In virtualization, every cell in the same row has the same height
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hasCellSpan = function () {
+	return this._grid.hasCellSpan();
+};
+//Not support row spanning in virtualization
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellRowSpan = function (indexX, indexY) {
+	return this._grid.getCellRowSpan(indexX, indexY - this._firstIndex);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setCellRowSpan = function (indexX, indexY, rowSpan) {
+	return this._grid.setCellRowSpan(indexX, indexY - this._firstIndex, rowSpan);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellColSpan = function (indexX, indexY) {
+	return this._grid.getCellColSpan(indexX, indexY - this._firstIndex);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setCellColSpan = function (indexX, indexY, colSpan) {
+	return this._grid.setCellColSpan(indexX, indexY - this._firstIndex, colSpan);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.clearCellSpans = function () {
+	return this._grid.clearCellSpans();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.clearColumnSpans = function (indexX) {
+	return this._grid.clearColumnSpans(indexX);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.clearColumnCustomizations = function () {
+	this._grid.clearColumnCustomizations();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.clearRowCustomizations = function () {
+	this._layoutY.clearLaneCustomizations();
+	this._grid.clearRowCustomizations();
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnScalability = function (indexX) {
+	return this._grid.getColumnScalability(indexX);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setColumnScalability = function (indexX, val) {
+	return this._grid.setColumnScalability(indexX, val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowScalability = function (indexY) {
+	return this._layoutY.getLaneScalability(indexY);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowScalability = function (index, val) {
+	return false;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCell = function (indexX, indexY, opt_includeSpan) {
+	return this._grid.getCell(indexX, indexY - this._firstIndex, opt_includeSpan);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellContent = function (indexX, indexY) {
+	return this._grid.getCellContent(indexX, indexY - this._firstIndex);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setCellContent = function (indexX, indexY, data) {
+	return this._grid.setCellContent(indexX, indexY - this._firstIndex, data);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnCount = function () {
+	return this._grid.getColumnCount();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setColumnCount = function (val) {
+	this._grid.setColumnCount(val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowCount = function () {
+	return this._layoutY.getLaneCount();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowCount = function (val, noBinding) {
+	let prevCount = this._layoutY.getLaneCount();
+	if(prevCount !== val){
+		this._layoutY.setLaneCount(val);
+		if(this._tempRowHeights){
+			this._tempRowHeights.length = val;
+		}
+		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
+		//After rowCountChanged fires, virtualizer will update virtual row count if
+		//the range of virtual layout changed.
+		this._dispatch("rowCountChanged", { "rowCount": val, "prevCount": prevCount, "noBinding": noBinding });
+	}
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getVisibleRowCount = function () {
+	return this.getRowCount();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.addRow = function (val) {
+	if (val <= 0) { return; }
+	if (this._grid.getColumnCount() <= 0) {
+		console.log("WARNING: Row cannot be added, unless at least one column is added");
+		return;
+	}
+	this.setRowCount(this._layoutY.getLaneCount() + val);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.removeRow = function (val) {
+	if (val <= 0) { return; }
+	let rowCount = this._layoutY.getLaneCount();
+	if (val > rowCount) { val = rowCount; }
+	this.setRowCount(rowCount - val);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setBorders = function (lft, top, rgt, btm) {
+	this._grid.setBorders(lft, top, rgt, btm);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnStyle = function (colIndex, styleName) {
+	return this._grid.getColumnStyle(colIndex, styleName);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setColumnStyle = function (colIndex, styleName, value) {
+	this._grid.setColumnStyle(colIndex, styleName, value);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableColumnClass = function (colIndex, className, enabled) {
+	this._grid.enableColumnClass(colIndex, className, enabled);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.hasColumnClass = function (colIndex, className) {
+	return this._grid.hasColumnClass(colIndex, className);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableRowClass = function (rowIndex, className, enabled) {
+	this._grid.enableRowClass(rowIndex - this._firstIndex, className, enabled);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowStyle = function (rowIndex, styleName, value, enabled) {
+	this._grid.setRowStyle(rowIndex - this._firstIndex, styleName, value, enabled);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getContentWidth = function () {
+	return this._grid.getContentWidth();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getContentHeight = function () {
+	return this._layoutY.getTrackSize();
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellsByRowIndex = function(rowIndex) {
+	return this._grid.getCellsByRowIndex(rowIndex - this._firstIndex);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.disableHorizontalGridLine = function (opt_bool) {
+	this._grid.disableHorizontalGridLine(opt_bool);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.disableVerticalGridLine = function (opt_bool) {
+	this._grid.disableVerticalGridLine(opt_bool);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableShading = function (enabled) {
+	this._grid.enableShading(enabled);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setTransposedShading = function (enabled) {
+	this._grid.setTransposedShading(enabled);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableRowHighlighting = function (opt_bool) {
+	this._grid.enableRowHighlighting(opt_bool);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowHighlight = function () {
+	let index = this._grid.getRowHighlight();
+	if(index >= 0){
+		index += this._firstIndex;
+	}
+	return index;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowHighlight = function (rowIndex) {
+	let prevIndex = this._grid.getRowHighlight();
+	this._grid.setRowHighlight(rowIndex - this._firstIndex);
+
+	if (this._hasListener("rowHighlighted")) {
+		rowIndex = this._grid.getRowHighlight();
+
+		this._dispatch("rowHighlighted", {
+			"prevRowIndex": (prevIndex >= 0) ? prevIndex + this._firstIndex : prevIndex,
+			"rowIndex": (rowIndex >= 0) ? rowIndex + this._firstIndex : rowIndex
+		});
+	}
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getSelectedRows = function () {
+	if(this.getSelectedRowCount() > 0){
+		return this._selectionList.getAllSelections();
+	}
+	return null;
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getSelectedRowCount = function () {
+	return this._selectionList.getSelectionCount();
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.isSelectedRow = function (at) {
+	return this._selectionList.getSelection(at);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selected) {
+	this._selectionList.setSelection(rowIndex, opt_selected);
+
+	let selected = this._selectionList.getSelection(rowIndex);
+	this._grid.setSelectedRow(rowIndex - this._firstIndex, selected);
+
+	if(selected) {
+		this._rowSelDirty = true;
+		this._initBoundLayer();
+	}
+	this._requestUpdatingRowBounds();
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.selectSingleRow = function (rowIndex) {
+	this._selectionList.clearAllSelections();
+	this._grid.clearSelectedRows();
+	this.setSelectedRow(rowIndex);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.selectRowRange = function (rowIndex, length) {
+	this._selectionList.selectRange(rowIndex, length);
+	this._updateRowSelection();
+	this._rowSelDirty = true;
+	this._initBoundLayer();
+	this._requestUpdatingRowBounds();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.clearSelectedRows = function () {
+	let count = this._selectionList.clearAllSelections();
+	this._grid.clearSelectedRows();
+	this._requestUpdatingRowBounds(); // WARNING: Row bounds are not removed from the document immediately
+	return count;
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getFirstSelectedRow = function () {
+	return this._selectionList.getFirstSelectedIndex();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getLastSelectedRow = function () {
+	return this._selectionList.getLastSelectedIndex();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowAnchor = function () {
+	return this._selectionList.getSelectionAnchor();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowAnchor = function (at) {
+	this._selectionList.setSelectionAnchor(at);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.activateColumn = function (colIndex, opt_bool) {
+	this._grid.activateColumn(colIndex, opt_bool);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.activateRows = function (from, to, updateRange) {
+	let maxLen = this._layoutY.getLaneCount();
+	if(!from) { from = this._rowOffset; }
+	if(!to && to !== 0) { to = from + maxLen; }
+
+	from -= this._rowOffset; // Convert to relative index
+	if(from < 0) { from = 0; }
+	to -= this._rowOffset; // Convert to relative index
+	if(to < 0) { to = 0; }
+
+	let prevLen = this._getInnerRowCount();
+	let pfi = this._firstIndex;
+	let fi = 0;
+
+	fi = from - (from & 1); // This is done to maintain zebra background color.
+	if (fi < 0) { fi = 0; }
+	else if (fi > maxLen) { fi = maxLen; }
+
+	let newLen = (to + (to & 1)) - fi;
+	if(newLen + 2 === prevLen) { // To remove unnecessary shrinking during scrolling
+		newLen = prevLen;
+	}
+
+	if(newLen < 0) { newLen = 0; }
+	else if(newLen + fi > maxLen) { newLen = maxLen - fi; }
+
+	this._firstIndex = fi;
+	let ei = fi + newLen;
+
+	// Re-position inner grid
+	let px = this._layoutY.getLaneStart(fi);
+	let gridElem = this._grid.getElement(); // GRID-347 Chrome 86 does not recognize top property of grand children
+	if(gridElem) {
+		gridElem.style.transform = px ? "translateY(" + px + "px)" : ""; // Replacement for this._grid.setTop(px);
+		gridElem.style.top = "";
+		this._reverter.start();
+	}
+	this._grid._onEnterDocument();
+	let force = false; // Forcing flag to update entire range
+
+	if (newLen !== prevLen) {
+		this._grid.setRowCount(newLen);
+		if(newLen > prevLen) { // New row is available. Fire event to render the cells.
+			let e = {};
+			e["prevRowIndex"] = fi + prevLen;
+			e["rowIndex"] = fi + newLen;
+			if(updateRange) {
+				e["noDataUpdate"] = true; // Data update will be triggered after this, so we notify grid not to update
+			}
+			this._dispatch("rowAvailable", e);
+		}
+		force = true; // Force update entire range
+	}
+	if(updateRange) { // Find actual update range
+		if(!force) {
+			// TODO: Check where to clearSelectedRows() more properly
+			this._grid.clearSelectedRows(); // Because row will be moving up and down, we need to clear the selection first
+			let pei = pfi + prevLen;
+			if(fi < pfi && pfi < ei && pei >= ei) {
+				this.moveRowsToTop(ei - pfi);
+				updateRange[0] = fi;
+				updateRange[1] = pfi;
+			} else if(pfi < fi && fi < pei && ei >= pei) {
+				this.moveRowsToTop(fi - pfi);
+				updateRange[0] = pei;
+				updateRange[1] = ei;
+			} else if(fi === pfi && ei === pei) {
+				updateRange[0] = 0;
+				updateRange[1] = 0;
+			} else {
+				force = true;
+			}
+		}
+
+		if(force) {
+			updateRange[0] = fi;
+			updateRange[1] = ei;
+		}
+	}
+
+	if(!this._layoutY.isHomogeneous()) { // Row heights need to be updated on each scrolling
+		this._grid._updateRowHeights(this._layoutY, fi); // TODO: Set height only for the actual update range
+	}
+
+	this._updateRowSelection();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.moveRowsToTop = function (numRows) {
+	this._grid.moveRowsToTop(numRows);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getFirstIndexInView = function () {
+	return this._firstIndex;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getLastIndexInView = function () {
+	let li = this._firstIndex + this._getInnerRowCount() - 1;
+	let core = this._grid._getContext();
+	let dv = core.getDataSource();
+	let actualLastIndex = dv ? dv.getRowCount() - 1 : -1;
+	if (li > actualLastIndex) { //Avoid incorrect index because the delay of row count synchronization after filtering
+		return actualLastIndex;
+	}
+	return li;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.isInCurrentView = function(index){
+	return (this._firstIndex <= index) && (index < this._firstIndex + this._getInnerRowCount());
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getFrozenLayout = function () {
+	return this._grid.getFrozenLayout();
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setFrozenLayout = function (bool) {
+	this._grid.setFrozenLayout(bool);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumn = function (index) {
+	return this._grid.getColumn(index);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.insertColumn = function (index, opt_json) {
+	return this._grid.insertColumn(index, opt_json);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.removeColumnAt = function (index) {
+	return this._grid.removeColumnAt(index);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.moveColumn = function (from, to) {
+	this._grid.moveColumn(from, to);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableRowVirtualization = function (bool) { };
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.enableColumnVirtualization = function (bool) {
+	this._grid.enableColumnVirtualization(bool);
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnIndex = function (colElem) {
+	return this._grid.getColumnIndex(colElem);
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getCellIndex = function (colIndex, cellElem) {
+	let at = this._grid.getCellIndex(colIndex, cellElem);
+	if(at < 0) {
+		return -1;
+	}
+	return at + this._firstIndex;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getIndex = function () {
+	return this._index;
+};
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setIndex = function (index) {
+	this._index = index;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.setRowOffset = function(val){
+	this._rowOffset = val;
+};
+
+/** @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowOffset = function(){
+	return this._rowOffset;
+};
+
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype.updateLayout = function () {
+	this._grid.updateLayout();
+};
+
+/** {@link ILayoutGrid#stretchCell}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching, onlyToTheRight) {
+	let stretchedCell = this._grid.stretchCell(
+		cellRef,
+		(rowIndex != null) ? rowIndex - this._firstIndex : null,
+		opt_stretching,
+		onlyToTheRight
+	);
+
+	if (stretchedCell){
+		let cellElem = stretchedCell.getElement();
+		if(rowIndex === 0) {
+			cellElem.classList.add("top");
+		} else {
+			cellElem.classList.remove("top");
+		}
+	}
+	return stretchedCell;
+};
+
+/** {@link ILayoutGrid#unstretchCell}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.unstretchCell = function (cellRef, rowIndex) {
+	return this._grid.unstretchCell(
+		cellRef,
+		(rowIndex != null) ? rowIndex - this._firstIndex : null
+	);
+};
+/** {@link ILayoutGrid#unstretchAllCells}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.unstretchAllCells = function () {
+	this._grid.unstretchAllCells();
+};
+
+/** {@link ILayoutGrid#getStretchedCell}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getStretchedCell = function (cellRef, rowIndex) {
+	return this._grid.getStretchedCell(
+		cellRef,
+		(rowIndex != null) ? rowIndex - this._firstIndex : null
+	);
+};
+/** {@link ILayoutGrid#getStretchedCells}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getStretchedCells = function () {
+	return this._grid.getStretchedCells();
+};
+/** {@link ILayoutGrid#updateStretchedCells}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.updateStretchedCells = function () {
+	return this._grid.updateStretchedCells();
+};
+
+/** {@link ILayoutGrid#getColumnHost}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getColumnHost = function () {
+	return this._grid.getElement();
+};
+/** {@link ILayoutGrid#setHidingMethod}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.setHidingMethod = function (method) {
+	this._grid.setHidingMethod(method);
+};
+/** {@link ILayoutGrid#getHidingMethod}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getHidingMethod = function () {
+	return this._grid.getHidingMethod();
+};
+/** {@link ILayoutGrid#setColumnVisibility}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.setColumnVisibility = function (colIndex, bool, flag) {
+	return this._grid.setColumnVisibility(colIndex, bool, flag);
+};
+/** {@link ILayoutGrid#setColumnVisibility}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getRowLayout = function () { return this._layoutY; };
+
+/** {@link ILayoutGrid#reserveRightSpace}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.reserveRightSpace = function (size) {
+	return this._grid.reserveRightSpace(size);
+};
+/** {@link ILayoutGrid#reserveRightSpace}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getReservedSpace = function () {
+	return this._grid.getReservedSpace();
+};
+/** {@link ILayoutGrid#getComputedStyle}
+* @inheritDoc */
+VirtualizedLayoutGrid.prototype.getComputedStyle = function () {
+	return this._grid.getComputedStyle();
+};
+/** {@link ILayoutGrid#isColumnActive}
+* @inheritDoc
+*/
+VirtualizedLayoutGrid.prototype.isColumnActive = function (colIndex) {
+	return this._grid.isColumnActive(colIndex);
+};
+/** {@link ILayoutGrid#setRowAttributes}
+* @inheritDoc
+*/
+VirtualizedLayoutGrid.prototype.setRowAttributes = function (rowIndex, func) {
+	return this._grid.setRowAttributes(rowIndex, func);
+};
+/** @public
+* @param {number} rowIndex
+* @return {Object}
+*/
+VirtualizedLayoutGrid.prototype.getContextRow = function (rowIndex) {
+	return this._grid.getContextRow(rowIndex - this._firstIndex);
+};
+
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectColumn = function (colIndex, selected) {
+	this._grid.selectColumn(colIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+VirtualizedLayoutGrid.prototype.isSelectedColumn = function (colIndex) {
+	return this._grid.isSelectedColumn(colIndex);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectCell = function (colIndex, rowIndex, selected) {
+	this._grid.selectCell(colIndex, rowIndex - this._firstIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} width
+* @param {number} height
+*/
+VirtualizedLayoutGrid.prototype.setCellBounds = function (colIndex, rowIndex, width, height) {
+	let boundLayer = this._initBoundLayer();
+	let cellBoundPainter = this._cellBoundPainter;
+	if(!cellBoundPainter) {
+		cellBoundPainter = this._cellBoundPainter = new CellBoundPainter({
+			boundLayer: boundLayer,
+			layoutX: this.getHorizontalLayout(),
+			layoutY: this._layoutY,
+			hscrollbar: this._hscrollbar,
+			calculateColumnBounds: this.calculateColumnBounds.bind(this)
+		});
+	}
+
+	let colCount = this.getColumnCount();
+	cellBoundPainter.setCellBounds(colIndex, rowIndex, width, height, colCount);
+};
+/** @public
+* @ignore
+* @return {!TrackLayout}
+*/
+VirtualizedLayoutGrid.prototype.getHorizontalLayout = function () {
+	return this._grid.getHorizontalLayout();
+};
+/** @public
+* @ignore
+* @param {number} lftIdx
+* @param {number} rgtIdx Inclusive index
+* @param {!Array.<number>} outPositions
+* @param {!Array.<boolean>} outNoBorders
+*/
+VirtualizedLayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {
+	this._grid.calculateColumnBounds(lftIdx, rgtIdx, outPositions, outNoBorders);
+};
+/** @public
+* @ignore
+* @param {!Array.<Array>} posAry Left and right bound positions in pixel
+* @param {!Array.<Array>} noBorderAry Boolean values indicating existence of left and right CSS borders
+* @param {number=} topPx Top position of bound
+*/
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	this._grid.updateColumnBounds(posAry, noBorderAry, topPx);
+	this._updateRowBounds();
+};
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype.updateColumnSeparators = function () {
+	this._grid.updateColumnSeparators();
+};
+/** @private
+* @return {Element}
+*/
+VirtualizedLayoutGrid.prototype._initBoundLayer = function () {
+	let boundLayer = this._boundLayer;
+	if(!boundLayer) {
+		boundLayer = this._boundLayer = document.createElement("div");
+		boundLayer.className = "cover-layer";
+		this._element.appendChild(boundLayer);
+	}
+	return boundLayer;
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._requestUpdatingRowBounds = function () {
+	if(!this._rowBoundTimer) {
+		this._rowBoundTimer = setTimeout(this._updateRowBounds, 10);
+	}
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._updateRowBounds = function () {
+	this._rowBoundTimer = 0;
+
+	let cellBoundPainter = this._cellBoundPainter;
+	if(cellBoundPainter) {
+		cellBoundPainter.updateCellBounds();
+	}
+
+	if(!this._rowSelDirty) {
+		return;
+	}
+	let rbs = this._rowBounds;
+	let rbc = this._rowBoundCache;
+	if(!rbs) {
+		rbs = this._rowBounds = [];
+	}
+	if(!rbc) {
+		rbc = this._rowBoundCache = [];
+	}
+
+	let selList = this._selectionList;
+	let rowCount = this._layoutY.getLaneCount();
+	selList.deselectFrom(rowCount); // TODO: move this to setRowCount
+
+	let selRanges = selList.getConnectedRanges();
+	let rangeCount = selRanges.length;
+	let i;
+	let pn = null; // parentNode
+	let rowBound = null;
+
+	// Remove unused bounds from document
+	let activeCount = rbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		rowBound = rbs[i];
+		pn = rowBound.parentNode;
+		if(pn) {
+			pn.removeChild(rowBound);
+		}
+	}
+	rbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		let selCount = selList.getSelectionCount();
+		if(!selCount) {
+			this._rowSelDirty = false;
+		}
+		return;
+	}
+
+	// Prepare shared parameters
+	let scrollLeft = 0;
+	let pinnedLftCount = 0;
+	let pinnedRgtCount = 0;
+	let endOfScroll = false;
+	if(this._hscrollbar) {
+		scrollLeft = this._hscrollbar.getScrollLeft();
+		pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+		pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+		endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
+	}
+	let noLeftBound = !pinnedLftCount && scrollLeft > 0;
+	let noRightBound = !pinnedRgtCount && !endOfScroll;
+	let boundWidth = this._grid._getViewSize();
+
+	// Create row bound elements based on number of selection ranges
+	for(i = 0; i < rangeCount; ++i) {
+		let pair = selRanges[i];
+		let topIdx = pair[0];
+		let btmIdx = pair[1]; // Inclusive
+		let topPx = this._layoutY.getLaneStart(topIdx);
+		let btmPx = this._layoutY.getLaneEnd(btmIdx);
+
+		rowBound = rbc[i];
+		if(!rowBound) {
+			rowBound = rbc[i] = document.createElement("div");
+			rowBound.className = "selection-bound";
+		}
+
+		rowBound.style.top = topPx + "px";
+		rowBound.style.height = (btmPx - topPx) + "px";
+		rowBound.style.width = boundWidth + "px";
+
+		rowBound.classList.toggle("no-left-bound", noLeftBound);
+		rowBound.classList.toggle("no-right-bound", noRightBound);
+
+		if(this._boundLayer) {
+			if(!rbs[i]) {
+				rbs[i] = rowBound;
+				this._boundLayer.appendChild(rowBound);
+			}
+		}
+	}
+};
+//#endregion public methods
+
+//#region ====== Private methods ======//
+/** @private
+* @return {number}
+*/
+VirtualizedLayoutGrid.prototype._getInnerRowCount = function () {
+	return this._grid.getRowCount();
+};
+
+/** @private */
+VirtualizedLayoutGrid.prototype._updateRowSelection = function () {
+	this._grid.clearSelectedRows();
+	let sl = this._selectionList;
+	let count = sl.getSelectionCount();
+	if(count <= 0) { return; }
+
+	let r;
+	let fi = this._firstIndex;
+	let ei = fi + this._getInnerRowCount();
+	if(count === 1) {
+		r = sl.getFirstSelectedIndex();
+		if (fi <= r && r < ei) {
+			this._grid.setSelectedRow(r - fi, true);
+		}
+	} else {
+		if(count >= ei - fi) {
+			for(r = fi; r < ei; ++r) {
+				if(sl.getSelection(r)) {
+					this._grid.setSelectedRow(r - fi, true);
+				}
+			}
+		} else {
+			let selections = sl.getAllSelections();
+			for(let i = 0; i < count; ++i){
+				r = selections[i];
+				if (fi <= r && r < ei) {
+					this._grid.setSelectedRow(r - fi, true);
+				}
+			}
+		}
+	}
+};
+
+/** @private
+ * @param {number} from
+ * @param {number} to
+ * @return {boolean}
+ */
+VirtualizedLayoutGrid.prototype._dispatchRowHeightChangedEvent = function (from, to) {
+	if (from >= to) { return false; }
+
+	let e = {};
+	e["rowIndex"] = from;
+	e["changeLength"] = to - from;
+	this._dispatch("rowHeightChanged", e);
+	return true;
+};
+/** @private
+ */
+VirtualizedLayoutGrid.prototype._onRestingPosition = function () {
+	let gridElem = this._grid.getElement();
+	if(gridElem) {
+		let px = this._layoutY.getLaneStart(this._firstIndex);
+		gridElem.style.transform = "";
+		gridElem.style.top = px ? px + "px" : ""; // WORKAROUND: GRID-402
+	}
+};
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype._updateRightSpaceStyle = function() {
+	this._grid._updateRightSpaceStyle();
+};
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype._updateLayers = function() {
+	this._grid._updateLayers();
+};
+/** @public
+* @ignore
+* @param {*} ctx
+*/
+VirtualizedLayoutGrid.prototype._setContext = function(ctx) {
+	this._grid._setContext(ctx);
+};
+
+/** @public
+* @ignore
+* @return {*} ctx
+*/
+VirtualizedLayoutGrid.prototype._getContext = function () {
+	return this._grid._getContext();
+};
+//#endregion
+
+VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
+
+export default VirtualizedLayoutGrid;
+export { VirtualizedLayoutGrid };