@refinitiv-ui/efx-grid 6.0.5 → 6.0.7

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

@@ -1,7 +1,6 @@
-/* eslint-disable */
 import Ext from "../../../tr-grid-util/es6/Ext.js";
 import ElementWrapper from "./components/ElementWrapper.js";
-import ILayoutGrid from "./ILayoutGrid.js";
+import ILayoutGrid from "./ILayoutGrid.js"; // eslint-disable-line
 import LayoutGrid from "./LayoutGrid.js";
 import DataTable from "../data/DataTable.js";
 import DataView from "../data/DataView.js";
@@ -13,7 +12,6 @@ import TrackLayout from "./util/TrackLayout.js";
 import HScrollbar from "./components/HScrollbar.js";
 import VScrollbar from "./components/VScrollbar.js";
 import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
-/* eslint-enable */
 
 //#region Events
 /** @event Core#sectionAdded */
@@ -51,6 +49,15 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 */
 //#endregion Events
 
+/** @private
+* @param {number} a
+* @param {number} b
+* @return {number}
+*/
+var ascNumberSorter = function (a, b) {
+	return a - b;
+};
+
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
 * @extends {ElementWrapper}
@@ -188,7 +195,8 @@ var Core = function (opt_initializer) {
 		"rowAdded",
 		"rowRemoved",
 		"columnPositionChanged",
-		"rowPositionChanged"
+		"rowPositionChanged",
+		"beforeColumnBoundUpdate"
 	);
 
 	// For debugging in advanced optimization mode
@@ -208,13 +216,13 @@ var Core = function (opt_initializer) {
 	Core._runningGridId++;
 
 	// init hiddenInput for retrieve copy and cut event
-	var hiddenInput = document.createElement('input');
-	hiddenInput.style.position = 'absolute';
-	hiddenInput.style.width = '0';
-	hiddenInput.style.height = '0';
-	hiddenInput.style.padding = '0';
-	hiddenInput.style.border = '0';
-	hiddenInput.value = '0';
+	var hiddenInput = document.createElement("input");
+	hiddenInput.style.position = "absolute";
+	hiddenInput.style.width = "0";
+	hiddenInput.style.height = "0";
+	hiddenInput.style.padding = "0";
+	hiddenInput.style.border = "0";
+	hiddenInput.value = "0";
 	_t._hiddenInput = hiddenInput;
 	elem.insertBefore(hiddenInput, elem.firstChild);
 
@@ -520,7 +528,7 @@ Core.prototype._rowHeightTimerId = 0;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.59";
+	return "5.1.20";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -684,6 +692,9 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this.hasClass("no-horizontal-grid-line")) {
 		obj["horizontalLines"] = false;
 	}
+	if(this.hasClass("no-content-vertical-line")) {
+		obj["contentVerticalLines"] = false;
+	}
 	if(this._bottomPaddingSect) {
 		obj["contentBottomPadding"] = this._bottomPadding;
 	}
@@ -1517,13 +1528,118 @@ Core.prototype.isColumnMoveAllowed = function (fromColIndex, toColIndex) {
 	return true;
 };
 
+/** This method is used for checking movability of column.
+* @public
+* @param {number} colIndex Index of the column.
+* @return {boolean} Return true if the column moving is movable, and false otherwise
+*/
+Core.prototype.isColumnMovable = function (colIndex) {
+	var stationaryIndex = this.getStationaryColumnIndex();
+
+	if (stationaryIndex > -1) {
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
 /** @public
-* @param {number} fromCol INCLUSIVE
+* @param {number|Array.<number>} fromCol INCLUSIVE index/indices of the column to be moved
 * @param {number} destCol INCLUSIVE
 * @return {boolean} Return true if there is any change, and false otherwise
 * @fires Core#columnMoved
 */
 Core.prototype.moveColumn = function (fromCol, destCol) {
+	if(typeof fromCol === "number") {
+		return this._moveColumn(fromCol, destCol);
+	}
+	if(!Array.isArray(fromCol)) {
+		return false;
+	}
+
+	// Validate user inputs
+	var i;
+	var len = fromCol.length;
+	var colIndices = [];
+	var colIndex = 0;
+	var colCount = this.getColumnCount();
+	var dict = {};
+	for(i = 0; i < len; ++i) {
+		colIndex = fromCol[i];
+		if(colIndex >= 0 && colIndex < colCount) { // Filter out invalid index
+			if(dict[colIndex] == null) { // Remove duplication
+				dict[colIndex] = 1;
+				colIndices.push(colIndex);
+			}
+		}
+	}
+	if (destCol < 0) {
+		destCol = 0;
+	} else if (destCol >= colCount) {
+		destCol = colCount - 1;
+	}
+
+	// Skip unneccessary cases
+	len = colIndices.length;
+	if(!len) {
+		return false;
+	}
+	if(len === 1) {
+		return this._moveColumn(colIndices[0], destCol);
+	}
+	if(!this.isColumnMoveAllowed(colIndices, destCol)) {
+		return false;
+	}
+
+	colIndices.sort(ascNumberSorter);
+	if(dict[destCol]) { // Destination falls in the same place as source columns
+		// Check if source columns are in continuous sequence
+		var continuousSequence = true;
+		colIndex = colIndices[0];
+		for(i = 1; i < len; ++i) {
+			if(++colIndex !== colIndices[i]) {
+				continuousSequence = false;
+				break;
+			}
+		}
+		if(continuousSequence) {
+			return false; // No moving operation is required
+		}
+	}
+	var prevState = this.freezeLayout(true);
+
+	// Start moving multiple items
+	var rhsCount = 0;
+	var srcIndex, destIndex;
+	// Perform move operation on the right hand side
+	for(i = 0; i < len; ++i) {
+		srcIndex = colIndices[i];
+		if(srcIndex >= destCol) {
+			destIndex = destCol + rhsCount;
+			this._moveColumn(srcIndex, destIndex);
+			++rhsCount;
+		}
+	}
+	// Perform move operation on the left hand side
+	var lhsCount = len - rhsCount;
+	destIndex = rhsCount ? destCol - 1 : destCol;
+	for(i = 0; i < lhsCount; ++i) {
+		srcIndex = colIndices[i] - i;
+		this._moveColumn(srcIndex, destIndex);
+	}
+
+	this.freezeLayout(prevState);
+	return true;
+};
+/** @private
+* @param {number} fromCol INCLUSIVE
+* @param {number} destCol INCLUSIVE
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires Core#columnMoved
+*/
+Core.prototype._moveColumn = function (fromCol, destCol) {
 	var colCount = this.getColumnCount();
 	if (fromCol < 0) { fromCol = 0; }
 	else if (fromCol >= colCount) { fromCol = colCount - 1; }
@@ -1608,6 +1724,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
+	this._updateColumnBounds();
 	return true;
 };
 
@@ -2814,6 +2931,7 @@ Core.prototype.isLayoutFrozen = function () {
 
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_shown
 * @see {@link Core#toggleBorders}
@@ -2821,6 +2939,7 @@ Core.prototype.isLayoutFrozen = function () {
 Core.prototype.showBorders = Util._deprecatedFunction;
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_hidden
 * @see {@link Core#toggleBorders}
@@ -2854,6 +2973,14 @@ Core.prototype.toggleVerticalLines = function(forcedVal) {
 Core.prototype.toggleHorizontalLines = function(forcedVal) {
 	this.toggleClass("no-horizontal-grid-line", forcedVal != null ? !forcedVal : null);
 };
+/** Toggle vertical gridlines. This applies to ONLY content sections.
+* @public
+* @param {boolean=} forcedVal If value is true, show horizontal lines, otherwise hide them
+*/
+Core.prototype.toggleContentVerticalLines = function(forcedVal) {
+	this.toggleClass("no-content-vertical-line", forcedVal != null ? !forcedVal : null);
+};
+
 
 /** @public
 * @return {Array.<string>}
@@ -3669,18 +3796,18 @@ Core.prototype.isBinding = function() {
 };
 
 /**
- * Hide row(s) in the Grid by specifying the rId
+ * Hide the specified rows by row id
  * @param {number | string} rowId rowId of the row to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRow = function (rowId, hidden) {
 	this._dataSource.hideRow(rowId, hidden);
 };
 /**
- * Hide row(s) in the Grid by specifying the rIds
+ * Hide the specified rows by rowIds
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRows = function (rowIds, hidden) {
@@ -3692,9 +3819,9 @@ Core.prototype.hideRows = function (rowIds, hidden) {
 };
 
 /**
- * Show row(s) in the Grid by specifying the rIds
+ * Show the specified rows by rowIds. To show all rows, use unhideAllRows method for better performance.
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to show
- * @param {boolean=} shown if false, hide instead of show
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
  * @public
  */
 Core.prototype.showRows = function (rowIds, shown) {
@@ -3715,7 +3842,7 @@ Core.prototype.unhideAllRows = function () {
 
 /**
  * @public
- * @returns {boolean}
+ * @return {boolean}
  */
 Core.prototype.hasHiddenRow = function () {
 	return this._dataSource.hasHiddenRow();
@@ -3794,10 +3921,22 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
+	var colCount = this.getColumnCount();
+	var colIndices = [];
+	var i;
+	for(i = 0; i < colCount; i++) {
+		if(this.isSelectedColumn(i)) {
+			colIndices.push(i);
+		}
+	}
+	var arg = {
+		selectedColumns: colIndices
+	};
+	this._dispatch("beforeColumnBoundUpdate", arg);
+
 	var len = this.getColumnCount();
 	var lftIdx = -1;
 	var rgtIdx = -1;
-	var i;
 	for(i = 0; i < len; ++i) {
 		if(this.isSelectedColumn(i)) {
 			rgtIdx = i;
@@ -3808,12 +3947,17 @@ Core.prototype._updateColumnBounds = function () {
 	}
 	var sectCount = this._settings.length;
 	if(sectCount) {
-		var section = this._settings[0].getSection();
+		var sectionSetting = this._settings[0];
+		var section = sectionSetting.getSection();
 		var positions = [0, 0];
 		var noBorders = [false, false];
 		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
-
-		for (i = sectCount; --i >= 0; ) {
+		var topPx = 0;
+		if(sectionSetting.getType() === "title" && arg.topBoundRowIndex != null) {
+			topPx = this._layoutY.getLaneStart(arg.topBoundRowIndex);
+		}
+		section.updateColumnBounds(positions, noBorders, topPx);
+		for(i = 1; i < sectCount; i++) {
 			section = this._settings[i].getSection();
 			section.updateColumnBounds(positions, noBorders);
 		}
@@ -4983,6 +5127,10 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 * @param {boolean} contentChanged
 */
 Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
+	if (this._frozenLayout) {
+		return;
+	}
+
 	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
 		var gridElem = this.getElement();
@@ -5187,7 +5335,7 @@ Core.prototype._updateLayout = function () {
 	this._syncLayoutToColumns(); // Update only if need
 
 	this._updateScrollbarHeight(true, true);
-	this._updateScrollbarWidth(true, true);
+	this._updateScrollbarWidth(true, true); // WARNING this may be redundant with _syncLayoutToColumns
 
 	var sectionCount = this.getSectionCount();
 	for (var s = 0; s < sectionCount; ++s) {

package/lib/core/es6/grid/ILayoutGrid.d.ts

@@ -4,7 +4,7 @@ import TrackLayout from "./util/TrackLayout.js";
 
 declare interface ILayoutGrid extends ElementWrapper {
 
-     hitTest(x: number, y: number, opt_omitSpan?: boolean): any|null|null;
+     hitTest(x: number, y: number, opt_omitSpan?: boolean|null): any|null|null;
 
      hitTestX(x: number): number;
 
@@ -28,11 +28,11 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      isColumnVisible(colIndex: number): boolean;
 
-     hideColumn(colIndex: number, val?: boolean): boolean;
+     hideColumn(colIndex: number, val?: boolean|null): boolean;
 
      isRowVisible(rowIndex: number): boolean;
 
-     hideRow(rowIndex: number, val?: boolean): boolean;
+     hideRow(rowIndex: number, val?: boolean|null): boolean;
 
      getMinimumColumnWidth(colIndex: number): number;
 
@@ -76,7 +76,7 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      setRowScalability(rowIndex: number, val: boolean): boolean;
 
-     getCell(colIndex: number, rowIndex: number, opt_includeSpan?: boolean): ElementWrapper|null;
+     getCell(colIndex: number, rowIndex: number, opt_includeSpan?: boolean|null): ElementWrapper|null;
 
      getCellContent(colIndex: number, rowIndex: number): Element|Node|NodeList|null;
 
@@ -90,7 +90,7 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      getRowCount(): number;
 
-     setRowCount(val: number, noBinding?: boolean): void;
+     setRowCount(val: number, noBinding?: boolean|null): void;
 
      getVisibleRowCount(): number;
 
@@ -104,13 +104,13 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      setColumnStyle(colIndex: number, styleName: string, value: string): void;
 
-     enableColumnClass(colIndex: number, className: string, enabled?: boolean): void;
+     enableColumnClass(colIndex: number, className: string, enabled?: boolean|null): void;
 
      hasColumnClass(): boolean;
 
      enableRowClass(rowIndex: number, className: string, enabled: boolean): void;
 
-     setRowStyle(rowIndex: number, styleName: string, value?: string|null, enabled?: boolean): void;
+     setRowStyle(rowIndex: number, styleName: string, value?: string|null|null, enabled?: boolean|null): void;
 
      getRelativePosition(obj: ElementWrapper|Element|Event|MouseEvent): any;
 
@@ -120,15 +120,15 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      getCellsByRowIndex(rowIndex: number): (ElementWrapper)[]|null;
 
-     disableHorizontalGridLine(opt_bool?: boolean): void;
+     disableHorizontalGridLine(opt_bool?: boolean|null): void;
 
-     disableVerticalGridLine(opt_bool?: boolean): void;
+     disableVerticalGridLine(opt_bool?: boolean|null): void;
 
      enableShading(enabled: boolean): void;
 
      setTransposedShading(enabled: boolean): void;
 
-     enableRowHighlighting(opt_bool?: boolean): void;
+     enableRowHighlighting(opt_bool?: boolean|null): void;
 
      getRowHighlight(): number;
 
@@ -144,7 +144,7 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      setRowAnchor(at: number): void;
 
-     setSelectedRow(rowIndex: number, opt_selected?: boolean): void;
+     setSelectedRow(rowIndex: number, opt_selected?: boolean|null): void;
 
      selectSingleRow(rowIndex: number): void;
 
@@ -156,7 +156,7 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      getLastSelectedRow(): number;
 
-     activateRows(from?: number, to?: number, opt_updateRange?: (number)[]): void;
+     activateRows(from?: number|null, to?: number|null, opt_updateRange?: (number)[]|null): void;
 
      getFirstIndexInView(): number;
 
@@ -164,21 +164,21 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      isInCurrentView(index: number): boolean;
 
-     getColumnIndex(colElem: Element|Node): number;
+     getColumnIndex(colElem: Element|Node|null): number;
 
-     getCellIndex(colIndex: number, cellElem: Element): number;
+     getCellIndex(colIndex: number, cellElem: Element|null): number;
 
      getIndex(): number;
 
      getRowOffset(): number;
 
-     stretchCell(cellRef: number|Cell, rowIndex?: number, opt_stretching?: boolean, onlyToTheRight?: boolean): Cell|null;
+     stretchCell(cellRef: number|Cell|null, rowIndex?: number|null, opt_stretching?: boolean|null, onlyToTheRight?: boolean|null): Cell|null;
 
-     unstretchCell(cellRef: number|Cell, rowIndex?: number): Cell|null;
+     unstretchCell(cellRef: number|Cell|null, rowIndex?: number|null): Cell|null;
 
      unstretchAllCells(): void;
 
-     getStretchedCell(cellRef: number|Cell, rowIndex?: number): Cell|null;
+     getStretchedCell(cellRef: number|Cell|null, rowIndex?: number|null): Cell|null;
 
      getStretchedCells(): (Cell)[];
 
@@ -194,15 +194,15 @@ declare interface ILayoutGrid extends ElementWrapper {
 
      isColumnActive(colIndex: number): boolean;
 
-     setRowAttributes(rowIndex: number, func: ((...params: any[]) => any)[]): void;
+     setRowAttributes(rowIndex: number, func: ((...params: any[]) => any)[]|null): void;
 
      getContextRow(rowIndex: number): any;
 
-     selectColumn(colIndex: number, selected?: boolean): void;
+     selectColumn(colIndex: number, selected?: boolean|null): void;
 
      isSelectedColumn(colIndex: number): boolean;
 
-     selectCell(colIndex: number, rowIndex: number, selected?: boolean): void;
+     selectCell(colIndex: number, rowIndex: number, selected?: boolean|null): void;
 
      setCellBounds(colIndex: number, rowIndex: number, width: number, height: number): void;
 

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

@@ -694,8 +694,9 @@ ILayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPosit
 * @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
+* @param {number=} topPx Top position of bound
 */
-ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {};
+ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {};
 
 export default ILayoutGrid;
 export { ILayoutGrid };

package/lib/core/es6/grid/LayoutGrid.d.ts

@@ -18,11 +18,11 @@ declare class LayoutGrid extends ElementWrapper {
 
     public getContextRow(rowIndex: number): any;
 
-    public selectColumn(colIndex: number, selected?: boolean): void;
+    public selectColumn(colIndex: number, selected?: boolean|null): void;
 
     public isSelectedColumn(colIndex: number): boolean;
 
-    public selectCell(colIndex: number, rowIndex: number, selected?: boolean): void;
+    public selectCell(colIndex: number, rowIndex: number, selected?: boolean|null): void;
 
     public setCellBounds(colIndex: number, rowIndex: number, width: number, height: number): void;
 

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

@@ -531,10 +531,8 @@ LayoutGrid.prototype._updateColumnLayout = function () {
 /** @public
  * @ignore
  * @param {boolean} enabled
- * @param {number=} fromR
- * @param {number=} toR
  */
-LayoutGrid.prototype._startBindingSession = function (enabled, fromR, toR) {
+LayoutGrid.prototype._startBindingSession = function (enabled) {
 	// Prevent error when calling _startBindingSession in LayoutGrid
 };
 /** @public
@@ -1751,8 +1749,14 @@ LayoutGrid.prototype.moveColumn = function (from, to) {
 
 	Util.moveArrayItem(this._columns, from, to);
 
-	var nextSibling = this._columns[to + 1] || null;
-	movedColumn.insertBefore(nextSibling);
+	if(movedColumn.getElement().offsetParent) {
+		var siblingIndex = to + 1;
+		var nextSibling = this._columns[siblingIndex] || null;
+		while (nextSibling && !nextSibling.getElement().offsetParent) {
+			nextSibling = this._columns[++siblingIndex];
+		}
+		movedColumn.insertBefore(nextSibling);
+	}
 
 	this._updateColumnIndices();
 	this._updateCellSpans(cellSpans, true); // Restore all styling
@@ -1971,6 +1975,10 @@ LayoutGrid.prototype.updateStretchedCells = function () {
 * @return {number}
 */
 LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
+	if(this._frozenLayout) {
+		return this._stretchedCells.getStretchSize();
+	}
+
 	var ctx = this._ctx;
 	var stretchSize = forceRecal ? 0 : this._stretchedCells.getStretchSize();
 	if(!stretchSize && ctx) {
@@ -1978,9 +1986,6 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 			var contentWidth = this.getContentWidth();
 			stretchSize = ctx["getWidth"]();
 			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;
 				}
@@ -2328,8 +2333,9 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 * @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
+* @param {number=} topPx Top position of bound
 */
-LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
 	var columnBound = this._columnBound;
 	if(!columnBound) {
 		return;
@@ -2346,7 +2352,9 @@ LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
 		columnBound.style.left = lftPx + "px";
 		columnBound.style.width = (rgtPx - lftPx) + "px";
 
-		columnBound.style.height = this._trackY.getTrackSize() + "px";
+		topPx = topPx || 0;
+		columnBound.style.top = topPx + "px";
+		columnBound.style.height = (this._trackY.getTrackSize() - topPx) + "px";
 		columnBound.classList.toggle("no-left-bound", noBorders[0]);
 		columnBound.classList.toggle("no-right-bound", noBorders[1]);
 		if(this._boundLayer) {

package/lib/core/es6/grid/VirtualizedLayoutGrid.d.ts

@@ -13,11 +13,11 @@ declare class VirtualizedLayoutGrid extends ElementWrapper {
 
     public getContextRow(rowIndex: number): any;
 
-    public selectColumn(colIndex: number, selected?: boolean): void;
+    public selectColumn(colIndex: number, selected?: boolean|null): void;
 
     public isSelectedColumn(colIndex: number): boolean;
 
-    public selectCell(colIndex: number, rowIndex: number, selected?: boolean): void;
+    public selectCell(colIndex: number, rowIndex: number, selected?: boolean|null): void;
 
     public setCellBounds(colIndex: number, rowIndex: number, width: number, height: number): void;
 

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

@@ -849,12 +849,22 @@ VirtualizedLayoutGrid.prototype.updateLayout = function () {
 /** {@link ILayoutGrid#stretchCell}
 * @inheritDoc */
 VirtualizedLayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching, onlyToTheRight) {
-	return this._grid.stretchCell(
+	var stretchedCell = this._grid.stretchCell(
 		cellRef,
 		(rowIndex != null) ? rowIndex - this._firstIndex : null,
 		opt_stretching,
 		onlyToTheRight
 	);
+
+	if (stretchedCell){
+		var cellElem = stretchedCell.getElement();
+		if(rowIndex === 0) {
+			cellElem.classList.add("top");
+		} else {
+			cellElem.classList.remove("top");
+		}
+	}
+	return stretchedCell;
 };
 
 /** {@link ILayoutGrid#unstretchCell}
@@ -1073,9 +1083,10 @@ VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
 * @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
+* @param {number=} topPx Top position of bound
 */
-VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
-	this._grid.updateColumnBounds(positions, noBorders);
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
+	this._grid.updateColumnBounds(positions, noBorders, topPx);
 	this._updateRowBounds();
 };
 /** @private

package/lib/core/es6/grid/components/Cell.d.ts

@@ -6,7 +6,7 @@ import CellFloatingPanel from "../components/CellFloatingPanel.js";
 
 declare class Cell extends ElementWrapper {
 
-    constructor(opt_element?: Element, opt_section?: ILayoutGrid);
+    constructor(opt_element?: Element|null, opt_section?: ILayoutGrid|null);
 
     public setTextContent(str: string): void;
 
@@ -18,7 +18,7 @@ declare class Cell extends ElementWrapper {
 
     public initialize(): Element;
 
-    public updateIcon(icon: Element): void;
+    public updateIcon(icon: Element|null): void;
 
     public removeIcon(): void;
 
@@ -32,13 +32,13 @@ declare class Cell extends ElementWrapper {
 
     public resetToInitialState(): void;
 
-    public insertFloatingIcon(elem: Element, opt_order?: number): void;
+    public insertFloatingIcon(elem: Element|null, opt_order?: number|null): void;
 
-    public removeFloatingIcon(elemRef: Element|string): Element|null|null;
+    public removeFloatingIcon(elemRef: Element|string|null): Element|null|null;
 
-    public insertFrontIcon(elem: Element, opt_order?: number): void;
+    public insertFrontIcon(elem: Element|null, opt_order?: number|null): void;
 
-    public removeFrontIcon(elemRef: Element|string): Element|null|null;
+    public removeFrontIcon(elemRef: Element|string|null): Element|null|null;
 
     public updatePadding(): void;
 

package/lib/core/es6/grid/components/Cell.js

@@ -382,6 +382,9 @@ Cell.prototype.updateIcon = function(icon) {
 
 	var fi = this._frontIcon;
 	if (fi) {
+		if(fi.containItem(icon)) { // Check same icon which duplicate with insertItem in _frontIcon
+			return;
+		}
 		fi.clearItems();
 	}
 	this.insertFrontIcon(icon, 0);