@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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

@@ -11,6 +11,7 @@ import TrackLayout from "./util/TrackLayout.js";
 import SelectionList from "./util/SelectionList.js";
 import ILayoutGrid from "./ILayoutGrid.js";
 import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
 /* eslint-enable */
 
 //#region Events
@@ -32,15 +33,15 @@ import ElementWrapper from "./components/ElementWrapper.js";
 /**
  * Please see {@link ILayoutGrid} for full APIs and parameter lists.
  * @constructor
- * @param {Element|null=} opt_initializer this can be either element id (string) or DOM element
- * @param {Object=} opt_options
+ * @param {Object=} options
  * @extends {ElementWrapper}
  */
-var LayoutGrid = function (opt_initializer, opt_options) {
+var LayoutGrid = function (options) {
 	var _t = this;
 
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onMouseOut = _t._onMouseOut.bind(_t);
+	_t._onResetTransformIE = _t._onResetTransformIE.bind(_t);
 
 	_t._trackX = new TrackLayout();
 	_t._trackY = new TrackLayout();
@@ -49,7 +50,7 @@ var LayoutGrid = function (opt_initializer, opt_options) {
 
 	_t._cellSpans = new CellSpans();
 
-	_t._element = opt_initializer ? opt_initializer : document.createElement("div");
+	_t._element = document.createElement("div");
 	_t._element.className = "tr-lg tr-even-shading";
 
 	_t._ctxRows = new VirtualItems(); // Context rows act as a virtual column storing UI context or metadata for rows
@@ -59,8 +60,14 @@ var LayoutGrid = function (opt_initializer, opt_options) {
 	_t._stretchedCells = new StretchedCells(_t._trackX, _t._trackY, _t);
 	_t._selectionList = new SelectionList();
 
-	if (opt_options) {
-		_t._virOwner = opt_options["owner"] || null;
+	if (options) {
+		_t._virOwner = options["owner"] || null;
+		if(options["horizontalScrollbar"]) {
+			_t._hscrollbar = options["horizontalScrollbar"];
+		}
+	}
+	if(!_t._virOwner) {
+		_t._element.classList.add("section");
 	}
 
 	_t._addEvent("rowHighlighted");
@@ -72,19 +79,11 @@ var LayoutGrid = function (opt_initializer, opt_options) {
 Ext.inherits(LayoutGrid, ElementWrapper);
 
 /**
- * For virtualization in Y-Axis
  * @type {number}
  * @private
  */
 LayoutGrid.prototype._index = -1;
 
-/**
- * For virtualization in Y-Axis
- * @type {number}
- * @private
- */
-LayoutGrid.prototype._indexOffset = 0;
-
 /**
  * For virtualization in Y-Axis
  * @type {number}
@@ -163,11 +162,14 @@ LayoutGrid.prototype._firstColumn;
  */
 LayoutGrid.prototype._lastColumn;
 
-/**
- * @type {Element}
- * @private
- */
+/** @type {Element}
+* @private
+*/
 LayoutGrid.prototype._rightSpace;
+/** @type {number}
+* @private
+*/
+LayoutGrid.prototype._rightSpaceSize = 0;
 
 /**
  * @type {boolean}
@@ -247,6 +249,18 @@ LayoutGrid.prototype._transformIETimer = 0;
 * @private
 */
 LayoutGrid.prototype._ctxRows;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._boundLayer = null;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._columnBound = null;
+/** @type {HScrollbar}
+* @private
+*/
+LayoutGrid.prototype._hscrollbar = null;
 
 
 /**
@@ -269,6 +283,7 @@ LayoutGrid.prototype.dispose = function () {
 
 	this._highlightedCells.length = 0;
 	this._ctx = null;
+	this._hscrollbar = null;
 
 	this._dispose();
 };
@@ -277,11 +292,13 @@ LayoutGrid.prototype.dispose = function () {
  * @override
  */
 LayoutGrid.prototype.getWidth = function () {
-	if (this.isVisible() === false) {
-		return 0;
-	}
-
-	return this.getContentWidth();
+	return this.isVisible() ? this._getWidth() : 0;
+};
+/** @private
+* @return {number}
+ */
+LayoutGrid.prototype._getWidth = function () {
+	return this.getContentWidth() + this._rightSpaceSize;
 };
 
 /**
@@ -293,8 +310,7 @@ LayoutGrid.prototype.setWidth = function (px) {
 		return false;
 	}
 
-	var reserveSpace = this._rightSpace ? this._rightSpace.offsetWidth : 0;
-	var changes = this._trackX.setTrackSize(px, reserveSpace); // WARNING: Perform scalling instead of setting width directly
+	var changes = this._trackX.setTrackSize(px - this._rightSpaceSize); // WARNING: Perform scalling instead of setting width directly
 
 	if (changes == null) {
 		return false;
@@ -326,7 +342,7 @@ LayoutGrid.prototype.setHeight = function (px) {
 		return false;
 	}
 
-	var changes = this._trackY.setTrackSize(px, 0); // WARNING: Perform scalling instead of setting height directly
+	var changes = this._trackY.setTrackSize(px); // WARNING: Perform scalling instead of setting height directly
 
 	if (changes == null) {
 		return true;
@@ -362,7 +378,7 @@ LayoutGrid.prototype.hitTest = function (x, y, opt_omitSpan) {
 		return null;
 	}
 
-	if (x >= this.getWidth()) {
+	if (x >= this.getContentWidth()) {
 		return null;
 	}
 
@@ -407,7 +423,7 @@ LayoutGrid.prototype.hitTestX = function (x) {
 		return -1;
 	}
 
-	if (x >= this.getWidth()) {
+	if (x >= this.getContentWidth()) {
 		return ~this._colCount;
 	}
 
@@ -512,6 +528,22 @@ LayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 LayoutGrid.prototype._updateColumnLayout = function () {
 	this._syncLayoutToColumns(0);
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ * @param {number=} fromR
+ * @param {number=} toR
+ */
+LayoutGrid.prototype._startBindingSession = function (enabled, fromR, toR) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+LayoutGrid.prototype._getTempRowHeights = function () {
+	return null;
+};
 
 /**
  * {@link ILayoutGrid#getRowHeight}
@@ -982,7 +1014,7 @@ LayoutGrid.prototype.setColumnCount = function (val) {
 			}
 		}
 
-		// this._updateViewWidth(); // Core grid will guarantee updating width to each section
+		// this._updateCssWidth(); // Core grid will guarantee updating width to each section
 	} else {
 		for (i = oldColCount; i < val; ++i) {
 			column = this._newColumn(i);
@@ -1353,6 +1385,11 @@ LayoutGrid.prototype.setRowHighlight = function (rowIndex) {
 			this._highlightedCells[c] = cell;
 			cell.addClass("highlighted-row");
 		}
+		var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+		if(stretchEl) {
+			this._highlightedCells.push(stretchEl);
+			stretchEl.addClass("highlighted-row");
+		}
 	} else {
 		this._highlightedCells.length = 0;
 	}
@@ -1621,7 +1658,7 @@ LayoutGrid.prototype.insertColumn = function (index, opt_json) {
 	}
 
 	this._updateCellSpans(cellSpans, true); // Restore all styling
-	this._calculateStretchSize(true);
+	this._calculateViewSize(true);
 	this._stretchedCells.updateXAxis();
 	// this._syncLayoutToColumns(index); // Core grid will guarantee updating width to each section
 
@@ -1638,6 +1675,7 @@ LayoutGrid.prototype.insertColumn = function (index, opt_json) {
 				cell.addClass("selected-row");
 			}
 		}
+		// TODO: Check if it can insert column with stretch cell
 	}
 
 	column.activate(atTheMiddle || !this._colVir);
@@ -1676,7 +1714,7 @@ LayoutGrid.prototype.removeColumnAt = function (index) {
 	this._syncLayoutToColumns(index);
 
 	if (index >= this._colCount) {
-		this._updateViewWidth();
+		this._updateCssWidth();
 	}
 
 	return definition;
@@ -1716,14 +1754,6 @@ LayoutGrid.prototype.moveColumn = function (from, to) {
 	var nextSibling = this._columns[to + 1] || null;
 	movedColumn.insertBefore(nextSibling);
 
-	if (this._rightSpace) {
-		var pn = this._rightSpace.parentNode;
-
-		if (pn) {
-			pn.appendChild(this._rightSpace);
-		}
-	}
-
 	this._updateColumnIndices();
 	this._updateCellSpans(cellSpans, true); // Restore all styling
 
@@ -1826,12 +1856,14 @@ LayoutGrid.prototype.setRowOffset = function (index) {
 	this._rowOffset = index;
 };
 
-/**
- * {@link ILayoutGrid#updateLayout}
- * @ignore
- * @inheritDoc
- */
-LayoutGrid.prototype.updateLayout = function () {};
+/** @public
+* @ignore
+*/
+LayoutGrid.prototype.updateLayout = function () {
+	this._calculateViewSize(true); // Column bounds will be updated by trigger from Core
+
+	this._updateRightSpaceStyle();
+};
 
 /**
  * {@link ILayoutGrid#stretchCell}
@@ -1869,12 +1901,16 @@ LayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching,
 			this._updateLayers();
 		}
 
-		this._calculateStretchSize();
+		this._calculateViewSize();
 		cell = this._stretchedCells.stretchCell(rowIndex, onlyToTheRight ? colIndex : 0);
 		cell.setParent(coverLayer);
 	} else {
 		cell = this._stretchedCells.unstretchCell(rowIndex);
 	}
+	if(cell) {
+		var selected = this._selectionList.getSelection(rowIndex);
+		cell.enableClass("selected-row", selected); // It's can enable class without get stretch cell again.
+	}
 	return cell;
 };
 
@@ -1924,7 +1960,7 @@ LayoutGrid.prototype.updateStretchedCells = function () {
 	if (childCount <= 0) {
 		return false;
 	}
-	this._calculateStretchSize(true);
+	this._calculateViewSize(true);
 
 	this._stretchedCells.updateCells();
 	return childCount ? true : false;
@@ -1932,20 +1968,51 @@ LayoutGrid.prototype.updateStretchedCells = function () {
 
 /** @private
 * @param {boolean=} forceRecal
+* @return {number}
 */
-LayoutGrid.prototype._calculateStretchSize = function (forceRecal) {
+LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 	var ctx = this._ctx;
 	var stretchSize = forceRecal ? 0 : this._stretchedCells.getStretchSize();
 	if(!stretchSize && ctx) {
 		if(ctx["getWidth"]) {
+			var contentWidth = this.getContentWidth();
 			stretchSize = ctx["getWidth"]();
-			var contentWidth = this.getContentWidth(); // TODO: Subtract 1px for border
-			if(contentWidth < stretchSize) { // If view width is larger than actual content
-				stretchSize = contentWidth;
+			if(stretchSize) { // Grid may not be in the document
+				if(!ctx.hasClass("no-borders")) {
+					stretchSize -= 1;
+				}
+				if(contentWidth < stretchSize) { // If view width is larger than actual content
+					stretchSize = contentWidth;
+				}
+				this._stretchedCells.setStretchSize(stretchSize);
+				return stretchSize;
+			} else {
+				return contentWidth;
 			}
-			this._stretchedCells.setStretchSize(stretchSize);
 		}
 	}
+	return stretchSize;
+};
+
+/**
+* @private
+* @param {number} rowIndex
+* @param {string} className
+* @param {boolean} enabled
+*/
+LayoutGrid.prototype._enableStretchCellClass = function (rowIndex, className, enabled ) {
+	var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+	if(stretchEl) {
+		stretchEl.enableClass(className, enabled);
+	}
+};
+/** View size is width of container (Grid's pane) or content (LayoutGrid's columns), whichever is smaller.
+* @public
+* @ignore
+* @return {number}
+*/
+LayoutGrid.prototype._getViewSize = function () {
+	return this._calculateViewSize();
 };
 
 /**
@@ -2011,8 +2078,9 @@ LayoutGrid.prototype.reserveRightSpace = function (size) {
 		}
 
 		this._rightSpace.style.width = size + "px";
+		this._rightSpaceSize = size;
 
-		this._updateViewWidth();
+		this._updateCssWidth();
 	} else if (this._rightSpace) {
 		var pn = this._rightSpace.parentNode;
 
@@ -2021,20 +2089,30 @@ LayoutGrid.prototype.reserveRightSpace = function (size) {
 		}
 
 		this._rightSpace = null;
+		this._rightSpaceSize = 0;
 
-		this._updateViewWidth();
+		this._updateCssWidth();
 	}
 
 	return this._rightSpace;
 };
 
-/**
- * @public
- * @ignore
- * @param {boolean} absolutePos if true, the right space element will be positioned absolutely
- */
-LayoutGrid.prototype._updateRightSpaceStyle = function(absolutePos) {
+/** @public
+* @ignore
+*/
+LayoutGrid.prototype._updateRightSpaceStyle = function() {
 	var rs = this._rightSpace;
+	if(!rs) {
+		return;
+	}
+	var isScrollbarActive = false;
+	var pinnedRgtCount = 0;
+	if(this._hscrollbar) {
+		isScrollbarActive = this._hscrollbar.isActive();
+		pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+	}
+	var absolutePos = isScrollbarActive && !pinnedRgtCount; // if true, the right space element will be positioned absolutely
+
 	if (absolutePos) {
 		rs.style.top = this._trackY.getLaneStart(this._activeRow) + "px";
 		rs.style.left = this._trackX.getLaneStart(this._colCount) + "px";
@@ -2058,6 +2136,9 @@ LayoutGrid.prototype._updateLayers = function() {
 			this._element.appendChild(this._rightSpace);
 		}
 	}
+	if(this._boundLayer) {
+		this._element.appendChild(this._boundLayer);
+	}
 	if(this._coverLayer) {
 		this._element.appendChild(this._coverLayer); // The layer should always on top
 	}
@@ -2126,6 +2207,153 @@ LayoutGrid.prototype.getContextRow = function (rowIndex) {
 	return this._ctxRows.getItem(rowIndex);
 };
 
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+LayoutGrid.prototype.selectColumn = function (colIndex, selected) {
+	this.enableColumnClass(colIndex, "selected-column", selected);
+
+	var columnBound = this._columnBound;
+	if(!columnBound) {
+		columnBound = this._columnBound = document.createElement("div");
+		columnBound.className = "selection-bound column-bound";
+	}
+	var boundLayer = this._boundLayer;
+	if(!boundLayer) {
+		boundLayer = this._boundLayer = document.createElement("div");
+		boundLayer.className = "cover-layer";
+		this._updateLayers();
+	}
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+LayoutGrid.prototype.isSelectedColumn = function (colIndex) {
+	return this.hasColumnClass(colIndex, "selected-column");
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {boolean=} selected
+*/
+LayoutGrid.prototype.selectCell = function (colIndex, rowIndex, selected) {
+	var cell = this._getCell(colIndex, rowIndex);
+	if(cell) {
+		cell.enableClass("selection", selected);
+	}
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} width
+* @param {number} height
+*/
+LayoutGrid.prototype.setCellBounds = function (colIndex, rowIndex, width, height) {};
+/** @public
+* @ignore
+* @return {!TrackLayout}
+*/
+LayoutGrid.prototype.getHorizontalLayout = function () {
+	return this._trackX;
+};
+/** @public
+* @ignore
+* @param {number} lftIdx
+* @param {number} rgtIdx Inclusive index
+* @param {!Array.<number>} outPositions
+* @param {!Array.<boolean>} outNoBorders
+*/
+LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {
+	var lftPx = 0;
+	var rgtPx = 0;
+	var noLftBorder = false;
+	var noRgtBorder = false;
+	var pinnedRgtIdx = this._trackX.getLaneCount();
+	if(lftIdx >= 0) {
+		lftPx = this._trackX.getLaneStart(lftIdx);
+		rgtPx = this._trackX.getLaneEnd(rgtIdx);
+	}
+	if(lftPx < rgtPx) {
+		var lftView = 0;
+		var rgtView, rgtLimit;
+		var scrollLeft = 0;
+		var pinnedLftCount = 0;
+		var pinnedRgtCount = 0;
+		if(this._hscrollbar) {
+			scrollLeft = this._hscrollbar.getScrollLeft();
+			pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+			pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+		}
+		rgtView = rgtLimit = this._trackX.getTrackSize();
+		if(pinnedLftCount) {
+			lftView = this._trackX.getLaneStart(pinnedLftCount);
+		}
+		if(pinnedRgtCount) {
+			pinnedRgtIdx -= pinnedRgtCount;
+			rgtView = this._getViewSize() - rgtLimit + this._trackX.getLaneStart(pinnedRgtIdx);
+		}
+		if(lftIdx >= pinnedLftCount && lftIdx < pinnedRgtIdx) {
+			lftPx -= scrollLeft;
+			if(lftPx < lftView) {
+				lftPx = lftView;
+				noLftBorder = true;
+			} else if(lftPx > rgtView) {
+				lftPx = rgtView;
+				noLftBorder = true;
+			}
+		} else if(lftIdx >= pinnedRgtIdx) {
+			lftPx = this._getViewSize() - rgtLimit + this._trackX.getLaneStart(lftIdx);
+		}
+		if(rgtIdx >= pinnedLftCount && rgtIdx < pinnedRgtIdx) {
+			rgtPx -= scrollLeft;
+			if(rgtPx < lftView) {
+				rgtPx = lftView;
+				noRgtBorder = true;
+			} else if(rgtPx > rgtView) {
+				rgtPx = rgtView;
+				noRgtBorder = true;
+			}
+		} else if(rgtIdx >= pinnedRgtIdx) {
+			rgtPx = this._getViewSize() - rgtLimit + this._trackX.getLaneEnd(rgtIdx);
+		}
+	}
+	outPositions[0] = lftPx;
+	outPositions[1] = rgtPx;
+	outNoBorders[0] = noLftBorder;
+	outNoBorders[1] = noRgtBorder;
+};
+/** @public
+* @ignore
+* @param {!Array.<number>} positions Left and right bound positions in pixel
+* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+*/
+LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+	var columnBound = this._columnBound;
+	if(!columnBound) {
+		return;
+	}
+
+	var lftPx = positions[0];
+	var rgtPx = positions[1];
+	if(lftPx >= rgtPx) {
+		var pn = columnBound.parentNode;
+		if(pn) {
+			pn.removeChild(columnBound);
+		}
+	} else {
+		columnBound.style.left = lftPx + "px";
+		columnBound.style.width = (rgtPx - lftPx) + "px";
+
+		columnBound.style.height = this._trackY.getTrackSize() + "px";
+		columnBound.classList.toggle("no-left-bound", noBorders[0]);
+		columnBound.classList.toggle("no-right-bound", noBorders[1]);
+		if(this._boundLayer) {
+			this._boundLayer.appendChild(columnBound);
+		}
+	}
+};
 
 /**
  * @private
@@ -2206,33 +2434,19 @@ LayoutGrid.prototype._newColumn = function (indexX) {
 		column.insertBefore(nextColumn);
 	}
 
-	if (this._rightSpace) {
-		var pn = this._rightSpace.parentNode;
-
-		if (pn) {
-			pn.appendChild(this._rightSpace);
-		}
-	}
-
 	return column;
 };
 
-/**
+/** Update LayoutGrid CSS width. Grid width is calculated from summation of each column width plus reserved right space
  * @private
  */
-LayoutGrid.prototype._updateViewWidth = function () { // This method is also called by _syncLayoutToColumns()
-	if (this._frozenLayout) {
-		return;
-	}
-
-	this._calculateStretchSize(true);
-	this._stretchedCells.updateXAxis();
-	var contentWidth = this.getContentWidth();
+LayoutGrid.prototype._updateCssWidth = function () { // This method is also called by _syncLayoutToColumns()
+	if (!this._frozenLayout) {
+		this._calculateViewSize(true);
+		this._stretchedCells.updateXAxis();
 
-	if (this._rightSpace) {
-		contentWidth += this._rightSpace.offsetWidth;
+		this._element.style.width = this._getWidth() + "px"; // View is kept in sync with content size
 	}
-	this._element.style.width = contentWidth + "px"; // View is kept in sync with content size
 };
 
 /**
@@ -2318,7 +2532,7 @@ LayoutGrid.prototype._syncLayoutToColumns = function (from) {
 	}
 
 	this._updateCellSpanLayout(this._cellSpans.getAllSpans());
-	this._updateViewWidth();
+	this._updateCssWidth();
 	return true;
 };
 
@@ -2475,11 +2689,16 @@ LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
  */
 LayoutGrid.prototype._onMouseMove = function (e) {
 	var target = e["target"];
-	var colElement = Util.closestElement(target, "column");
-	var colIndex = this.getColumnIndex(colElement);
-	var cellElement = (colIndex >= 0) ? Util.closestElement(target, "cell") : null;
 
-	this.setRowHighlight(this.getCellIndex(colIndex, cellElement));
+	var cellElement = Util.closestElement(target, "cell");
+	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		var colElement = Util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	var rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
 };
 
 /**
@@ -2510,27 +2729,16 @@ LayoutGrid.prototype._onMouseOut = function (e) {
  */
 LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
 	var selected = this._selectionList.getSelection(rowIndex);
-
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.enableClass("selected-row", selected);
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
 };
 
 /** @private
 * @param {number} rowIndex
 */
 LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.addClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
 };
 
 /**
@@ -2538,13 +2746,8 @@ LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
  * @param {number} rowIndex
  */
 LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.removeClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
 };
 
 /**
@@ -2585,7 +2788,7 @@ LayoutGrid.prototype._resetTransformIETimer = function () {
 	if (Util.isIE) {
 		if(!this._transformIETimer) {
 			this.enableClass("reset-transform");
-			this._transformIETimer = setTimeout(this._onResetTransformIE.bind(this), 20);
+			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
 		}
 	}
 };