@syncfusion/ej2-treegrid 20.2.46 → 20.3.47

package/src/treegrid/base/treegrid.d.ts

@@ -110,6 +110,8 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     /** @hidden */
     flatData: Object[];
     /** @hidden */
+    private infiniteScrollData;
+    /** @hidden */
     isLocalData: boolean;
     /** @hidden */
     parentData: Object[];

package/src/treegrid/base/treegrid.js

@@ -47,6 +47,7 @@ import { SortSettings } from '../models/sort-settings';
 import { isHidden, getExpandStatus } from '../utils';
 import { editAction } from '../actions/crud-actions';
 import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';
+import * as literals from '../base/constant';
 /**
  * Represents the TreeGrid component.
  * ```html
@@ -355,6 +356,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.initProperties = function () {
         this.defaultLocale = {};
         this.flatData = [];
+        this.infiniteScrollData = [];
         this.parentData = [];
         this.columnModel = [];
         this.isExpandAll = false;
@@ -646,7 +648,7 @@ var TreeGrid = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.grid.clipboardModule)) {
             this.grid.clipboardModule.destroy();
         }
-        this.clipboardModule = this.grid.clipboardModule = new TreeClipboard(this);
+        this.clipboardModule = this.grid.clipboardModule = new TreeClipboard(this, this.grid.serviceLocator);
     };
     TreeGrid.prototype.convertTreeData = function (data) {
         var _this = this;
@@ -739,13 +741,19 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid[templateInstance] = this[templateInstance];
         var isJsComponent = 'isJsComponent';
         this.grid[isJsComponent] = true;
+        this.grid.enableVirtualMaskRow = false; // Need to update in virtual mask row feature implementation.
     };
     TreeGrid.prototype.triggerEvents = function (args) {
         this.trigger(getObject('name', args), args);
     };
     TreeGrid.prototype.IsExpandCollapseClicked = function (args) {
-        if (!isNullOrUndefined(args.target) && (args.target.classList.contains('e-treegridexpand')
-            || args.target.classList.contains('e-treegridcollapse') || args.target.classList.contains('e-summarycell'))) {
+        if (args['name'] === "rowSelecting" && !isNullOrUndefined(args.target) && (args.target.classList.contains('e-treegridexpand')
+            || args.target.classList.contains('e-treegridcollapse') || args.target.classList.contains('e-summarycell')) && (isNullOrUndefined(args['previousRowIndex']))) {
+            args.cancel = true;
+            return;
+        }
+        else if (args['name'] === "rowDeselecting" && !isNullOrUndefined(args.target) && ((!isNullOrUndefined(args.row) && (!args.row.length)) && (args.target.classList.contains('e-treegridexpand')
+            || args.target.classList.contains('e-treegridcollapse') || args.target.classList.contains('e-summarycell')))) {
             args.cancel = true;
             return;
         }
@@ -802,7 +810,6 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.pdfHeaderQueryCellInfo = this.triggerEvents.bind(this);
         this.grid.dataSourceChanged = this.triggerEvents.bind(this);
         this.grid.recordDoubleClick = this.triggerEvents.bind(this);
-        this.grid.rowDeselecting = this.triggerEvents.bind(this);
         this.grid.cellDeselected = this.triggerEvents.bind(this);
         this.grid.cellDeselecting = this.triggerEvents.bind(this);
         this.grid.columnMenuOpen = this.triggerEvents.bind(this);
@@ -983,6 +990,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.grid.dataSource = { result: _this.flatData, count: getValue('count', _this.grid.dataSource) };
             }
             else {
+                if (args.action.requestType !== 'infiniteScroll') {
+                    _this.infiniteScrollData = [];
+                }
                 _this.trigger(events.dataStateChange, args);
             }
         };
@@ -1126,6 +1136,19 @@ var TreeGrid = /** @class */ (function (_super) {
             if (args.requestType === 'save' && _this.aggregates.map(function (ag) { return ag.showChildSummary === true; }).length) {
                 _this.grid.refresh();
             }
+            if (args.action === 'filter') {
+                if (_this.filterModule['currentFilterObject'] !== '' && _this.enableVirtualization && !_this.initialRender) {
+                    _this.expandAll();
+                }
+            }
+            if (args.requestType === 'searching') {
+                if (_this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender) {
+                    _this.expandAll();
+                }
+            }
+            if (args.action === 'clearFilter' && _this.enableCollapseAll) {
+                _this.collapseAll();
+            }
             if (_this.action === 'indenting' || _this.action === 'outdenting') {
                 _this.action = _this.action === 'indenting' ? 'indented' : 'outdented';
                 var selectedItem_1 = [_this.selectedRecords];
@@ -1148,6 +1171,11 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.selectedRecords = _this.selectedRows = _this.modifiedRecords = [];
             }
             else {
+                if (_this.grid.isFrozenGrid() && _this.enableVirtualization && args['tableName'] === 'movable') {
+                    var movableContent = _this.grid.element.querySelector('.' + literals.movableContent);
+                    var frozenContent = _this.grid.element.querySelector('.' + literals.frozenContent);
+                    movableContent.style.height = frozenContent.style.height = 'auto';
+                }
                 _this.trigger(events.actionComplete, args);
             }
         };
@@ -2469,16 +2497,20 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         }
         else {
-            var rowInfo = this.grid.getRowInfo(target);
-            var record = rowInfo.rowData;
+            var rowInfo_1 = this.grid.getRowInfo(target);
+            var record = rowInfo_1.rowData;
+            if (this.grid.isFrozenGrid() && this.enableVirtualization && !Object.keys(record).length) {
+                var freezeRows = 'freezeRows';
+                record = this.grid.contentModule[freezeRows].filter(function (e) { return e.uid === rowInfo_1.row.getAttribute('data-uid'); })[0].data;
+            }
             if (this.enableImmutableMode) {
-                record = this.getCurrentViewRecords()[rowInfo.rowIndex];
+                record = this.getCurrentViewRecords()[rowInfo_1.rowIndex];
             }
             if (target.classList.contains('e-treegridexpand')) {
-                this.collapseRow(rowInfo.row, record);
+                this.collapseRow(rowInfo_1.row, record);
             }
             else {
-                this.expandRow(rowInfo.row, record);
+                this.expandRow(rowInfo_1.row, record);
             }
         }
     };
@@ -2913,6 +2945,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.trigger(events.dataStateChange, expandingArgs);
         deff.promise.then(function () {
             if (expandingArgs.childData.length) {
+                _this.flatData = _this.infiniteScrollData;
                 var currentData = (_this.flatData);
                 var index = 0;
                 for (var i = 0; i < currentData.length; i++) {
@@ -2962,8 +2995,12 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
             }
             _this.isExpandRefresh = true;
+            var scrollHeightBeforeRefresh = _this.getContentTable().parentElement.scrollTop;
             _this.grid.refresh();
             _this.setHeightForFrozenContent();
+            if (_this.enableInfiniteScrolling) {
+                _this.getContentTable().parentElement.scrollTop = scrollHeightBeforeRefresh;
+            }
             _this.trigger(events.expanded, expandingArgs);
         });
     };

package/src/treegrid/renderer/virtual-row-model-generator.js

@@ -79,6 +79,8 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
             var currentPage = this[model].currentPage;
             if (clear) {
                 this.cache = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
                 this.data = {};
                 this.groups = {};
             }
@@ -92,6 +94,8 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
                 this.cache = {};
                 this.data = {};
                 this.groups = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
             }
         }
         return clear;

package/src/treegrid/renderer/virtual-tree-content-render.d.ts

@@ -25,6 +25,9 @@ export declare class VirtualTreeContentRenderer extends VirtualContentRenderer {
     /** @hidden */
     isDataSourceChanged: boolean;
     getRowByIndex(index: number): Element;
+    getMovableVirtualRowByIndex(index: number): Element;
+    getFrozenRightVirtualRowByIndex(index: number): Element;
+    getRowCollection(index: number, isMovable: boolean, isRowObject?: boolean, isFrozenRight?: boolean): Element | Object;
     addEventListener(): void;
     private virtualOtherAction;
     private indexModifier;

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

@@ -13,6 +13,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Cell, CellType } from '@syncfusion/ej2-grids';
 import { VirtualContentRenderer } from '@syncfusion/ej2-grids';
+import * as literals from '../base/constant';
 import { InterSectionObserver } from '@syncfusion/ej2-grids';
 import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-generator';
 import * as events from '../base/constant';
@@ -43,6 +44,29 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     VirtualTreeContentRenderer.prototype.getRowByIndex = function (index) {
         return this.parent.getDataRows().filter(function (e) { return parseInt(e.getAttribute('data-rowindex'), 10) === index; })[0];
     };
+    VirtualTreeContentRenderer.prototype.getMovableVirtualRowByIndex = function (index) {
+        return this.getRowCollection(index, true);
+    };
+    VirtualTreeContentRenderer.prototype.getFrozenRightVirtualRowByIndex = function (index) {
+        return this.getRowCollection(index, false, false, true);
+    };
+    VirtualTreeContentRenderer.prototype.getRowCollection = function (index, isMovable, isRowObject, isFrozenRight) {
+        var startIdx = parseInt(this.parent.getRows()[0].getAttribute(literals.dataRowIndex), 10);
+        var rowCollection = isMovable ? this.parent.getMovableDataRows() : this.parent.getDataRows();
+        rowCollection = isFrozenRight ? this.parent.getFrozenRightDataRows() : rowCollection;
+        var collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
+        var selectedRow = collection[index - startIdx];
+        if (this.parent.frozenRows && this.parent.pageSettings.currentPage > 1) {
+            if (!isRowObject) {
+                selectedRow = index <= this.parent.frozenRows ? rowCollection[index]
+                    : rowCollection[(index - startIdx) + this.parent.frozenRows];
+            }
+            else {
+                selectedRow = index <= this.parent.frozenRows ? this.parent.getRowsObject()[index].data : selectedRow;
+            }
+        }
+        return selectedRow;
+    };
     VirtualTreeContentRenderer.prototype.addEventListener = function () {
         this.parent.on(events.virtualActionArgs, this.virtualOtherAction, this);
         this.parent.on(events.indexModifier, this.indexModifier, this);
@@ -70,7 +94,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 this.startIndex = lastIndex - this.parent.getRows().length;
                 this.endIndex = lastIndex;
             }
-            else {
+            else if (this.parent.root.editSettings.newRowPosition !== 'Top' && this.parent.root.editModule.selectedIndex !== -1 || this.parent.root.editModule.selectedIndex !== -1) {
                 this.startIndex += 1;
                 this.endIndex += 1;
             }
@@ -122,7 +146,15 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
             if (!isNullOrUndefined(e.count)) {
                 this.totalRecords = e.count;
-                if (!this.parent.enableColumnVirtualization) {
+                // To overcome the white space issue in last page when records collapsed
+                if (this.parent.isFrozenGrid() && e.count < Object.keys(this.parent.dataSource).length) {
+                    var width = this.parent.enableColumnVirtualization ?
+                        this.getColumnOffset(this.parent.columns.length - 1) + 'px' : '100%';
+                    var height = (this.parent.getRowHeight() * e.count) -
+                        (this.parent.getRowHeight() * this.parent.pageSettings.pageSize);
+                    getValue('virtualEle', this).setVirtualHeight(height, width);
+                }
+                if (!this.parent.enableColumnVirtualization && !this.parent.isFrozenGrid()) {
                     getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
                 }
             }
@@ -220,6 +252,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         return new Cell(opt);
     };
     VirtualTreeContentRenderer.prototype.beginEdit = function (e) {
+        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];
@@ -277,7 +310,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var content = this.parent.getContent().querySelector('.e-content');
         if (this[isAdd] && !content.querySelector('.e-addedrow')) {
             this.parent.isEdit = false;
-            this.parent.addRecord();
+            this.parent.editModule.addRecord(null, this.parent.root.editModule.selectedIndex);
         }
     };
     VirtualTreeContentRenderer.prototype.getData = function (data) {
@@ -290,7 +323,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.parent.notify('get-row-position', addArgs);
             this.rowPosition = addArgs.newRowPosition;
             this.addRowIndex = addArgs.addRowIndex;
-            this.dataRowIndex = addArgs.dataRowIndex;
+            this.dataRowIndex = this.parent.root.editModule.selectedIndex;
         }
         var actionComplete = 'actionComplete';
         _super.prototype[actionComplete].call(this, args);
@@ -312,14 +345,17 @@ 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.
                 }
-                _this.virtualEle.adjustTable(x, _this.translateY);
-                if (_this.parent.enableColumnVirtualization) {
-                    _this.header.virtualEle.adjustTable(x, 0);
+                if (!_this.parent.isFrozenGrid()) {
+                    _this.virtualEle.adjustTable(x, _this.translateY);
+                    if (_this.parent.enableColumnVirtualization) {
+                        _this.header.virtualEle.adjustTable(x, 0);
+                    }
                 }
             }
         };
     };
     VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
+        this['scrollAfterEdit']();
         var info = scrollArgs.sentinel;
         var outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
         var content = this.parent.getContent().querySelector('.e-content');
@@ -347,7 +383,8 @@ 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.startIndex) < (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;
             }
@@ -412,6 +449,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.parent.setColumnIndexesInView(this.parent.enableColumnVirtualization ? viewInfo.columnIndexes : []);
             var page = viewInfo.loadNext && !viewInfo.loadSelf ? viewInfo.nextInfo.page : viewInfo.page;
             this.parent.setProperties({ pageSettings: { currentPage: page } }, true);
+            this.requestType = 'virtualscroll';
             if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
                 viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
             }
@@ -419,12 +457,28 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         }
     };
     VirtualTreeContentRenderer.prototype.appendContent = function (target, newChild, e) {
+        var isFrozen = this.parent.isFrozenGrid();
         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.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent) || this.parent.isFrozenGrid()) {
             if (getValue('isExpandCollapse', e)) {
                 this.isRemoteExpand = true;
             }
+            if (isFrozen && isNullOrUndefined(this.requestType) && getValue('requestTypes', this).indexOf('isFrozen') === -1) {
+                getValue('requestTypes', this).push('isFrozen');
+                this.requestType = 'isFrozen';
+            }
             _super.prototype.appendContent.call(this, target, newChild, e);
+            if (getValue('requestTypes', this).indexOf('isFrozen') !== -1) {
+                getValue('requestTypes', this).splice(getValue('requestTypes', this).indexOf('isFrozen'), 1);
+                this.requestType = this.requestType === 'isFrozen' ? undefined : this.requestType;
+            }
+            if (isFrozen && (!this.isExpandCollapse || this.translateY === 0)) {
+                this.translateY = this.translateY < 0 ? 0 : this.translateY;
+                getValue('virtualEle', this).adjustTable(0, this.translateY);
+            }
+            else {
+                this.isExpandCollapse = false;
+            }
         }
         else {
             var info = e.virtualInfo.sentinelInfo && e.virtualInfo.sentinelInfo.axis === 'Y' &&
@@ -514,6 +568,11 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
         var containerRect = 'containerRect';
         _super.prototype[containerRect] = getValue('options', this).container.getBoundingClientRect();
         EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
+        if (getValue('options', this).movableContainer) {
+            var movableContainerRect = 'movableContainerRect';
+            _super.prototype[movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
+            EventHandler.add(getValue('options', this).movableContainer, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
+        }
     };
     TreeInterSectionObserver.prototype.clear = function () {
         this.lastPos = null;

package/src/treegrid/renderer/virtual-tree-freeze-render.d.ts

@@ -0,0 +1,59 @@
+import { Column, IGrid, NotifyArgs, Row, ServiceLocator } from '@syncfusion/ej2-grids';
+import { ColumnVirtualFreezeRenderer, VirtualFreezeHdrRenderer, VirtualFreezeRenderer } from '@syncfusion/ej2-grids';
+/**
+ * VirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+export declare class VirtualTreeFreezeRenderer extends VirtualFreezeRenderer {
+    protected serviceLoc: ServiceLocator;
+    constructor(parent: IGrid, locator?: ServiceLocator);
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable(): void;
+    /**
+     * @param {HTMLElement} target - specifies the target
+     * @param {DocumentFragment} newChild - specifies the newChild
+     * @param {NotifyArgs} e - specifies the notifyargs
+     * @returns {void}
+     * @hidden
+     */
+    appendContent(target: HTMLElement, newChild: DocumentFragment, e: NotifyArgs): void;
+    /**
+     * @param {Object[]} data - specifies the data
+     * @param {NotifyArgs} e - specifies the notifyargs
+     * @returns {Row<Column>[]} returns the row
+     * @hidden
+     */
+    generateRows(data: Object[], e?: NotifyArgs): Row<Column>[];
+}
+/**
+ * ColumnVirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+export declare class ColumnVirtualTreeFreezeRenderer extends ColumnVirtualFreezeRenderer {
+    protected serviceLoc: ServiceLocator;
+    constructor(parent?: IGrid, locator?: ServiceLocator);
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable(): void;
+    appendContent(target: HTMLElement, newChild: DocumentFragment, e: NotifyArgs): void;
+}
+/**
+ * VirtualTreeFreezeHdrRenderer is used to render the virtual table within the frozen and movable header table
+ *
+ * @hidden
+ */
+export declare class VirtualTreeFreezeHdrRenderer extends VirtualFreezeHdrRenderer {
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable(): void;
+    protected rfshMovable(): void;
+}

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

@@ -0,0 +1,163 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { ColumnFreezeContentRenderer, FreezeContentRender, FreezeRowModelGenerator, RenderType } from '@syncfusion/ej2-grids';
+import * as literals from '../base/constant';
+import { ColumnVirtualFreezeRenderer, setDebounce, VirtualFreezeHdrRenderer, VirtualFreezeRenderer } from '@syncfusion/ej2-grids';
+import { TreeInterSectionObserver, VirtualTreeContentRenderer } from './virtual-tree-content-render';
+import { getValue } from '@syncfusion/ej2-base';
+/**
+ * VirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+var VirtualTreeFreezeRenderer = /** @class */ (function (_super) {
+    __extends(VirtualTreeFreezeRenderer, _super);
+    function VirtualTreeFreezeRenderer(parent, locator) {
+        var _this = _super.call(this, parent, locator) || this;
+        _this.addEventListener();
+        return _this;
+    }
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    VirtualTreeFreezeRenderer.prototype.renderTable = function () {
+        this.freezeRowGenerator = new FreezeRowModelGenerator(this.parent);
+        this.virtualRenderer = new VirtualTreeContentRenderer(this.parent, this.serviceLoc);
+        this.virtualRenderer.header = this.serviceLoc.getService('rendererFactory')
+            .getRenderer(RenderType.Header).virtualHdrRenderer;
+        FreezeContentRender.prototype.renderTable.call(this);
+        this.virtualRenderer.setPanel(this.parent.getContent());
+        this.scrollbar = this.parent.getContent().querySelector('.e-movablescrollbar');
+        var movableCont = this.getMovableContent();
+        var minHeight = this.parent.height;
+        this.virtualRenderer.virtualEle.content = this.virtualRenderer.content = this.getPanel().querySelector('.' + literals.content);
+        this.virtualRenderer.virtualEle.content.style.overflowX = 'hidden';
+        this.virtualRenderer.virtualEle.renderFrozenWrapper(minHeight);
+        this.virtualRenderer.virtualEle.renderFrozenPlaceHolder();
+        if (this.parent.enableColumnVirtualization) {
+            this.virtualRenderer.virtualEle.movableContent = this.virtualRenderer.movableContent
+                = this.getPanel().querySelector('.' + literals.movableContent);
+            this.virtualRenderer.virtualEle.renderMovableWrapper(minHeight);
+            this.virtualRenderer.virtualEle.renderMovablePlaceHolder();
+            var tbl = movableCont.querySelector('table');
+            this.virtualRenderer.virtualEle.movableTable = tbl;
+            this.virtualRenderer.virtualEle.movableWrapper.appendChild(tbl);
+            movableCont.appendChild(this.virtualRenderer.virtualEle.movableWrapper);
+            movableCont.appendChild(this.virtualRenderer.virtualEle.movablePlaceholder);
+        }
+        this.virtualRenderer.virtualEle.wrapper.appendChild(this.getFrozenContent());
+        this.virtualRenderer.virtualEle.wrapper.appendChild(movableCont);
+        this.virtualRenderer.virtualEle.table = this.getTable();
+        setDebounce(this.parent, this.virtualRenderer, this.scrollbar, this.getMovableContent());
+    };
+    /**
+     * @param {HTMLElement} target - specifies the target
+     * @param {DocumentFragment} newChild - specifies the newChild
+     * @param {NotifyArgs} e - specifies the notifyargs
+     * @returns {void}
+     * @hidden
+     */
+    VirtualTreeFreezeRenderer.prototype.appendContent = function (target, newChild, e) {
+        getValue('observer', this.virtualRenderer).options.debounceEvent = false;
+        this.virtualRenderer['observers'] = new TreeInterSectionObserver(getValue('observer', this.virtualRenderer).element, getValue('observer', this.virtualRenderer).options, getValue('observer', this.virtualRenderer).movableEle);
+        this.virtualRenderer['contents'] = this.getPanel().firstChild;
+        _super.prototype.appendContent.call(this, target, newChild, e);
+    };
+    /**
+     * @param {Object[]} data - specifies the data
+     * @param {NotifyArgs} e - specifies the notifyargs
+     * @returns {Row<Column>[]} returns the row
+     * @hidden
+     */
+    VirtualTreeFreezeRenderer.prototype.generateRows = function (data, e) {
+        return _super.prototype.generateRows.call(this, data, e);
+    };
+    return VirtualTreeFreezeRenderer;
+}(VirtualFreezeRenderer));
+export { VirtualTreeFreezeRenderer };
+/**
+ * ColumnVirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+var ColumnVirtualTreeFreezeRenderer = /** @class */ (function (_super) {
+    __extends(ColumnVirtualTreeFreezeRenderer, _super);
+    function ColumnVirtualTreeFreezeRenderer(parent, locator) {
+        var _this = _super.call(this, parent, locator) || this;
+        _this.serviceLoc = locator;
+        _this.eventListener('on');
+        return _this;
+    }
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    ColumnVirtualTreeFreezeRenderer.prototype.renderTable = function () {
+        this.virtualRenderer = new VirtualTreeContentRenderer(this.parent, this.serviceLoc);
+        this.virtualRenderer.header = this.serviceLoc.getService('rendererFactory')
+            .getRenderer(RenderType.Header).virtualHdrRenderer;
+        this.freezeRowGenerator = new FreezeRowModelGenerator(this.parent);
+        ColumnFreezeContentRenderer.prototype.renderTable.call(this);
+        this.virtualRenderer.setPanel(this.parent.getContent());
+        this.scrollbar = this.parent.getContent().querySelector('.e-movablescrollbar');
+        var frozenRightCont = this.getFrozenRightContent();
+        var frzCont = this.getFrozenContent();
+        var movableCont = this.getMovableContent();
+        if (this.parent.getFrozenMode() === 'Right') {
+            frzCont = frozenRightCont;
+        }
+        this.virtualRenderer.virtualEle.content = this.virtualRenderer.content = this.getPanel().querySelector('.' + literals.content);
+        this.virtualRenderer.virtualEle.content.style.overflowX = 'hidden';
+        var minHeight = this.parent.height;
+        this.virtualRenderer.virtualEle.renderFrozenWrapper(minHeight);
+        this.virtualRenderer.virtualEle.renderFrozenPlaceHolder();
+        _super.prototype['renderVirtualFrozenLeft'].call(this, frzCont, movableCont);
+        _super.prototype['renderVirtualFrozenRight'].call(this, frzCont, movableCont);
+        _super.prototype['renderVirtualFrozenLeftRight'].call(this, frzCont, movableCont, frozenRightCont);
+        this.virtualRenderer.virtualEle.table = this.getTable();
+        setDebounce(this.parent, this.virtualRenderer, this.scrollbar, this.getMovableContent());
+    };
+    ColumnVirtualTreeFreezeRenderer.prototype.appendContent = function (target, newChild, e) {
+        getValue('observer', this.virtualRenderer).options.debounceEvent = false;
+        this.virtualRenderer['observers'] = new TreeInterSectionObserver(getValue('observer', this.virtualRenderer).element, getValue('observer', this.virtualRenderer).options, getValue('observer', this.virtualRenderer).movableEle);
+        this.virtualRenderer['contents'] = this.getPanel().firstChild;
+        _super.prototype.appendContent.call(this, target, newChild, e);
+    };
+    return ColumnVirtualTreeFreezeRenderer;
+}(ColumnVirtualFreezeRenderer));
+export { ColumnVirtualTreeFreezeRenderer };
+/**
+ * VirtualTreeFreezeHdrRenderer is used to render the virtual table within the frozen and movable header table
+ *
+ * @hidden
+ */
+var VirtualTreeFreezeHdrRenderer = /** @class */ (function (_super) {
+    __extends(VirtualTreeFreezeHdrRenderer, _super);
+    function VirtualTreeFreezeHdrRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    VirtualTreeFreezeHdrRenderer.prototype.renderTable = function () {
+        _super.prototype.renderTable.call(this);
+    };
+    VirtualTreeFreezeHdrRenderer.prototype.rfshMovable = function () {
+        _super.prototype.rfshMovable.call(this);
+    };
+    return VirtualTreeFreezeHdrRenderer;
+}(VirtualFreezeHdrRenderer));
+export { VirtualTreeFreezeHdrRenderer };

package/styles/bootstrap-dark.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix */
 .e-popup.e-ddl {
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
@@ -103,6 +104,7 @@
   min-height: 34px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -445,4 +447,6 @@
 }
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {
   height: 0;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix */
 .e-popup.e-ddl {
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -103,6 +104,7 @@
   min-height: 34px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -446,4 +448,6 @@
 }
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {
   height: 0;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap4.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix */
 .e-input-group.e-ddl .e-control.e-autocomplete ~ .e-ddl-icon {
   font-size: 8px;
 }
@@ -145,6 +146,7 @@
   min-height: 34px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -481,4 +483,6 @@
 }
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {
   height: 0;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap5-dark.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix */
 .e-popup.e-ddl {
   border-radius: 4px;
   box-shadow: none;
@@ -144,6 +145,7 @@
   min-height: 34px;
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);
@@ -161,6 +163,7 @@
   }
 }
 /*! Toolbar's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
   content: "\e810";
@@ -481,4 +484,6 @@
 }
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {
   height: 0;
-}
+}
+
+/* stylelint-disable-line no-empty-source */