@syncfusion/ej2-treegrid 20.3.60 → 20.4.38

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -58,11 +58,12 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var selectedRow = collection[index - startIdx];
         if (this.parent.frozenRows && this.parent.pageSettings.currentPage > 1) {
             if (!isRowObject) {
-                selectedRow = index <= this.parent.frozenRows ? rowCollection[index]
+                selectedRow = index <= this.parent.frozenRows ? rowCollection[parseInt(index.toString(), 10)]
                     : rowCollection[(index - startIdx) + this.parent.frozenRows];
             }
             else {
-                selectedRow = index <= this.parent.frozenRows ? this.parent.getRowsObject()[index].data : selectedRow;
+                selectedRow = index <= this.parent.frozenRows ?
+                    this.parent.getRowsObject()[parseInt(index.toString(), 10)].data : selectedRow;
             }
         }
         return selectedRow;
@@ -111,26 +112,26 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var _this = this;
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
-            this.parent[action]('data-ready', this.onDataReady, this);
-            this.parent[action]('refresh-virtual-block', this.refreshContentRows, this);
+            this.parent["" + action]('data-ready', this.onDataReady, this);
+            this.parent["" + action]('refresh-virtual-block', this.refreshContentRows, this);
             this.fn = function () {
                 _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction(), _this.parent);
                 _this.parent.off('content-ready', _this.fn);
             };
             this.parent.addEventListener('dataBound', this.dataBoundEvent.bind(this));
             this.parent.addEventListener('rowSelected', this.rowSelectedEvent.bind(this));
-            this.parent[action]('select-virtual-Row', this.toSelectVirtualRow, this);
+            this.parent["" + action]('select-virtual-Row', this.toSelectVirtualRow, this);
             this.parent.on('content-ready', this.fn, this);
             this.parent.addEventListener(events.actionComplete, this.onActionComplete.bind(this));
-            this.parent[action]('virtual-scroll-edit-action-begin', this.beginEdit, this);
-            this.parent[action]('virtual-scroll-add-action-begin', this.beginAdd, this);
-            this.parent[action]('virtual-scroll-edit-success', this.virtualEditSuccess, this);
-            this.parent[action]('edit-reset', this.resetIseditValue, this);
-            this.parent[action]('get-virtual-data', this.getData, this);
-            this.parent[action]('virtual-scroll-edit-cancel', this.cancelEdit, this);
-            this.parent[action]('select-row-on-context-open', this.toSelectRowOnContextOpen, this);
-            this.parent[action]('refresh-virtual-editform-cells', this.refreshCell, this);
-            this.parent[action]('virtaul-cell-focus', this.cellFocus, this);
+            this.parent["" + action]('virtual-scroll-edit-action-begin', this.beginEdit, this);
+            this.parent["" + action]('virtual-scroll-add-action-begin', this.beginAdd, this);
+            this.parent["" + action]('virtual-scroll-edit-success', this.virtualEditSuccess, this);
+            this.parent["" + action]('edit-reset', this.resetIseditValue, this);
+            this.parent["" + action]('get-virtual-data', this.getData, this);
+            this.parent["" + action]('virtual-scroll-edit-cancel', this.cancelEdit, this);
+            this.parent["" + action]('select-row-on-context-open', this.toSelectRowOnContextOpen, this);
+            this.parent["" + action]('refresh-virtual-editform-cells', this.refreshCell, this);
+            this.parent["" + action]('virtaul-cell-focus', this.cellFocus, this);
         }
         else {
             _super.prototype.eventListener.call(this, 'on');
@@ -138,7 +139,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     };
     VirtualTreeContentRenderer.prototype.cellFocus = function (e) {
         var virtualCellFocus = 'virtualCellFocus';
-        _super.prototype[virtualCellFocus].call(this, e);
+        _super.prototype["" + virtualCellFocus].call(this, e);
     };
     VirtualTreeContentRenderer.prototype.onDataReady = function (e) {
         _super.prototype.onDataReady.call(this, e);
@@ -192,22 +193,22 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     VirtualTreeContentRenderer.prototype.dataBoundEvent = function () {
         var dataBoundEve = 'dataBound';
         var initialRowTop = 'initialRowTop';
-        if (this.parent.getRows().length && !this[initialRowTop] && !isNullOrUndefined(this.parent.getRowByIndex(0))) {
+        if (!isNullOrUndefined(this.parent.getRowByIndex(0)) && this.parent.getRows().length && !this["" + initialRowTop]) {
             var rowTop = this.parent.getRowByIndex(0).getBoundingClientRect().top;
             var gridTop = this.parent.element.getBoundingClientRect().top;
             if (rowTop > 0) {
-                this[initialRowTop] = this.parent.getRowByIndex(0).getBoundingClientRect().top - gridTop;
+                this["" + initialRowTop] = this.parent.getRowByIndex(0).getBoundingClientRect().top - gridTop;
             }
             else {
-                this[initialRowTop] = this.content.getBoundingClientRect().top -
+                this["" + initialRowTop] = this.content.getBoundingClientRect().top -
                     this.parent.getRowByIndex(0).getBoundingClientRect().height;
             }
         }
-        _super.prototype[dataBoundEve].call(this);
+        _super.prototype["" + dataBoundEve].call(this);
     };
     VirtualTreeContentRenderer.prototype.rowSelectedEvent = function (args) {
         var rowSelected = 'rowSelected';
-        _super.prototype[rowSelected].call(this, args);
+        _super.prototype["" + rowSelected].call(this, args);
     };
     VirtualTreeContentRenderer.prototype.toSelectVirtualRow = function (args) {
         if (this.parent.isEdit) {
@@ -215,12 +216,12 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         }
         var selectVirtualRow = 'selectVirtualRow';
         var containerRect = 'containerRect';
-        if (isNullOrUndefined(this.observer[containerRect])) {
-            this.observer[containerRect] = this.observers[containerRect];
+        if (isNullOrUndefined(this.observer["" + containerRect])) {
+            this.observer["" + containerRect] = this.observers["" + containerRect];
         }
         if (isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule) || args.selectedIndex !== 0 ||
             isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
-            _super.prototype[selectVirtualRow].call(this, args);
+            _super.prototype["" + selectVirtualRow].call(this, args);
         }
     };
     VirtualTreeContentRenderer.prototype.refreshCell = function (rowObj) {
@@ -229,7 +230,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     VirtualTreeContentRenderer.prototype.generateCells = function () {
         var cells = [];
         for (var i = 0; i < this.parent.columns.length; i++) {
-            cells.push(this.generateCell(this.parent.columns[i]));
+            cells.push(this.generateCell(this.parent.columns[parseInt(i.toString(), 10)]));
         }
         return cells;
     };
@@ -255,7 +256,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         this['editedRowIndex'] = e.index;
         var selector = '.e-row[data-rowindex="' + e.index + '"]';
         var index = this.parent.getContent().querySelector(selector).rowIndex;
-        var rowData = this.parent.getCurrentViewRecords()[index];
+        var rowData = this.parent.getCurrentViewRecords()[parseInt(index.toString(), 10)];
         e.data = rowData;
     };
     VirtualTreeContentRenderer.prototype.beginAdd = function (args) {
@@ -271,51 +272,51 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
         var withInRange = this.parent.selectedRowIndex >= firstAriaIndex && this.parent.selectedRowIndex <= lastAriaIndex;
         if (!(this.rowPosition === 'Top' || this.rowPosition === 'Bottom')) {
-            this[isAdd] = true;
+            this["" + isAdd] = true;
         }
         if (this.rowPosition === 'Top' || this.rowPosition === 'Bottom' ||
             ((!this.addRowIndex || this.addRowIndex === -1) && (this.parent.selectedRowIndex === -1 || !withInRange))) {
-            _super.prototype[addAction].call(this, args);
+            _super.prototype["" + addAction].call(this, args);
         }
     };
     VirtualTreeContentRenderer.prototype.restoreEditState = function () {
         var restoreEdit = 'restoreEdit';
-        _super.prototype[restoreEdit].call(this);
+        _super.prototype["" + restoreEdit].call(this);
     };
     VirtualTreeContentRenderer.prototype.resetIseditValue = function () {
         var resetIsEdit = 'resetIsedit';
         var isAdd = 'isAdd';
         this.parent.notify('reset-edit-props', {});
-        if ((this.rowPosition === 'Top' || this.rowPosition === 'Bottom') && this[isAdd]) {
-            _super.prototype[resetIsEdit].call(this);
+        if ((this.rowPosition === 'Top' || this.rowPosition === 'Bottom') && this["" + isAdd]) {
+            _super.prototype["" + resetIsEdit].call(this);
         }
     };
     VirtualTreeContentRenderer.prototype.virtualEditSuccess = function () {
         var isAdd = 'isAdd';
         var content = this.parent.getContent().querySelector('.e-content');
-        if (this[isAdd] && content.querySelector('.e-addedrow')) {
+        if (this["" + isAdd] && content.querySelector('.e-addedrow')) {
             this.recordAdded = true;
         }
     };
     VirtualTreeContentRenderer.prototype.cancelEdit = function (args) {
         var editCancel = 'editCancel';
-        _super.prototype[editCancel].call(this, args);
+        _super.prototype["" + editCancel].call(this, args);
     };
     VirtualTreeContentRenderer.prototype.toSelectRowOnContextOpen = function (args) {
         var selectRowOnContextOpen = 'selectRowOnContextOpen';
-        _super.prototype[selectRowOnContextOpen].call(this, args);
+        _super.prototype["" + selectRowOnContextOpen].call(this, args);
     };
     VirtualTreeContentRenderer.prototype.restoreNewRow = function () {
         var isAdd = 'isAdd';
         var content = this.parent.getContent().querySelector('.e-content');
-        if (this[isAdd] && !content.querySelector('.e-addedrow')) {
+        if (this["" + isAdd] && !content.querySelector('.e-addedrow')) {
             this.parent.isEdit = false;
             this.parent.editModule.addRecord(null, this.parent.root.editModule.selectedIndex);
         }
     };
     VirtualTreeContentRenderer.prototype.getData = function (data) {
         var getVirtualData = 'getVirtualData';
-        _super.prototype[getVirtualData].call(this, data);
+        _super.prototype["" + getVirtualData].call(this, data);
     };
     VirtualTreeContentRenderer.prototype.onActionComplete = function (args) {
         if (args.requestType === 'add') {
@@ -326,17 +327,25 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.dataRowIndex = this.parent.root.editModule.selectedIndex;
         }
         var actionComplete = 'actionComplete';
-        _super.prototype[actionComplete].call(this, args);
+        _super.prototype["" + actionComplete].call(this, args);
     };
     VirtualTreeContentRenderer.prototype.onEnteredAction = function () {
         var _this = this;
         return function (element, current, direction, e, isWheel, check) {
             var directVirtualRender = 'directVirtualRender';
-            if (!_this.parent[directVirtualRender]) { // with this property, columns are rendered without debouncing on horizontal scroll.
+            if (!_this.parent["" + directVirtualRender]) { // with this property, columns are rendered without debouncing on horizontal scroll.
                 var preventEvent = 'preventEvent';
-                if (Browser.isIE && !isWheel && check && !_this[preventEvent]) {
+                if (Browser.isIE && !isWheel && check && !_this["" + preventEvent] && !_this.parent.enableVirtualMaskRow) {
                     _this.parent.showSpinner();
                 }
+                if (_this.parent.enableVirtualMaskRow && !_this["" + preventEvent]) {
+                    setTimeout(function () {
+                        _this.parent.showMaskRow(current.axis);
+                        _this.parent.notify('showGanttShimmer', { requestType: 'showShimmer' });
+                    }, 0);
+                }
+                var height = _this.content.getBoundingClientRect().height;
+                var top_1 = _this.prevInfo.offsets ? _this.prevInfo.offsets.top : null;
                 var xAxis = current.axis === 'X';
                 var x = _this.getColumnOffset(xAxis ? _this.vgenerator.getColumnIndexes()[0] - 1 : _this.prevInfo.columnIndexes[0]
                     - 1);
@@ -345,8 +354,16 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     var maxLeft = _this.vgenerator.cOffsets[idx - 1];
                     x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
                 }
-                if (!_this.parent.isFrozenGrid()) {
-                    _this.virtualEle.adjustTable(x, _this.translateY);
+                var y = _this.getTranslateY(e.top, height, xAxis && top_1 === e.top ? _this.prevInfo : undefined, true);
+                if (!_this.parent.isFrozenGrid() || _this.parent.enableVirtualMaskRow) {
+                    if (_this.parent.enableVirtualMaskRow) {
+                        var upScroll = (e.top - _this.translateY) < 0;
+                        y = (Math.round(_this.translateY) > y && !upScroll) ? Math.round(_this.translateY) : y;
+                        _this.virtualEle.adjustTable(x, y);
+                    }
+                    else {
+                        _this.virtualEle.adjustTable(x, _this.translateY);
+                    }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
                     }
@@ -357,23 +374,24 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
         this['scrollAfterEdit']();
         var info = scrollArgs.sentinel;
+        var rowHeight = this.parent.getRowHeight();
         var outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
         var content = this.parent.getContent().querySelector('.e-content');
-        var scrollHeight = outBuffer * this.parent.getRowHeight();
+        var scrollHeight = outBuffer * rowHeight;
         var upScroll = (scrollArgs.offset.top - this.translateY) < 0;
-        var downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) >= scrollHeight;
+        var downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) + rowHeight >= scrollHeight;
         var selectedRowIndex = 'selectedRowIndex';
         var currentViewData = this.parent.currentViewData;
         var indexValue = 'index';
         if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
             var vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? this.parent.height :
                 this.parent.element.getBoundingClientRect().height);
-            var index = (~~(content.scrollTop / this.parent.getRowHeight())
-                + Math.ceil(vHeight / this.parent.getRowHeight()))
+            var index = (~~(content.scrollTop / rowHeight)
+                + Math.ceil(vHeight / rowHeight))
                 - this.parent.pageSettings.pageSize;
             index = (index > 0) ? index : 0;
-            if (!isNullOrUndefined(this[selectedRowIndex]) && this[selectedRowIndex] !== -1 && index !== this[selectedRowIndex]) {
-                index = this[selectedRowIndex];
+            if (!isNullOrUndefined(this["" + selectedRowIndex]) && this["" + selectedRowIndex] !== -1 && index !== this["" + selectedRowIndex]) {
+                index = this["" + selectedRowIndex];
             }
             this.startIndex = index;
             this.endIndex = index + this.parent.pageSettings.pageSize;
@@ -383,41 +401,40 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 this.endIndex = lastInx;
                 this.startIndex = (this.startIndex - remains) < 0 ? 0 : (this.startIndex - remains);
             }
-            if (currentViewData.length && (currentViewData[0][indexValue] >= this.parent.pageSettings.pageSize / 2) &&
-                ((currentViewData[0][indexValue] - this.startIndex) < (this.parent.pageSettings.pageSize / 2))) {
-                this.startIndex = currentViewData[0][indexValue] - (this.parent.pageSettings.pageSize / 2);
+            if (currentViewData.length && (currentViewData[0]["" + indexValue] >= this.parent.pageSettings.pageSize / 2) &&
+                ((currentViewData[0]["" + indexValue] - this.startIndex) < (this.parent.pageSettings.pageSize / 2))) {
+                this.startIndex = currentViewData[0]["" + indexValue] - (this.parent.pageSettings.pageSize / 2);
                 this.endIndex = this.startIndex + this.parent.pageSettings.pageSize;
             }
             //var firsttdinx = parseInt(this.parent.getContent().querySelector('.e-content td').getAttribute('index'), 0);
-            var rowPt = Math.ceil(scrollArgs.offset.top / this.parent.getRowHeight());
+            var rowPt = Math.ceil(scrollArgs.offset.top / rowHeight);
             rowPt = rowPt % this.parent.pageSettings.pageSize;
             var firsttdinx = 0;
-            if (!isNullOrUndefined(this.parent.getRows()[rowPt]) &&
-                !isNullOrUndefined(this.parent.getContent().querySelectorAll('.e-content tr')[rowPt])) {
-                var attr = this.parent.getContent().querySelectorAll('.e-content tr')[rowPt]
+            if (!isNullOrUndefined(this.parent.getRows()[parseInt(rowPt.toString(), 10)]) &&
+                !isNullOrUndefined(this.parent.getContent().querySelectorAll('.e-content tr')[parseInt(rowPt.toString(), 10)])) {
+                var attr = this.parent.getContent().querySelectorAll('.e-content tr')[parseInt(rowPt.toString(), 10)]
                     .querySelector('td').getAttribute('index');
                 firsttdinx = +attr; // this.parent.getContent().querySelector('.e-content tr').getAttribute('data-rowindex');
             }
             if (firsttdinx === 0) {
                 if (this.parent.allowRowDragAndDrop) {
-                    this.translateY = scrollArgs.offset.top - this.parent.getRowHeight() * 2;
+                    this.translateY = scrollArgs.offset.top - rowHeight * 2;
                 }
                 else {
                     this.translateY = scrollArgs.offset.top;
                 }
             }
             else {
-                var height = this.parent.getRowHeight();
-                this.translateY = (scrollArgs.offset.top - (outBuffer * height) > 0) ?
-                    scrollArgs.offset.top - (outBuffer * height) + 10 : 0;
+                this.translateY = (scrollArgs.offset.top - (outBuffer * rowHeight) > 0) ?
+                    scrollArgs.offset.top - (outBuffer * rowHeight) + 10 : 0;
             }
         }
         else if (downScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
-            var nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
-            var isLastBlock = (this[selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
-            if (!isNullOrUndefined(this[selectedRowIndex]) && this[selectedRowIndex] !== -1 &&
-                nextSetResIndex !== this[selectedRowIndex] && !isLastBlock) {
-                nextSetResIndex = this[selectedRowIndex];
+            var nextSetResIndex = ~~(content.scrollTop / rowHeight);
+            var isLastBlock = (this["" + selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
+            if (!isNullOrUndefined(this["" + selectedRowIndex]) && this["" + selectedRowIndex] !== -1 &&
+                nextSetResIndex !== this["" + selectedRowIndex] && !isLastBlock) {
+                nextSetResIndex = this["" + selectedRowIndex];
             }
             var lastIndex = nextSetResIndex + this.parent.pageSettings.pageSize;
             if (lastIndex > this.totalRecords) {
@@ -426,26 +443,26 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             }
             this.startIndex = !isLastBlock ? lastIndex - this.parent.pageSettings.pageSize : nextSetResIndex;
             this.endIndex = lastIndex;
-            if (currentViewData.length && this.startIndex > currentViewData[0][indexValue] &&
-                ((this.startIndex - currentViewData[0][indexValue]) < (this.parent.pageSettings.pageSize / 2))) {
-                this.startIndex = currentViewData[0][indexValue] + (this.parent.pageSettings.pageSize / 2);
+            if (currentViewData.length && this.startIndex > currentViewData[0]["" + indexValue] &&
+                ((this.startIndex - currentViewData[0]["" + indexValue]) < (this.parent.pageSettings.pageSize / 2))) {
+                this.startIndex = currentViewData[0]["" + indexValue] + (this.parent.pageSettings.pageSize / 2);
             }
-            if (scrollArgs.offset.top > (this.parent.getRowHeight() * this.totalRecords)) {
+            if (scrollArgs.offset.top > (rowHeight * this.totalRecords)) {
                 this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
             }
             else {
                 if (this.parent.allowRowDragAndDrop) {
-                    this.translateY = scrollArgs.offset.top - this.parent.getRowHeight() * 2;
+                    this.translateY = scrollArgs.offset.top - rowHeight * 2;
                 }
                 else {
                     this.translateY = scrollArgs.offset.top;
                 }
             }
         }
-        if (((downScroll && (scrollArgs.offset.top < (this.parent.getRowHeight() * this.totalRecords)))
+        if (((downScroll && (scrollArgs.offset.top < (rowHeight * this.totalRecords)))
             || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left') ||
             ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent))) {
+                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') && (downScroll || upScroll) || isCountRequired(this.parent))) {
             var viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
             this.previousInfo = viewInfo;
             this.parent.setColumnIndexesInView(this.parent.enableColumnVirtualization ? viewInfo.columnIndexes : []);
@@ -455,8 +472,19 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
                 viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
             }
+            if (this.parent.enableVirtualMaskRow) {
+                this.parent.showMaskRow(info.axis);
+                this.parent.addShimmerEffect();
+                this.parent.notify('showGanttShimmer', { requestType: 'showShimmer' });
+            }
             this.parent.notify(viewInfo.event, { requestType: 'virtualscroll', virtualInfo: viewInfo, focusElement: scrollArgs.focusElement });
         }
+        else {
+            if (this.parent.enableVirtualMaskRow) {
+                this.parent.removeMaskRow();
+                this.parent.notify('removeGanttShimmer', { requestType: 'hideShimmer' });
+            }
+        }
     };
     VirtualTreeContentRenderer.prototype.appendContent = function (target, newChild, e) {
         var isFrozen = this.parent.isFrozenGrid();
@@ -465,7 +493,8 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             if (getValue('isExpandCollapse', e)) {
                 this.isRemoteExpand = true;
             }
-            if (isFrozen && isNullOrUndefined(this.requestType) && getValue('requestTypes', this).indexOf('isFrozen') === -1) {
+            if (isFrozen && ((isNullOrUndefined(this.requestType) && getValue('requestTypes', this).indexOf('isFrozen') === -1) ||
+                (this.parent.enableVirtualMaskRow && this.requestType === 'virtualscroll'))) {
                 getValue('requestTypes', this).push('isFrozen');
                 this.requestType = 'isFrozen';
             }
@@ -499,7 +528,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             target = this.parent.createElement('tbody');
             target.appendChild(newChild);
             var replace = 'replaceWith';
-            this.getTable().querySelector('tbody')[replace](target);
+            this.getTable().querySelector('tbody')["" + replace](target);
             if (!this.isExpandCollapse || this.translateY === 0) {
                 this.translateY = this.translateY < 0 ? 0 : this.translateY;
                 getValue('virtualEle', this).adjustTable(cOffset, this.translateY);
@@ -514,22 +543,22 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             var focusCell = 'focusCell';
             var restoreAdd = 'restoreAdd';
             var ensureSelectedRowPosition = 'ensureSelectedRowPosition';
-            _super.prototype[focusCell].call(this, e);
+            _super.prototype["" + focusCell].call(this, e);
             var isAdd = 'isAdd';
-            if (this[isAdd] && !this.parent.getContent().querySelector('.e-content').querySelector('.e-addedrow')) {
+            if (this["" + isAdd] && !this.parent.getContent().querySelector('.e-content').querySelector('.e-addedrow')) {
                 if (!(this.rowPosition === 'Top' || this.rowPosition === 'Bottom')) {
                     if (this.dataRowIndex >= this.startIndex) {
                         this.restoreNewRow();
                     }
                     else if (this.addRowIndex && this.addRowIndex > -1) {
-                        this[isAdd] = false;
+                        this["" + isAdd] = false;
                         this.parent.isEdit = false;
                     }
                 }
             }
             this.restoreEditState();
-            _super.prototype[restoreAdd].call(this);
-            _super.prototype[ensureSelectedRowPosition].call(this);
+            _super.prototype["" + restoreAdd].call(this);
+            _super.prototype["" + ensureSelectedRowPosition].call(this);
         }
     };
     VirtualTreeContentRenderer.prototype.removeEventListener = function () {
@@ -568,11 +597,11 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
     }
     TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback, instance) {
         var containerRect = 'containerRect';
-        _super.prototype[containerRect] = getValue('options', this).container.getBoundingClientRect();
+        _super.prototype["" + containerRect] = getValue('options', this).container.getBoundingClientRect();
         EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
         if (getValue('options', this).movableContainer) {
             var movableContainerRect = 'movableContainerRect';
-            _super.prototype[movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
+            _super.prototype["" + movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
             EventHandler.add(getValue('options', this).movableContainer, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
         }
     };
@@ -581,22 +610,22 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
     };
     TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback, onEnterCallback, instance) {
         var _this = this;
-        //const delay: number = Browser.info.name === 'chrome' ? 200 : 100;
+        var delay = Browser.info.name === 'chrome' ? 200 : 100;
         var options = 'options';
         var movableEle = 'movableEle';
         var element = 'element';
         var fromWheel = 'fromWheel';
-        //const debounced100: Function = debounce(callback, delay);
+        var debounced100 = debounce(callback, delay);
         var debounced50 = debounce(callback, 50);
-        this[options].prevTop = this[options].prevLeft = 0;
+        this["" + options].prevTop = this["" + options].prevLeft = 0;
         return function (e) {
-            var top = _this[options].movableContainer ? _this[options].container.scrollTop : e.target.scrollTop;
-            var left = _this[options].movableContainer ? _this[options].scrollbar.scrollLeft : e.target.scrollLeft;
-            var direction = _this[options].prevTop < top ? 'down' : 'up';
-            direction = _this[options].prevLeft === left ? direction : _this[options].prevLeft < left ? 'right' : 'left';
-            _this[options].prevTop = top;
-            _this[options].prevLeft = left;
-            var current = _this.sentinelInfo[direction];
+            var top = _this["" + options].movableContainer ? _this["" + options].container.scrollTop : e.target.scrollTop;
+            var left = _this["" + options].movableContainer ? _this["" + options].scrollbar.scrollLeft : e.target.scrollLeft;
+            var direction = _this["" + options].prevTop < top ? 'down' : 'up';
+            direction = _this["" + options].prevLeft === left ? direction : _this["" + options].prevLeft < left ? 'right' : 'left';
+            _this["" + options].prevTop = top;
+            _this["" + options].prevLeft = left;
+            var current = _this.sentinelInfo["" + direction];
             var delta = 0;
             _this.newPos = top;
             if (_this.lastPos != null) { // && newPos < maxScroll
@@ -611,16 +640,16 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
                 e.returnValue = false;
                 e.preventDefault();
             }
-            if (_this[options].axes.indexOf(current.axis) === -1) {
+            if (_this["" + options].axes.indexOf(current.axis) === -1) {
                 return;
             }
             var check = _this.check(direction);
-            if (current.entered && current.axis === 'X') {
-                if (_this[movableEle] && (direction === 'right' || direction === 'left')) {
-                    onEnterCallback(_this[movableEle], current, direction, { top: top, left: left }, _this[fromWheel], check);
+            if (current.entered && (current.axis === 'X' || instance.enableVirtualMaskRow)) {
+                if (_this["" + movableEle] && (direction === 'right' || direction === 'left')) {
+                    onEnterCallback(_this["" + movableEle], current, direction, { top: top, left: left }, _this["" + fromWheel], check);
                 }
                 else {
-                    onEnterCallback(_this[element], current, direction, { top: top, left: left }, _this[fromWheel], check);
+                    onEnterCallback(_this["" + element], current, direction, { top: top, left: left }, _this["" + fromWheel], check);
                 }
             }
             if (check) {
@@ -631,19 +660,19 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
                 }
                 else {
                     if ((instance.dataSource instanceof DataManager && instance.dataSource.dataSource.url !== undefined
-                        && !instance.dataSource.dataSource.offline && instance.dataSource.dataSource.url !== '') || isCountRequired(instance)) {
+                        && !instance.dataSource.dataSource.offline && instance.dataSource.dataSource.url !== '') || isCountRequired(instance)
+                        || instance.enableVirtualMaskRow) {
+                        fn = instance.enableVirtualMaskRow ? debounced100 : fn;
                         fn({ direction: direction, sentinel: current, offset: { top: top, left: left },
                             focusElement: document.activeElement });
                     }
                     else {
-                        callback({
-                            direction: direction, sentinel: current, offset: { top: top, left: left },
-                            focusElement: document.activeElement
-                        });
+                        callback({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                            focusElement: document.activeElement });
                     }
                 }
             }
-            _this[fromWheel] = false;
+            _this["" + fromWheel] = false;
         };
     };
     return TreeInterSectionObserver;

package/src/treegrid/utils.js

@@ -31,7 +31,7 @@ export function isCountRequired(parent) {
  */
 export function isCheckboxcolumn(parent) {
     for (var i = 0; i < parent.columns.length; i++) {
-        if (parent.columns[i].showCheckbox) {
+        if (parent.columns[parseInt(i.toString(), 10)].showCheckbox) {
             return true;
         }
     }
@@ -59,9 +59,9 @@ export function findParentRecords(records) {
     var datas = [];
     var recordsLength = Object.keys(records).length;
     for (var i = 0, len = recordsLength; i < len; i++) {
-        var hasChild = getObject('hasChildRecords', records[i]);
+        var hasChild = getObject('hasChildRecords', records[parseInt(i.toString(), 10)]);
         if (hasChild) {
-            datas.push(records[i]);
+            datas.push(records[parseInt(i.toString(), 10)]);
         }
     }
     return datas;
@@ -124,10 +124,11 @@ export function findChildrenRecords(records) {
         var childRecords = records.childRecords.filter(function (item) { return !item.isSummaryRow; });
         var keys = Object.keys(childRecords);
         for (var i = 0, len = keys.length; i < len; i++) {
-            datas.push(childRecords[i]);
-            if (childRecords[i].hasChildRecords || (!isNullOrUndefined(childRecords[i].childRecords) &&
-                childRecords[i].childRecords.length)) {
-                datas = datas.concat(findChildrenRecords(childRecords[i]));
+            datas.push(childRecords[parseInt(i.toString(), 10)]);
+            if (childRecords[parseInt(i.toString(), 10)].hasChildRecords ||
+                (!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) &&
+                    childRecords[parseInt(i.toString(), 10)].childRecords.length)) {
+                datas = datas.concat(findChildrenRecords(childRecords[parseInt(i.toString(), 10)]));
             }
         }
     }
@@ -153,10 +154,10 @@ export function extendArray(array) {
     var obj;
     var keys;
     for (var i = 0; array && i < array.length; i++) {
-        keys = Object.keys(array[i]);
+        keys = Object.keys(array[parseInt(i.toString(), 10)]);
         obj = {};
         for (var j = 0; j < keys.length; j++) {
-            obj[keys[j]] = array[i][keys[j]];
+            obj[keys[parseInt(j.toString(), 10)]] = array[parseInt(i.toString(), 10)][keys[parseInt(j.toString(), 10)]];
         }
         objArr.push(obj);
     }
@@ -185,11 +186,11 @@ export function getPlainData(value) {
 export function getParentData(parent, value, requireFilter) {
     if (requireFilter) {
         var idFilter = 'uniqueIDFilterCollection';
-        return parent[idFilter][value];
+        return parent["" + idFilter]["" + value];
     }
     else {
         var id = 'uniqueIDCollection';
-        return parent[id][value];
+        return parent["" + id]["" + value];
     }
 }
 /**