@syncfusion/ej2-treegrid 20.2.46 → 20.3.47

package/dist/es6/ej2-treegrid.es2015.js

@@ -1,5 +1,5 @@
 import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
-import { Aggregate, Cell, CellRenderer, CellType, Clipboard, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, templateCompiler } from '@syncfusion/ej2-grids';
+import { Aggregate, Cell, CellRenderer, CellType, Clipboard, ColumnChooser, ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, ColumnMenu, ColumnVirtualFreezeRenderer, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, FreezeContentRender, FreezeRender, FreezeRowModelGenerator, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualFreezeHdrRenderer, VirtualFreezeRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, setDebounce, templateCompiler } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { CacheAdaptor, DataManager, DataUtil, Deferred, JsonAdaptor, ODataAdaptor, Predicate, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor } from '@syncfusion/ej2-data';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
@@ -440,6 +440,34 @@ const rowDropped = 'row-dropped';
 const autoCol = 'auto-col';
 /** @hidden */
 const rowDeselecting = 'rowDeselecting';
+/** @hidden */
+const headerContent = 'e-headercontent';
+/** @hidden */
+const movableContent = 'e-movablecontent';
+/** @hidden */
+const movableHeader = 'e-movableheader';
+/** @hidden */
+const frozenContent = 'e-frozencontent';
+/** @hidden */
+const frozenHeader = 'e-frozenheader';
+/** @hidden */
+const content = 'e-content';
+/** @hidden */
+const table = 'e-table';
+/** @hidden */
+const leftRight = 'Left-Right';
+/** @hidden */
+const frozenRight = 'frozen-right';
+/** @hidden */
+const frozenLeft = 'frozen-left';
+/** @hidden */
+const dataColIndex = 'data-colindex';
+/** @hidden */
+const ariaColIndex = 'aria-colindex';
+/** @hidden */
+const dataRowIndex = 'data-rowindex';
+/** @hidden */
+const ariaRowIndex = 'aria-rowindex';
 
 /**
  * The `Clipboard` module is used to handle clipboard copy action.
@@ -447,11 +475,12 @@ const rowDeselecting = 'rowDeselecting';
  * @hidden
  */
 class TreeClipboard extends Clipboard {
-    constructor(parent) {
-        super(parent.grid);
+    constructor(parent, serviceLocator) {
+        super(parent.grid, serviceLocator);
         this.treeCopyContent = '';
         this.copiedUniqueIdCollection = [];
         this.treeGridParent = parent;
+        this.serviceLocator = serviceLocator;
     }
     setCopyData(withHeader) {
         const copyContent = 'copyContent';
@@ -1065,6 +1094,8 @@ class Selection {
     headerSelection(checkAll) {
         let index = -1;
         let length = 0;
+        //This property used to maintain the check state of the currentview data after clear filtering
+        let multiFilterCheckState = false;
         if (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) {
             const filterResult = this.parent.filterModule.filteredResult;
             if (this.filteredList.length === 0) {
@@ -1073,6 +1104,10 @@ class Selection {
             else {
                 if (this.filteredList !== filterResult) {
                     this.filteredList = filterResult;
+                    multiFilterCheckState = true;
+                }
+                else {
+                    multiFilterCheckState = false;
                 }
             }
         }
@@ -1091,6 +1126,9 @@ class Selection {
                     if (data[i].checkboxState === 'check') {
                         continue;
                     }
+                    if (multiFilterCheckState) {
+                        continue;
+                    }
                     data[i].checkboxState = 'check';
                     this.updateSelectedItems(data[i], data[i].checkboxState);
                 }
@@ -1238,8 +1276,8 @@ class Selection {
                     childData = (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) ?
                         this.parent.getCurrentViewRecords() : this.parent.flatData;
                     childData.forEach((record) => {
-                        if (this.parent.enableVirtualization && record.childRecords.length > 0) {
-                            if (record.hasChildRecords) {
+                        if (this.parent.enableVirtualization) {
+                            if (record.hasChildRecords && record.childRecords.length > 0) {
                                 this.updateParentSelection(record);
                             }
                             else {
@@ -2079,8 +2117,8 @@ class DataManipulation {
             if (!Object.prototype.hasOwnProperty.call(currentData, 'index')) {
                 currentData.index = this.storedIndex;
             }
-            if ((!isNullOrUndefined(currentData[this.parent.childMapping]) && !isCountRequired(this.parent)) ||
-                ((currentData[this.parent.hasChildMapping]) && isCountRequired(this.parent) && (this.parent.initialRender || isNullOrUndefined(this.parent['dataResults'].result)))) {
+            if ((!isNullOrUndefined(currentData[this.parent.childMapping]) && !isCountRequired(this.parent)) || ((currentData[this.parent.hasChildMapping]) &&
+                isCountRequired(this.parent) && (this.parent.initialRender || isNullOrUndefined(this.parent['dataResults'].result) || this.parent.enableInfiniteScrolling))) {
                 currentData.hasChildRecords = true;
                 if (this.parent.enableCollapseAll || !isNullOrUndefined(this.parent.dataStateChange)
                     && isNullOrUndefined(currentData[this.parent.childMapping])) {
@@ -2116,6 +2154,7 @@ class DataManipulation {
             currentData.checkboxState = 'uncheck';
             if (isNullOrUndefined(currentData[this.parent.parentIdMapping]) || currentData.parentItem) {
                 this.parent.flatData.push(currentData);
+                this.parent['infiniteScrollData'].push(currentData);
             }
             if (!this.isSelfReference && currentData.level === 0) {
                 this.parent.parentData.push(currentData);
@@ -2871,6 +2910,10 @@ function updateParentRow(key, record, action, control, isSelfReference, child) {
             index = i;
             return;
         } });
+        if (control.enableVirtualization && isNullOrUndefined(index)) {
+            const updatedParent = getValue('uniqueIDCollection.' + child.parentUniqueID, control);
+            record = updatedParent;
+        }
         if (!isNullOrUndefined(index)) {
             record = currentRecords[index];
         }
@@ -3295,6 +3338,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     initProperties() {
         this.defaultLocale = {};
         this.flatData = [];
+        this.infiniteScrollData = [];
         this.parentData = [];
         this.columnModel = [];
         this.isExpandAll = false;
@@ -3584,7 +3628,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
     }
     convertTreeData(data) {
         if (isCountRequired(this)) {
@@ -3676,13 +3720,19 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid[templateInstance] = this[templateInstance];
         const isJsComponent = 'isJsComponent';
         this.grid[isJsComponent] = true;
+        this.grid.enableVirtualMaskRow = false; // Need to update in virtual mask row feature implementation.
     }
     triggerEvents(args) {
         this.trigger(getObject('name', args), args);
     }
     IsExpandCollapseClicked(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;
         }
@@ -3738,7 +3788,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
@@ -3916,6 +3965,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this.grid.dataSource = { result: this.flatData, count: getValue('count', this.grid.dataSource) };
             }
             else {
+                if (args.action.requestType !== 'infiniteScroll') {
+                    this.infiniteScrollData = [];
+                }
                 this.trigger(dataStateChange, args);
             }
         };
@@ -4058,6 +4110,19 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             if (args.requestType === 'save' && this.aggregates.map((ag) => 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';
                 const selectedItem = [this.selectedRecords];
@@ -4080,6 +4145,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this.selectedRecords = this.selectedRows = this.modifiedRecords = [];
             }
             else {
+                if (this.grid.isFrozenGrid() && this.enableVirtualization && args['tableName'] === 'movable') {
+                    const movableContent$$1 = this.grid.element.querySelector('.' + movableContent);
+                    const frozenContent$$1 = this.grid.element.querySelector('.' + frozenContent);
+                    movableContent$$1.style.height = frozenContent$$1.style.height = 'auto';
+                }
                 this.trigger(actionComplete, args);
             }
         };
@@ -4921,8 +4991,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.setRowData(key, rowData);
         const visibleRecords = this.getVisibleRecords();
         if (visibleRecords.length > 0 && key === (visibleRecords[visibleRecords.length - 1])[primaryKey]) {
-            const table = this.getContentTable();
-            const sHeight = table.scrollHeight;
+            const table$$1 = this.getContentTable();
+            const sHeight = table$$1.scrollHeight;
             const clientHeight = this.getContent().clientHeight;
             this.lastRowBorder(this.getRows()[currentRecords.indexOf(record)], sHeight <= clientHeight);
         }
@@ -5395,6 +5465,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         else {
             const rowInfo = this.grid.getRowInfo(target);
             let record = rowInfo.rowData;
+            if (this.grid.isFrozenGrid() && this.enableVirtualization && !Object.keys(record).length) {
+                const freezeRows = 'freezeRows';
+                record = this.grid.contentModule[freezeRows].filter((e) => e.uid === rowInfo.row.getAttribute('data-uid'))[0].data;
+            }
             if (this.enableImmutableMode) {
                 record = this.getCurrentViewRecords()[rowInfo.rowIndex];
             }
@@ -5806,8 +5880,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 totalRows = [].slice.call(rows);
                 for (let i = totalRows.length - 1; i >= 0; i--) {
                     if (!isHidden(totalRows[i])) {
-                        const table = this.getContentTable();
-                        const sHeight = table.scrollHeight;
+                        const table$$1 = this.getContentTable();
+                        const sHeight = table$$1.scrollHeight;
                         const clientHeight = this.getContent().clientHeight;
                         this.lastRowBorder(totalRows[i], sHeight <= clientHeight);
                         break;
@@ -5826,6 +5900,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.trigger(dataStateChange, expandingArgs);
         deff.promise.then(() => {
             if (expandingArgs.childData.length) {
+                this.flatData = this.infiniteScrollData;
                 const currentData = (this.flatData);
                 let index = 0;
                 for (let i = 0; i < currentData.length; i++) {
@@ -5875,8 +5950,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 }
             }
             this.isExpandRefresh = true;
+            const scrollHeightBeforeRefresh = this.getContentTable().parentElement.scrollTop;
             this.grid.refresh();
             this.setHeightForFrozenContent();
+            if (this.enableInfiniteScrolling) {
+                this.getContentTable().parentElement.scrollTop = scrollHeightBeforeRefresh;
+            }
             this.trigger(expanded, expandingArgs);
         });
     }
@@ -7117,13 +7196,16 @@ class RowDD$1 {
                     for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
                         if (tObj.getCurrentViewRecords()[i].taskData === record.parentItem.taskData) {
                             dropIndex = i;
+                            if (tObj.enableVirtualization) {
+                                dropIndex = parseInt(tObj.getRows()[i].getAttribute('data-rowindex'), 10);
+                            }
                         }
                     }
                 }
                 else {
                     dropIndex = this.selectedRow.rowIndex - 1;
                 }
-                if (this.parent.enableVirtualization && this.parent.allowRowDragAndDrop && this.selectedRecord) {
+                if (this.parent.enableVirtualization && this.selectedRecord && !(record.level > this.selectedRecord.level)) {
                     dropIndex = parseInt(this.selectedRow.getAttribute('data-rowindex'), 10) - 1;
                 }
                 tObj[action] = 'indenting';
@@ -7138,11 +7220,11 @@ class RowDD$1 {
                 let dropIndex;
                 const parentItem = this.selectedRecord.parentItem;
                 for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[i].taskData === parentItem.taskData) {
+                    if (tObj.getCurrentViewRecords()[i].uniqueID === parentItem.uniqueID) {
                         dropIndex = i;
                     }
                 }
-                if (this.parent.enableVirtualization && this.parent.allowRowDragAndDrop && this.selectedRecord) {
+                if (this.parent.enableVirtualization && this.selectedRecord) {
                     dropIndex = parseInt(this.parent.getRows()[dropIndex].getAttribute('data-rowindex'), 10);
                 }
                 tObj[action] = 'outdenting';
@@ -7161,7 +7243,7 @@ class RowDD$1 {
         this.parent.trigger(actionBegin, actionArgs, (actionArgs) => {
             if (!actionArgs.cancel) {
                 if (actionArgs.action === 'indenting') {
-                    if (this.parent.enableVirtualization && this.parent.allowRowDragAndDrop) {
+                    if (this.parent.enableVirtualization) {
                         this.reorderRows([parseInt(this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'child');
                     }
                     else {
@@ -7169,7 +7251,7 @@ class RowDD$1 {
                     }
                 }
                 else if (actionArgs.action === 'outdenting') {
-                    if (this.parent.enableVirtualization && this.parent.allowRowDragAndDrop) {
+                    if (this.parent.enableVirtualization) {
                         this.reorderRows([parseInt(this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'below');
                     }
                     else {
@@ -7522,16 +7604,16 @@ class RowDD$1 {
             classList(ele, ['e-errorcontainer'], []);
             classList(ele, ['e-icons', 'e-errorelem'], []);
             const errorVal = dragelem.querySelector('.errorValue');
-            let content = dragelem.querySelector('.e-rowcell').innerHTML;
+            let content$$1 = dragelem.querySelector('.e-rowcell').innerHTML;
             if (errorVal) {
-                content = errorVal.innerHTML;
+                content$$1 = errorVal.innerHTML;
                 errorVal.parentNode.removeChild(errorVal);
             }
             dragelem.querySelector('.e-rowcell').innerHTML = '';
             const spanContent = document.createElement('span');
             spanContent.className = 'errorValue';
             spanContent.style.paddingLeft = '16px';
-            spanContent.innerHTML = content;
+            spanContent.innerHTML = content$$1;
             dragelem.querySelector('.e-rowcell').appendChild(ele);
             dragelem.querySelector('.e-rowcell').appendChild(spanContent);
             const dropItemSpan = document.querySelector('.e-dropitemscount');
@@ -8380,6 +8462,8 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
             const currentPage = this[model].currentPage;
             if (clear) {
                 this.cache = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
                 this.data = {};
                 this.groups = {};
             }
@@ -8393,6 +8477,8 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
                 this.cache = {};
                 this.data = {};
                 this.groups = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
             }
         }
         return clear;
@@ -8557,10 +8643,6 @@ class Filter$1 {
                     }
                 }
                 else {
-                    if ((!this.parent.enableCollapseAll || !this.parent.initialRender && isNullOrUndefined(this.parent['dataResults']['result']))
-                        && parent['expanded'] === false && this.parent.getVisibleRecords().indexOf(record) === -1) {
-                        this.parent.expandRow(this.parent.getRows()[parent['index']], parent);
-                    }
                     this.addParentRecord(parent);
                 }
             }
@@ -9231,53 +9313,55 @@ class Toolbar$1 {
         this.parent.off(toolbarClick, this.toolbarClickHandler);
     }
     refreshToolbar(args) {
-        const tObj = this.parent;
-        let indentElement;
-        let outdentElement;
-        const indentID = tObj.element.id + '_gridcontrol_indent';
-        const outdentID = tObj.element.id + '_gridcontrol_outdent';
         const toolbarElement = this.parent.grid.toolbarModule.getToolbar();
-        const indentEle = toolbarElement.querySelector('#' + indentID);
-        const outdentEle = toolbarElement.querySelector('#' + outdentID);
-        let row = args.row;
-        const selectedrow = tObj.getSelectedRows()[0];
-        if (!isNullOrUndefined(row[0])) {
-            row = row[0];
-        }
-        row = (!isNullOrUndefined(selectedrow) && selectedrow.rowIndex !== row.rowIndex) ? selectedrow : row;
-        if (indentEle !== null && outdentEle !== null) {
-            indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
-            outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
-            if (row.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
-                indentElement.classList.add('e-hidden');
-                outdentElement.classList.add('e-hidden');
-            }
-            else if (args['name'] !== 'rowDeselected' || (!isNullOrUndefined(selectedrow) && tObj.grid.isCheckBoxSelection)) {
-                const selectedItem = tObj.getCurrentViewRecords()[row.rowIndex];
-                if (!isNullOrUndefined(selectedItem)) {
-                    if ((selectedItem.level > tObj.getCurrentViewRecords()[row.rowIndex - 1].level)) {
-                        indentElement.classList.add('e-hidden');
-                    }
-                    else {
-                        indentElement.classList.remove('e-hidden');
+        if (!isNullOrUndefined(toolbarElement)) {
+            const tObj = this.parent;
+            let indentElement;
+            let outdentElement;
+            const indentID = tObj.element.id + '_gridcontrol_indent';
+            const outdentID = tObj.element.id + '_gridcontrol_outdent';
+            const indentEle = toolbarElement.querySelector('#' + indentID);
+            const outdentEle = toolbarElement.querySelector('#' + outdentID);
+            let row = args.row;
+            const selectedrow = tObj.getSelectedRows()[0];
+            if (!isNullOrUndefined(row[0])) {
+                row = row[0];
+            }
+            row = (!isNullOrUndefined(selectedrow) && selectedrow.rowIndex !== row.rowIndex) ? selectedrow : row;
+            if (indentEle !== null && outdentEle !== null) {
+                indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+                outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+                if (row.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
+                    indentElement.classList.add('e-hidden');
+                    outdentElement.classList.add('e-hidden');
+                }
+                else if (args['name'] !== 'rowDeselected' || (!isNullOrUndefined(selectedrow) && tObj.grid.isCheckBoxSelection)) {
+                    const selectedItem = tObj.getCurrentViewRecords()[row.rowIndex];
+                    if (!isNullOrUndefined(selectedItem)) {
+                        if ((selectedItem.level > tObj.getCurrentViewRecords()[row.rowIndex - 1].level)) {
+                            indentElement.classList.add('e-hidden');
+                        }
+                        else {
+                            indentElement.classList.remove('e-hidden');
+                        }
+                        if (selectedItem.level === tObj.getCurrentViewRecords()[row.rowIndex - 1].level) {
+                            indentElement.classList.remove('e-hidden');
+                        }
+                        if (selectedItem.level === 0) {
+                            outdentElement.classList.add('e-hidden');
+                        }
+                        if (selectedItem.level !== 0) {
+                            outdentElement.classList.remove('e-hidden');
+                        }
                     }
-                    if (selectedItem.level === tObj.getCurrentViewRecords()[row.rowIndex - 1].level) {
-                        indentElement.classList.remove('e-hidden');
+                }
+                if (args['name'] === 'rowDeselected' && isNullOrUndefined(selectedrow) && !tObj.grid.isCheckBoxSelection) {
+                    if (this.parent.toolbar['includes']('Indent')) {
+                        indentElement.classList.add('e-hidden');
                     }
-                    if (selectedItem.level === 0) {
+                    if (this.parent.toolbar['includes']('Outdent')) {
                         outdentElement.classList.add('e-hidden');
                     }
-                    if (selectedItem.level !== 0) {
-                        outdentElement.classList.remove('e-hidden');
-                    }
-                }
-            }
-            if (args['name'] === 'rowDeselected' && isNullOrUndefined(selectedrow) && !tObj.grid.isCheckBoxSelection) {
-                if (this.parent.toolbar['includes']('Indent')) {
-                    indentElement.classList.add('e-hidden');
-                }
-                if (this.parent.toolbar['includes']('Outdent')) {
-                    outdentElement.classList.add('e-hidden');
                 }
             }
         }
@@ -9766,7 +9850,7 @@ class ContextMenu$1 {
         const indent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Indent', args.element);
         const outdent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Outdent', args.element);
         if (addRow) {
-            if (this.parent.grid.editSettings.allowAdding === false) {
+            if (this.parent.grid.editSettings.allowAdding === false || this.parent.grid.isEdit) {
                 addRow.style.display = 'none';
             }
             else {
@@ -10135,13 +10219,13 @@ class BatchEdit {
             this.updateRowIndex();
             // update focus module, need to refix this once grid source modified.
             const focusModule = getValue('focusModule', this.parent.grid);
-            const table = this.parent.getContentTable();
+            const table$$1 = this.parent.getContentTable();
             if (this.parent.getBatchChanges()[this.deletedRecords].length && this.parent.editSettings.newRowPosition === 'Above') {
                 actualIndex = e.row.rowIndex;
                 focusModule.getContent().matrix.matrix = this.matrix;
             }
             else {
-                actualIndex = table.getElementsByClassName('e-batchrow')[0].rowIndex;
+                actualIndex = table$$1.getElementsByClassName('e-batchrow')[0].rowIndex;
                 // if (this.parent.frozenRows || this.parent.frozenColumns) {
                 //   actualIndex = this.batchIndex;
                 // }
@@ -10806,6 +10890,9 @@ class Edit$1 {
                 args.cancel = true;
             }
         }
+        if (this.parent.enableVirtualization) {
+            this.parent.grid.contentModule['editedRowIndex'] = this.parent.grid.editModule.editModule['index'];
+        }
         // if (this.isAdd && this.parent.editSettings.mode === 'Batch' && !args.cell.parentElement.classList.contains('e-insertedrow')) {
         //   this.isAdd = false;
         // }
@@ -10924,6 +11011,9 @@ class Edit$1 {
                 this.parent.grid.isEdit = true;
             }
         }
+        if (this.parent.enableVirtualization) {
+            this.parent.grid.contentModule['virtualData'] = {};
+        }
     }
     afterCellSave(args, row, rowIndex) {
         let mRow;
@@ -11173,7 +11263,12 @@ class Edit$1 {
                 if (isVirtualization) {
                     this.prevAriaRowIndex = '-1';
                 }
-                focussedElement.focus();
+                if (!this.parent.enableVirtualization || this.parent.enableVirtualization && !Object.keys(this.parent.grid.contentModule['emptyRowData']).length) {
+                    focussedElement.focus();
+                }
+                if (this.parent.enableVirtualization && !Object.keys(this.parent.grid.contentModule['emptyRowData']).length) {
+                    this.parent.grid.contentModule['createEmptyRowdata']();
+                }
             }
         }
         if (this.parent.editSettings.mode === 'Batch' && !isNullOrUndefined(this.addRowIndex) && this.addRowIndex !== -1 && this['isAddedRowByMethod'] && !this.isAddedRowByContextMenu) {
@@ -11293,6 +11388,9 @@ class Edit$1 {
             }
             if (this.isAddedRowByMethod && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {
                 this.addRowRecord = this.parent.flatData[this.parent.grid.selectedRowIndex];
+                if (this.parent.enableVirtualization && this.isAddedRowByContextMenu) {
+                    this.addRowRecord = this.parent.getCurrentViewRecords()[this.addRowIndex];
+                }
             }
             else {
                 this.addRowRecord = this.parent.getSelectedRecords()[0];
@@ -11329,15 +11427,18 @@ class Edit$1 {
             let position = null;
             value.taskData = isNullOrUndefined(value.taskData) ? extend({}, args.data) : value.taskData;
             let currentData;
-            if (this.parent.editSettings.mode === 'Batch' && this['isAddedRowByMethod'] && !isNullOrUndefined(this.addRowIndex)) {
+            if (this.parent.enableVirtualization && args.index !== 0) {
+                currentData = this.parent.flatData;
+            }
+            else if (this.parent.editSettings.mode === 'Batch' && this['isAddedRowByMethod'] && !isNullOrUndefined(this.addRowIndex)) {
                 currentData = this.batchEditModule['batchRecords'];
             }
             else {
                 currentData = this.parent.grid.getCurrentViewRecords();
             }
             if (this.parent.enableVirtualization && args.index !== 0) {
-                this.addRowIndex = this.parent.grid.getCurrentViewRecords().indexOf(this.addRowRecord);
-                this.selectedIndex = parseInt(this.parent.getRows()[this.addRowIndex].getAttribute('data-rowindex'), 10);
+                this.addRowIndex = this.parent.flatData.indexOf(this.addRowRecord);
+                this.selectedIndex = this.addRowIndex;
             }
             let index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');
@@ -11351,7 +11452,8 @@ class Edit$1 {
             const rows = this.parent.getRows();
             const firstAriaIndex = rows.length ? currentData.indexOf(currentData[0]) : 0;
             const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
-            const withinRange = this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
+            const withinRange = this.parent.enableVirtualization && args.index !== 0 ? true :
+                this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
             if (currentData.length) {
                 idMapping = currentData[this.addRowIndex][this.parent.idMapping];
                 parentIdMapping = currentData[this.addRowIndex][this.parent.parentIdMapping];
@@ -11699,6 +11801,29 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
     getRowByIndex(index) {
         return this.parent.getDataRows().filter((e) => parseInt(e.getAttribute('data-rowindex'), 10) === index)[0];
     }
+    getMovableVirtualRowByIndex(index) {
+        return this.getRowCollection(index, true);
+    }
+    getFrozenRightVirtualRowByIndex(index) {
+        return this.getRowCollection(index, false, false, true);
+    }
+    getRowCollection(index, isMovable, isRowObject, isFrozenRight) {
+        const startIdx = parseInt(this.parent.getRows()[0].getAttribute(dataRowIndex), 10);
+        let rowCollection = isMovable ? this.parent.getMovableDataRows() : this.parent.getDataRows();
+        rowCollection = isFrozenRight ? this.parent.getFrozenRightDataRows() : rowCollection;
+        const collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
+        let 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;
+    }
     addEventListener() {
         this.parent.on(virtualActionArgs, this.virtualOtherAction, this);
         this.parent.on(indexModifier, this.indexModifier, this);
@@ -11714,10 +11839,10 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
     }
     indexModifier(args) {
-        const content = this.parent.getContent().querySelector('.e-content');
+        const content$$1 = this.parent.getContent().querySelector('.e-content');
         if (this.recordAdded && this.startIndex > -1 && this.endIndex > -1) {
             if (this.endIndex > args.count - this.parent.pageSettings.pageSize) {
-                const nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
+                const nextSetResIndex = ~~(content$$1.scrollTop / this.parent.getRowHeight());
                 let lastIndex = nextSetResIndex + this.parent.getRows().length;
                 if (lastIndex > args.count) {
                     lastIndex = nextSetResIndex +
@@ -11726,7 +11851,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 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;
             }
@@ -11777,7 +11902,15 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             && 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) {
+                    const width = this.parent.enableColumnVirtualization ?
+                        this.getColumnOffset(this.parent.columns.length - 1) + 'px' : '100%';
+                    const 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%');
                 }
             }
@@ -11875,6 +12008,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         return new Cell(opt);
     }
     beginEdit(e) {
+        this['editedRowIndex'] = e.index;
         const selector = '.e-row[data-rowindex="' + e.index + '"]';
         const index = this.parent.getContent().querySelector(selector).rowIndex;
         const rowData = this.parent.getCurrentViewRecords()[index];
@@ -11914,8 +12048,8 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
     }
     virtualEditSuccess() {
         const isAdd = 'isAdd';
-        const content = this.parent.getContent().querySelector('.e-content');
-        if (this[isAdd] && content.querySelector('.e-addedrow')) {
+        const content$$1 = this.parent.getContent().querySelector('.e-content');
+        if (this[isAdd] && content$$1.querySelector('.e-addedrow')) {
             this.recordAdded = true;
         }
     }
@@ -11929,10 +12063,10 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
     }
     restoreNewRow() {
         const isAdd = 'isAdd';
-        const content = this.parent.getContent().querySelector('.e-content');
-        if (this[isAdd] && !content.querySelector('.e-addedrow')) {
+        const content$$1 = this.parent.getContent().querySelector('.e-content');
+        if (this[isAdd] && !content$$1.querySelector('.e-addedrow')) {
             this.parent.isEdit = false;
-            this.parent.addRecord();
+            this.parent.editModule.addRecord(null, this.parent.root.editModule.selectedIndex);
         }
     }
     getData(data) {
@@ -11945,7 +12079,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             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;
         }
         const actionComplete$$1 = 'actionComplete';
         super[actionComplete$$1](args);
@@ -11966,17 +12100,20 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     const 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);
+                    }
                 }
             }
         };
     }
     scrollListeners(scrollArgs) {
+        this['scrollAfterEdit']();
         const info = scrollArgs.sentinel;
         const outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
-        const content = this.parent.getContent().querySelector('.e-content');
+        const content$$1 = this.parent.getContent().querySelector('.e-content');
         const scrollHeight = outBuffer * this.parent.getRowHeight();
         const upScroll = (scrollArgs.offset.top - this.translateY) < 0;
         const downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) >= scrollHeight;
@@ -11986,7 +12123,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
             const vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? this.parent.height :
                 this.parent.element.getBoundingClientRect().height);
-            let index = (~~(content.scrollTop / this.parent.getRowHeight())
+            let index = (~~(content$$1.scrollTop / this.parent.getRowHeight())
                 + Math.ceil(vHeight / this.parent.getRowHeight()))
                 - this.parent.pageSettings.pageSize;
             index = (index > 0) ? index : 0;
@@ -12001,7 +12138,8 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 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;
             }
@@ -12030,7 +12168,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             }
         }
         else if (downScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
-            let nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
+            let nextSetResIndex = ~~(content$$1.scrollTop / this.parent.getRowHeight());
             const isLastBlock = (this[selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
             if (!isNullOrUndefined(this[selectedRowIndex]) && this[selectedRowIndex] !== -1 &&
                 nextSetResIndex !== this[selectedRowIndex] && !isLastBlock) {
@@ -12048,7 +12186,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 this.startIndex = currentViewData[0][indexValue] + (this.parent.pageSettings.pageSize / 2);
             }
             if (scrollArgs.offset.top > (this.parent.getRowHeight() * this.totalRecords)) {
-                this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
+                this.translateY = this.getTranslateY(scrollArgs.offset.top, content$$1.getBoundingClientRect().height);
             }
             else {
                 if (this.parent.allowRowDragAndDrop) {
@@ -12066,6 +12204,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.parent.setColumnIndexesInView(this.parent.enableColumnVirtualization ? viewInfo.columnIndexes : []);
             const 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;
             }
@@ -12073,12 +12212,28 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
     }
     appendContent(target, newChild, e) {
+        const 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.appendContent(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 {
             const info = e.virtualInfo.sentinelInfo && e.virtualInfo.sentinelInfo.axis === 'Y' &&
@@ -12164,6 +12319,11 @@ class TreeInterSectionObserver extends InterSectionObserver {
         const containerRect = 'containerRect';
         super[containerRect] = getValue('options', this).container.getBoundingClientRect();
         EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
+        if (getValue('options', this).movableContainer) {
+            const movableContainerRect = 'movableContainerRect';
+            super[movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
+            EventHandler.add(getValue('options', this).movableContainer, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
+        }
     }
     clear() {
         this.lastPos = null;
@@ -12365,6 +12525,7 @@ class VirtualScroll$1 {
                 }
             }
             this.expandCollapseRec = null;
+            startIndex = startIndex < 0 ? 0 : startIndex;
             pageingDetails.result = visualData.slice(startIndex, endIndex);
             this.prevstartIndex = startIndex;
             this.prevendIndex = endIndex;
@@ -12394,12 +12555,14 @@ class TreeVirtual extends VirtualScroll {
         const parentGrid = getValue('parent', this);
         getValue('parent', this).log(['limitation', 'virtual_height'], 'virtualization');
         const renderer = getValue('locator', this).getService('rendererFactory');
-        if (parentGrid.enableColumnVirtualization) {
+        if (!parentGrid.isFrozenGrid()) {
+            if (parentGrid.enableColumnVirtualization) {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Header, new VirtualHeaderRenderer(getValue('parent', this), getValue('locator', this))]);
+            }
             getValue('addRenderer', renderer)
-                .apply(renderer, [RenderType.Header, new VirtualHeaderRenderer(getValue('parent', this), getValue('locator', this))]);
+                .apply(renderer, [RenderType.Content, new VirtualTreeContentRenderer(getValue('parent', this), getValue('locator', this))]);
         }
-        getValue('addRenderer', renderer)
-            .apply(renderer, [RenderType.Content, new VirtualTreeContentRenderer(getValue('parent', this), getValue('locator', this))]);
         //renderer.addRenderer(RenderType.Content, new VirtualTreeContentRenderer(getValue('parent', this), getValue('locator', this)));
         this.ensurePageSize();
     }
@@ -12418,6 +12581,138 @@ class TreeVirtual extends VirtualScroll {
     }
 }
 
+/**
+ * VirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+class VirtualTreeFreezeRenderer extends VirtualFreezeRenderer {
+    constructor(parent, locator) {
+        super(parent, locator);
+        this.addEventListener();
+    }
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable() {
+        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');
+        const movableCont = this.getMovableContent();
+        const minHeight = this.parent.height;
+        this.virtualRenderer.virtualEle.content = this.virtualRenderer.content = this.getPanel().querySelector('.' + 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('.' + movableContent);
+            this.virtualRenderer.virtualEle.renderMovableWrapper(minHeight);
+            this.virtualRenderer.virtualEle.renderMovablePlaceHolder();
+            const 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
+     */
+    appendContent(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.appendContent(target, newChild, e);
+    }
+    /**
+     * @param {Object[]} data - specifies the data
+     * @param {NotifyArgs} e - specifies the notifyargs
+     * @returns {Row<Column>[]} returns the row
+     * @hidden
+     */
+    generateRows(data, e) {
+        return super.generateRows(data, e);
+    }
+}
+/**
+ * ColumnVirtualTreeFreezeRenderer is used to render the virtual table within the frozen and movable content table
+ *
+ * @hidden
+ */
+class ColumnVirtualTreeFreezeRenderer extends ColumnVirtualFreezeRenderer {
+    constructor(parent, locator) {
+        super(parent, locator);
+        this.serviceLoc = locator;
+        this.eventListener('on');
+    }
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable() {
+        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');
+        const frozenRightCont = this.getFrozenRightContent();
+        let frzCont = this.getFrozenContent();
+        const movableCont = this.getMovableContent();
+        if (this.parent.getFrozenMode() === 'Right') {
+            frzCont = frozenRightCont;
+        }
+        this.virtualRenderer.virtualEle.content = this.virtualRenderer.content = this.getPanel().querySelector('.' + content);
+        this.virtualRenderer.virtualEle.content.style.overflowX = 'hidden';
+        const minHeight = this.parent.height;
+        this.virtualRenderer.virtualEle.renderFrozenWrapper(minHeight);
+        this.virtualRenderer.virtualEle.renderFrozenPlaceHolder();
+        super['renderVirtualFrozenLeft'](frzCont, movableCont);
+        super['renderVirtualFrozenRight'](frzCont, movableCont);
+        super['renderVirtualFrozenLeftRight'](frzCont, movableCont, frozenRightCont);
+        this.virtualRenderer.virtualEle.table = this.getTable();
+        setDebounce(this.parent, this.virtualRenderer, this.scrollbar, this.getMovableContent());
+    }
+    appendContent(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.appendContent(target, newChild, e);
+    }
+}
+/**
+ * VirtualTreeFreezeHdrRenderer is used to render the virtual table within the frozen and movable header table
+ *
+ * @hidden
+ */
+class VirtualTreeFreezeHdrRenderer extends VirtualFreezeHdrRenderer {
+    /**
+     * @returns {void}
+     * @hidden
+     */
+    renderTable() {
+        super.renderTable();
+    }
+    rfshMovable() {
+        super.rfshMovable();
+    }
+}
+
 /**
  * TreeGrid Freeze module
  *
@@ -12438,6 +12733,7 @@ class Freeze$1 {
         this.parent.on('rowExpandCollapse', this.rowExpandCollapse, this);
         this.parent.on('dataBoundArg', this.dataBoundArg, this);
         this.parent.grid.on('dblclick', this.dblClickHandler, this);
+        this.parent.grid.on('initial-load', this.instantiateRenderer, this);
     }
     removeEventListener() {
         if (this.parent.isDestroyed) {
@@ -12446,6 +12742,40 @@ class Freeze$1 {
         this.parent.off('rowExpandCollapse', this.rowExpandCollapse);
         this.parent.off('dataBoundArg', this.dataBoundArg);
         this.parent.grid.off('dblclick', this.dblClickHandler);
+        this.parent.grid.off('initial-load', this.instantiateRenderer);
+    }
+    instantiateRenderer() {
+        const renderer = getValue('serviceLocator', this.parent.grid).getService('rendererFactory');
+        if (this.parent.getFrozenColumns()) {
+            if (this.parent.enableColumnVirtualization) {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Header, new VirtualTreeFreezeHdrRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+            else {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Header, new FreezeRender(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+            if (this.parent.enableVirtualization) {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Content, new VirtualTreeFreezeRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+            else {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Content, new FreezeContentRender(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+        }
+        if (this.parent.getFrozenLeftColumnsCount() || this.parent.getFrozenRightColumnsCount()) {
+            getValue('addRenderer', renderer)
+                .apply(renderer, [RenderType.Header, new ColumnFreezeHeaderRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            if (this.parent.enableVirtualization) {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Content, new ColumnVirtualTreeFreezeRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+            else {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Content, new ColumnFreezeContentRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
+        }
     }
     rowExpandCollapse(args) {
         const movableRows = this.parent.getMovableDataRows();
@@ -12486,7 +12816,7 @@ class Freeze$1 {
     }
     dblClickHandler(e) {
         if (parentsUntil(e.target, 'e-rowcell') &&
-            this.parent.grid.editSettings.allowEditOnDblClick && this.parent.editSettings.mode !== 'Cell') {
+            this.parent.grid.editSettings.allowEditOnDblClick && this.parent.editSettings.mode !== 'Cell' && (!e.target['classList'].contains('e-treegridcollapse') && !e.target['classList'].contains('e-treegridexpand'))) {
             this.parent.grid.editModule.startEdit(parentsUntil(e.target, 'e-row'));
         }
     }
@@ -12892,5 +13222,5 @@ class InfiniteScroll$1 {
  * Export TreeGrid component
  */
 
-export { TreeGrid, load, rowDataBound, dataBound, queryCellInfo, beforeDataBound, actionBegin, dataStateChange, actionComplete, rowSelecting, rowSelected, checkboxChange, rowDeselected, toolbarClick, beforeExcelExport, beforePdfExport, resizeStop, expanded, expanding, collapsed, collapsing, remoteExpand, localPagedExpandCollapse, pagingActions, printGridInit, contextMenuOpen, contextMenuClick, beforeCopy, beforePaste, savePreviousRowPosition, crudAction, beginEdit, beginAdd, recordDoubleClick, cellSave, cellSaved, cellEdit, batchDelete, batchCancel, batchAdd, beforeBatchDelete, beforeBatchAdd, beforeBatchSave, batchSave, keyPressed, updateData, doubleTap, virtualColumnIndex, virtualActionArgs, destroy, dataListener, indexModifier, beforeStartEdit, beforeBatchCancel, batchEditFormRendered, detailDataBound, rowDrag, rowDragStartHelper, rowDrop, rowDragStart, rowsAdd, rowsRemove, rowdraging, rowDropped, autoCol, rowDeselecting, DataManipulation, Reorder$1 as Reorder, Resize$1 as Resize, RowDD$1 as RowDD, Column, EditSettings, Predicate$1 as Predicate, FilterSettings, PageSettings, SearchSettings, SelectionSettings, AggregateColumn, AggregateRow, SortDescriptor, SortSettings, RowDropSettings$1 as RowDropSettings, InfiniteScrollSettings, Render, TreeVirtualRowModelGenerator, isRemoteData, isCountRequired, isCheckboxcolumn, isFilterChildHierarchy, findParentRecords, getExpandStatus, findChildrenRecords, isOffline, extendArray, getPlainData, getParentData, isHidden, ToolbarItem, ContextMenuItems, Filter$1 as Filter, ExcelExport$1 as ExcelExport, PdfExport$1 as PdfExport, Page$1 as Page, Toolbar$1 as Toolbar, Aggregate$1 as Aggregate, Sort$1 as Sort, TreeClipboard, ColumnMenu$1 as ColumnMenu, ContextMenu$1 as ContextMenu, Edit$1 as Edit, CommandColumn$1 as CommandColumn, Selection, DetailRow$1 as DetailRow, VirtualScroll$1 as VirtualScroll, TreeVirtual, Freeze$1 as Freeze, ColumnChooser$1 as ColumnChooser, Logger$1 as Logger, treeGridDetails, InfiniteScroll$1 as InfiniteScroll };
+export { TreeGrid, load, rowDataBound, dataBound, queryCellInfo, beforeDataBound, actionBegin, dataStateChange, actionComplete, rowSelecting, rowSelected, checkboxChange, rowDeselected, toolbarClick, beforeExcelExport, beforePdfExport, resizeStop, expanded, expanding, collapsed, collapsing, remoteExpand, localPagedExpandCollapse, pagingActions, printGridInit, contextMenuOpen, contextMenuClick, beforeCopy, beforePaste, savePreviousRowPosition, crudAction, beginEdit, beginAdd, recordDoubleClick, cellSave, cellSaved, cellEdit, batchDelete, batchCancel, batchAdd, beforeBatchDelete, beforeBatchAdd, beforeBatchSave, batchSave, keyPressed, updateData, doubleTap, virtualColumnIndex, virtualActionArgs, destroy, dataListener, indexModifier, beforeStartEdit, beforeBatchCancel, batchEditFormRendered, detailDataBound, rowDrag, rowDragStartHelper, rowDrop, rowDragStart, rowsAdd, rowsRemove, rowdraging, rowDropped, autoCol, rowDeselecting, headerContent, movableContent, movableHeader, frozenContent, frozenHeader, content, table, leftRight, frozenRight, frozenLeft, dataColIndex, ariaColIndex, dataRowIndex, ariaRowIndex, DataManipulation, Reorder$1 as Reorder, Resize$1 as Resize, RowDD$1 as RowDD, Column, EditSettings, Predicate$1 as Predicate, FilterSettings, PageSettings, SearchSettings, SelectionSettings, AggregateColumn, AggregateRow, SortDescriptor, SortSettings, RowDropSettings$1 as RowDropSettings, InfiniteScrollSettings, Render, TreeVirtualRowModelGenerator, isRemoteData, isCountRequired, isCheckboxcolumn, isFilterChildHierarchy, findParentRecords, getExpandStatus, findChildrenRecords, isOffline, extendArray, getPlainData, getParentData, isHidden, ToolbarItem, ContextMenuItems, Filter$1 as Filter, ExcelExport$1 as ExcelExport, PdfExport$1 as PdfExport, Page$1 as Page, Toolbar$1 as Toolbar, Aggregate$1 as Aggregate, Sort$1 as Sort, TreeClipboard, ColumnMenu$1 as ColumnMenu, ContextMenu$1 as ContextMenu, Edit$1 as Edit, CommandColumn$1 as CommandColumn, Selection, DetailRow$1 as DetailRow, VirtualScroll$1 as VirtualScroll, TreeVirtual, Freeze$1 as Freeze, ColumnChooser$1 as ColumnChooser, Logger$1 as Logger, treeGridDetails, InfiniteScroll$1 as InfiniteScroll };
 //# sourceMappingURL=ej2-treegrid.es2015.js.map