@syncfusion/ej2-treegrid 20.1.55 → 20.1.56-97113

package/src/treegrid/base/treegrid.js

@@ -17,11 +17,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, extend } from '@syncfusion/ej2-base';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, extend, merge } from '@syncfusion/ej2-base';
 import { removeClass, Complex, Collection, getValue } from '@syncfusion/ej2-base';
 import { Event, Property, NotifyPropertyChanges, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
 import { Column } from '../models/column';
 import { RowDropSettings, getUid } from '@syncfusion/ej2-grids';
+import { LoadingIndicator } from '../models/loading-indicator';
 import { FilterSettings } from '../models/filter-settings';
 import { TextWrapSettings } from '../models/textwrap-settings';
 import { Logger as TreeLogger } from '../actions/logger';
@@ -47,6 +48,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
@@ -76,9 +78,12 @@ var TreeGrid = /** @class */ (function (_super) {
                 var isEqual = true;
                 var excludeKeys = ['Children', 'childRecords', 'taskData', 'uniqueID', 'parentItem', 'parentUniqueID', 'index'];
                 for (var i = 0; i < keys.length; i++) {
-                    if (old[keys[i]] !== current[keys[i]] && excludeKeys.indexOf(keys[i]) === -1) {
-                        var isDate = old[keys[i]] instanceof Date && current[keys[i]] instanceof Date;
-                        if (!isDate || (old[keys[i]].getTime() !== current[keys[i]].getTime())) {
+                    if (old[keys[parseInt(i.toString(), 10)]] !== current[keys[parseInt(i.toString(), 10)]] &&
+                        excludeKeys.indexOf(keys[parseInt(i.toString(), 10)]) === -1) {
+                        var isDate = old[keys[parseInt(i.toString(), 10)]] instanceof Date &&
+                            current[keys[parseInt(i.toString(), 10)]] instanceof Date;
+                        if (!isDate || (old[keys[parseInt(i.toString(), 10)]].getTime() !==
+                            current[keys[parseInt(i.toString(), 10)]].getTime())) {
                             isEqual = false;
                             break;
                         }
@@ -93,7 +98,7 @@ var TreeGrid = /** @class */ (function (_super) {
         TreeGrid_1.Inject(TreeGridSelection);
         setValue('mergePersistData', _this.mergePersistTreeGridData, _this);
         var logger = 'Logger';
-        if (!isNullOrUndefined(_this.injectedModules[logger])) {
+        if (!isNullOrUndefined(_this.injectedModules["" + logger])) {
             Grid.Inject(Logger);
         }
         _this.grid = new Grid();
@@ -285,17 +290,21 @@ var TreeGrid = /** @class */ (function (_super) {
                 case 'ctrlShiftUpArrow':
                     target = e.target;
                     column = target.closest('.e-rowcell');
-                    row = column.closest('tr');
-                    if (row !== null && row !== undefined) {
-                        this.expandCollapseRequest(row.querySelector('.e-treegridexpand'));
+                    if (!isNullOrUndefined(column)) {
+                        row = column.closest('tr');
+                        if (!isNullOrUndefined(row) && !(isNullOrUndefined(row.getElementsByClassName('e-treegridexpand')[0]))) {
+                            this.expandCollapseRequest(row.querySelector('.e-treegridexpand'));
+                        }
                     }
                     break;
                 case 'ctrlShiftDownArrow':
                     target = e.target;
                     column = target.closest('.e-rowcell');
-                    row = column.closest('tr');
-                    if (row !== null && row !== undefined) {
-                        this.expandCollapseRequest(row.querySelector('.e-treegridcollapse'));
+                    if (!isNullOrUndefined(column)) {
+                        row = column.closest('tr');
+                        if (!isNullOrUndefined(row) && !(isNullOrUndefined(row.getElementsByClassName('e-treegridcollapse')[0]))) {
+                            this.expandCollapseRequest(row.querySelector('.e-treegridcollapse'));
+                        }
                     }
                     break;
                 case 'downArrow':
@@ -306,7 +315,7 @@ var TreeGrid = /** @class */ (function (_super) {
                             var rowIndex = summaryElement.rowIndex;
                             this.selectRow(rowIndex);
                             var cellIndex = e.target.cellIndex;
-                            var row_1 = summaryElement.children[cellIndex];
+                            var row_1 = summaryElement.children[parseInt(cellIndex.toString(), 10)];
                             addClass([row_1], 'e-focused');
                             addClass([row_1], 'e-focus');
                         }
@@ -323,7 +332,7 @@ var TreeGrid = /** @class */ (function (_super) {
                             var rIndex = summaryElement.rowIndex;
                             this.selectRow(rIndex);
                             var cIndex = e.target.cellIndex;
-                            var rows = summaryElement.children[cIndex];
+                            var rows = summaryElement.children[parseInt(cIndex.toString(), 10)];
                             addClass([rows], 'e-focused');
                             addClass([rows], 'e-focus');
                         }
@@ -355,6 +364,9 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.initProperties = function () {
         this.defaultLocale = {};
         this.flatData = [];
+        this.infiniteScrollData = [];
+        this.remoteCollapsedData = [];
+        this.remoteExpandedData = [];
         this.parentData = [];
         this.columnModel = [];
         this.isExpandAll = false;
@@ -398,7 +410,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.requiredModules = function () {
         var modules = [];
         var splitFrozenCount = 'splitFrozenCount';
-        this.grid[splitFrozenCount](this.getGridColumns(this.columns));
+        this.grid["" + splitFrozenCount](this.getGridColumns(this.columns));
         if (this.isDestroyed) {
             return modules;
         }
@@ -448,8 +460,11 @@ var TreeGrid = /** @class */ (function (_super) {
                 member: 'ExcelExport', args: [this]
             });
         }
+        var freezePresent = this.injectedModules.filter(function (e) {
+            return e.prototype.getModuleName() === 'freeze';
+        });
         if (this.frozenColumns || this.frozenRows || this.getFrozenColumns() ||
-            this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount()) {
+            this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount() || freezePresent.length) {
             modules.push({
                 member: 'freeze', args: [this]
             });
@@ -479,7 +494,7 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.extendRequiredModules = function (modules) {
         var IsRowDDInjected = this.injectedModules.filter(function (e) {
-            return e.name === 'RowDD';
+            return e.prototype.getModuleName() === 'rowDragAndDrop';
         });
         if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
             if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
@@ -605,14 +620,14 @@ var TreeGrid = /** @class */ (function (_super) {
             var modules = [];
             modules = gridRequiredModules.apply(this);
             for (var i = 0; i < modules.length; i++) {
-                if (modules[i].member === 'virtualscroll') {
-                    modules[i].member = 'treeVirtualScroll';
+                if (modules[parseInt(i.toString(), 10)].member === 'virtualscroll') {
+                    modules[parseInt(i.toString(), 10)].member = 'treeVirtualScroll';
                 }
             }
             return modules;
         };
         var root = 'root';
-        this.grid[root] = this[root] ? this[root] : this;
+        this.grid["" + root] = this["" + root] ? this["" + root] : this;
         this.grid.appendTo(gridContainer);
         if (this.isIndentEnabled) {
             this.refreshToolbarItems();
@@ -620,12 +635,12 @@ var TreeGrid = /** @class */ (function (_super) {
         this.wireEvents();
         this.renderComplete();
         var destroyTemplate = 'destroyTemplate';
-        var destroyTemplateFn = this.grid[destroyTemplate];
+        var destroyTemplateFn = this.grid["" + destroyTemplate];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.grid[destroyTemplate] = function (args, index) {
+        this.grid["" + destroyTemplate] = function (args, index) {
             destroyTemplateFn.apply(_this.grid);
             var portals = 'portals';
-            if (!(_this.isReact && isNullOrUndefined(_this[portals]))) {
+            if (!(_this.isReact && isNullOrUndefined(_this["" + portals]))) {
                 _this.clearTemplate(args, index);
             }
         };
@@ -643,7 +658,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;
@@ -697,6 +712,8 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.enableColumnVirtualization = this.enableColumnVirtualization;
         this.grid.enableInfiniteScrolling = this.enableInfiniteScrolling;
         this.grid.infiniteScrollSettings = this.infiniteScrollSettings;
+        this.grid.enableVirtualMaskRow = this.enableVirtualMaskRow;
+        this.grid.loadingIndicator = this.loadingIndicator;
         this.grid.width = this.width;
         this.grid.height = this.height;
         this.grid.enableAltRow = this.enableAltRow;
@@ -733,30 +750,38 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.frozenColumns = this.frozenColumns;
         this.grid.clipMode = getActualProperties(this.clipMode);
         var templateInstance = 'templateDotnetInstance';
-        this.grid[templateInstance] = this[templateInstance];
+        this.grid["" + templateInstance] = this["" + templateInstance];
         var isJsComponent = 'isJsComponent';
-        this.grid[isJsComponent] = true;
+        this.grid["" + isJsComponent] = true;
     };
     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'))
+            && (!isNullOrUndefined(args.data) && args.data['hasChildRecords'])) {
+            args.cancel = true;
+            return;
+        }
+    };
     TreeGrid.prototype.bindGridEvents = function () {
         var _this = this;
         this.grid.rowSelecting = function (args) {
-            if (!isNullOrUndefined(args.target) && (args.target.classList.contains('e-treegridexpand')
-                || args.target.classList.contains('e-treegridcollapse') || args.target.classList.contains('e-summarycell'))) {
-                args.cancel = true;
-                return;
-            }
+            _this.IsExpandCollapseClicked(args);
             _this.trigger(events.rowSelecting, args);
         };
+        this.grid.rowDeselecting = function (args) {
+            _this.IsExpandCollapseClicked(args);
+            _this.trigger(events.rowDeselecting, args);
+        };
         this.grid.rowSelected = function (args) {
             if (_this.enableVirtualization && args.isHeaderCheckboxClicked &&
                 _this.grid.currentViewData.length !== _this.grid.selectionModule.selectedRowIndexes.length) {
                 var updateRowSelection = 'updateRowSelection';
                 for (var i = 0; i < _this.getRows().length; i++) {
-                    if (_this.getRows()[i].getElementsByClassName('e-frame e-icons e-uncheck').length) {
-                        _this.grid.selectionModule[updateRowSelection](_this.getRows()[i], _this.getCurrentViewRecords()[i].index);
+                    if (_this.getRows()[parseInt(i.toString(), 10)].getElementsByClassName('e-frame e-icons e-uncheck').length) {
+                        _this.grid.selectionModule["" + updateRowSelection](_this.getRows()[parseInt(i.toString(), 10)], _this.getCurrentViewRecords()[parseInt(i.toString(), 10)].index);
                     }
                 }
             }
@@ -792,7 +817,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);
@@ -809,8 +833,8 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.beforePaste = function (args) {
             var rows = _this.getRows();
             var rowIndex = 'rowIndex';
-            while (rows[args[rowIndex]].classList.contains('e-summaryrow')) {
-                args[rowIndex]++;
+            while (rows[args["" + rowIndex]].classList.contains('e-summaryrow')) {
+                args["" + rowIndex]++;
             }
             _this.trigger(events.beforePaste, args);
         };
@@ -818,7 +842,7 @@ var TreeGrid = /** @class */ (function (_super) {
             _this.grid.on('initial-end', _this.afterGridRender, _this);
             if (!isNullOrUndefined(_this.loggerModule)) {
                 var loggerModule = 'loggerModule';
-                _this.loggerModule = _this.grid[loggerModule] = new TreeLogger(_this.grid);
+                _this.loggerModule = _this.grid["" + loggerModule] = new TreeLogger(_this.grid);
             }
         };
         this.grid.printComplete = this.triggerEvents.bind(this);
@@ -833,10 +857,10 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.lastRowBorder = function (visiblerow, isAddBorder) {
         for (var j = 0; j < visiblerow.cells.length; j++) {
             if (isAddBorder) {
-                addClass([visiblerow.cells[j]], 'e-lastrowcell');
+                addClass([visiblerow.cells[parseInt(j.toString(), 10)]], 'e-lastrowcell');
             }
             else {
-                removeClass([visiblerow.cells[j]], 'e-lastrowcell');
+                removeClass([visiblerow.cells[parseInt(j.toString(), 10)]], 'e-lastrowcell');
             }
         }
     };
@@ -865,22 +889,22 @@ var TreeGrid = /** @class */ (function (_super) {
                 var rows = _this.getContentTable().rows;
                 var totalRows = [].slice.call(rows);
                 for (var i = totalRows.length - 1; i > 0; i--) {
-                    if (!isHidden(totalRows[i])) {
-                        if (totalRows[i].nextElementSibling) {
-                            _this.lastRowBorder(totalRows[i], true);
+                    if (!isHidden(totalRows[parseInt(i.toString(), 10)])) {
+                        if (totalRows[parseInt(i.toString(), 10)].nextElementSibling) {
+                            _this.lastRowBorder(totalRows[parseInt(i.toString(), 10)], true);
                         }
                         break;
                     }
                 }
             }
             var action = 'action';
-            if (_this.enableVirtualization && _this.selectionSettings.persistSelection && (_this.dataResults[action] === 'expand' || _this.dataResults[action] === 'collapse')) {
+            if (_this.enableVirtualization && _this.selectionSettings.persistSelection && (_this.dataResults["" + action] === 'expand' || _this.dataResults["" + action] === 'collapse')) {
                 var refreshPersistSelection = 'refreshPersistSelection';
-                _this.grid.selectionModule[refreshPersistSelection]();
+                _this.grid.selectionModule["" + refreshPersistSelection]();
                 if (_this.grid.selectionSettings.type === 'Single') {
                     var updateRowSelection = 'updateRowSelection';
                     var index = _this.getCurrentViewRecords().indexOf(_this.grid.selectionModule['data']);
-                    _this.grid.selectionModule[updateRowSelection](_this.getRows()[index], index);
+                    _this.grid.selectionModule["" + updateRowSelection](_this.getRows()[parseInt(index.toString(), 10)], index);
                 }
             }
             _this.trigger(events.dataBound, args);
@@ -898,7 +922,7 @@ var TreeGrid = /** @class */ (function (_super) {
             else if (treeGrid.flatData.length === 0 && isOffline(treeGrid) && treeGrid.dataSource instanceof DataManager) {
                 var dm = treeGrid.dataSource;
                 treeGrid.dataModule.convertToFlatData(dm.dataSource.json);
-                args.result = treeGrid.grid.dataSource[dataSource].json = treeGrid.flatData;
+                args.result = treeGrid.grid.dataSource["" + dataSource].json = treeGrid.flatData;
             }
             if (!isRemoteData(treeGrid) && !isCountRequired(this) && !isNullOrUndefined(treeGrid.dataSource)) {
                 if (this.isPrinting) {
@@ -973,6 +997,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);
             }
         };
@@ -999,7 +1026,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.cellEdit = function (args) {
             var prom = 'promise';
             var promise = new Deferred();
-            args[prom] = promise;
+            args["" + prom] = promise;
             _this.notify(events.cellEdit, args);
             return promise;
         };
@@ -1048,17 +1075,17 @@ var TreeGrid = /** @class */ (function (_super) {
                 this.flatData : new DataManager(this.dataSource.dataSource, this.dataSource.defaultQuery, this.dataSource.adaptor);
         }
         if (this.dataSource instanceof DataManager && (this.dataSource.dataSource.offline || this.dataSource.ready)) {
-            this.grid.dataSource[dataSource].json = extendArray(this.dataSource[dataSource].json);
-            this.grid.dataSource[ready] = this.dataSource.ready;
+            this.grid.dataSource["" + dataSource].json = extendArray(this.dataSource["" + dataSource].json);
+            this.grid.dataSource["" + ready] = this.dataSource.ready;
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
-            if (!isNullOrUndefined(this.grid.dataSource[ready])) {
-                this.grid.dataSource[ready].then(function (e) {
+            if (!isNullOrUndefined(this.grid.dataSource["" + ready])) {
+                this.grid.dataSource["" + ready].then(function (e) {
                     var dm = proxy_1.grid.dataSource;
-                    dm[dataSource].offline = true;
-                    dm[isDataAvailable] = true;
-                    dm[dataSource].json = e.result;
-                    dm[adaptor] = new JsonAdaptor();
+                    dm["" + dataSource].offline = true;
+                    dm["" + isDataAvailable] = true;
+                    dm["" + dataSource].json = e.result;
+                    dm["" + adaptor] = new JsonAdaptor();
                 });
             }
         }
@@ -1074,9 +1101,21 @@ var TreeGrid = /** @class */ (function (_super) {
             if (requestType === 'reorder') {
                 _this.notify('getColumnIndex', {});
             }
+            if (isRemoteData(_this) && _this.enableVirtualization) {
+                if (args.requestType === 'virtualscroll') {
+                    _this.query.expand('VirtualScrollingAction');
+                    _this.showSpinner();
+                }
+                else if (args.requestType === 'searching' && args.searchString === '') {
+                    _this.query.expand('ClearSearchingAction');
+                }
+                else if (args.action === 'clearFilter') {
+                    _this.query.expand('ClearFilteringAction');
+                }
+            }
             _this.notify('actionBegin', { editAction: args });
             if (!isRemoteData(_this) && !isNullOrUndefined(_this.filterModule) && !isCountRequired(_this)
-                && (_this.grid.filterSettings.columns.length === 0 || _this.grid.searchSettings.key.length === 0)) {
+                && (_this.grid.filterSettings.columns.length === 0 && _this.grid.searchSettings.key.length === 0)) {
                 _this.notify('clearFilters', { flatData: _this.grid.dataSource });
                 _this.grid.setProperties({ dataSource: _this.dataResults.result }, true);
                 if (isNullOrUndefined(_this.grid['changedProperties'].dataSource)) {
@@ -1116,6 +1155,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 && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                    _this.expandAll();
+                }
+            }
+            if (args.requestType === 'searching') {
+                if (_this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                    _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];
@@ -1138,6 +1190,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);
             }
         };
@@ -1220,7 +1277,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.bindGridEvents();
         setValue('registeredTemplate', this.registeredTemplate, this.grid);
         var ref = 'viewContainerRef';
-        setValue('viewContainerRef', this[ref], this.grid);
+        setValue('viewContainerRef', this["" + ref], this.grid);
     };
     /**
      * AutoGenerate TreeGrid columns from first record
@@ -1238,8 +1295,8 @@ var TreeGrid = /** @class */ (function (_super) {
             // }
             var keys = Object.keys(record);
             for (var i = 0; i < keys.length; i++) {
-                if ([this.childMapping, this.parentIdMapping].indexOf(keys[i]) === -1) {
-                    this.columns.push(keys[i]);
+                if ([this.childMapping, this.parentIdMapping].indexOf(keys[parseInt(i.toString(), 10)]) === -1) {
+                    this.columns.push(keys[parseInt(i.toString(), 10)]);
                 }
             }
         }
@@ -1256,7 +1313,7 @@ var TreeGrid = /** @class */ (function (_super) {
         edit.template = this.editSettings.template;
         edit.showDeleteConfirmDialog = this.editSettings.showDeleteConfirmDialog;
         edit.allowNextRowEdit = this.editSettings.allowNextRowEdit;
-        edit[guid] = this.editSettings[guid];
+        edit["" + guid] = this.editSettings["" + guid];
         edit.dialog = this.editSettings.dialog;
         switch (this.editSettings.mode) {
             case 'Dialog':
@@ -1285,15 +1342,25 @@ var TreeGrid = /** @class */ (function (_super) {
         if (this.contextMenuItems) {
             var items = [];
             for (var i = 0; i < this.contextMenuItems.length; i++) {
-                switch (this.contextMenuItems[i]) {
+                switch (this.contextMenuItems[parseInt(i.toString(), 10)]) {
                     case 'AddRow':
                     case ContextMenuItems.AddRow:
                         items.push({ text: this.l10n.getConstant('AddRow'),
                             target: '.e-content', id: this.element.id + '_gridcontrol_cmenu_AddRow',
                             items: [{ text: this.l10n.getConstant('Above'), id: 'Above' }, { text: this.l10n.getConstant('Below'), id: 'Below' }, { text: this.l10n.getConstant('Child'), id: 'Child' }] });
                         break;
+                    case 'Indent':
+                    case ContextMenuItems.RowIndent:
+                        items.push({ text: this.l10n.getConstant('RowIndent'),
+                            target: '.e-content', iconCss: 'e-indent e-icons', id: this.element.id + '_gridcontrol_cmenu_Indent' });
+                        break;
+                    case 'Outdent':
+                    case ContextMenuItems.RowOutdent:
+                        items.push({ text: this.l10n.getConstant('RowOutdent'),
+                            target: '.e-content', iconCss: 'e-outdent e-icons', id: this.element.id + '_gridcontrol_cmenu_Outdent' });
+                        break;
                     default:
-                        items.push(this.contextMenuItems[i]);
+                        items.push(this.contextMenuItems[parseInt(i.toString(), 10)]);
                 }
             }
             return items;
@@ -1310,10 +1377,11 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.getGridToolbar = function () {
         if (this.toolbar) {
+            this.l10n = new L10n('treegrid', this.defaultLocale, this.locale);
             var items = [];
             var tooltipText = void 0;
             for (var i = 0; i < this.toolbar.length; i++) {
-                switch (this.toolbar[i]) {
+                switch (this.toolbar[parseInt(i.toString(), 10)]) {
                     case 'Search':
                     case ToolbarItem.Search:
                         items.push('Search');
@@ -1352,7 +1420,7 @@ var TreeGrid = /** @class */ (function (_super) {
                         });
                         break;
                     default:
-                        items.push(this.toolbar[i]);
+                        items.push(this.toolbar[parseInt(i.toString(), 10)]);
                 }
             }
             return items;
@@ -1371,32 +1439,37 @@ var TreeGrid = /** @class */ (function (_super) {
         }
         var treeGridColumn;
         var gridColumn;
-        index = index === 0 ? -1 : index;
+        if (this.columnModel.length === 0) {
+            index = index === 0 ? -1 : index;
+        }
         var gridColumnCollection = [];
         for (var i = 0; i < column.length; i++) {
             index = index + 1;
-            var treeColumn = this.grid.getColumnByUid(column[i].uid);
+            var treeColumn = this.grid.getColumnByUid(column[parseInt(i.toString(), 10)].uid);
             gridColumn = treeColumn ? treeColumn : {};
             treeGridColumn = {};
-            if (typeof this.columns[i] === 'string') {
-                gridColumn.field = treeGridColumn.field = this.columns[i];
+            if (typeof this.columns[parseInt(i.toString(), 10)] === 'string') {
+                gridColumn.field = treeGridColumn.field = this.columns[parseInt(i.toString(), 10)];
             }
             else {
-                for (var _i = 0, _a = Object.keys(column[i]); _i < _a.length; _i++) {
+                for (var _i = 0, _a = Object.keys(column[parseInt(i.toString(), 10)]); _i < _a.length; _i++) {
                     var prop = _a[_i];
                     if (index === this.treeColumnIndex && prop === 'template') {
-                        treeGridColumn[prop] = column[i][prop];
+                        treeGridColumn["" + prop] = column[parseInt(i.toString(), 10)]["" + prop];
+                    }
+                    else if (prop === 'columns' && !isNullOrUndefined(column[parseInt(i.toString(), 10)]["" + prop])) {
+                        gridColumn["" + prop] = this.getGridColumns(column[parseInt(i.toString(), 10)]["" + prop], false, this.columnModel.length - 1);
+                        treeGridColumn["" + prop] = column[parseInt(i.toString(), 10)]["" + prop];
                     }
-                    else if (prop === 'columns' && !isNullOrUndefined(column[i][prop])) {
-                        gridColumn[prop] = this.getGridColumns(column[i][prop], false, index);
-                        treeGridColumn[prop] = column[i][prop];
+                    else if (this.initialRender && !isNullOrUndefined(treeColumn) && this.enablePersistence && prop === 'edit') {
+                        gridColumn["" + prop] = treeGridColumn["" + prop] = treeColumn["" + prop];
                     }
                     else if (!(treeColumn) || prop !== 'sortComparer') {
-                        gridColumn[prop] = treeGridColumn[prop] = column[i][prop];
+                        gridColumn["" + prop] = treeGridColumn["" + prop] = column[parseInt(i.toString(), 10)]["" + prop];
                     }
                 }
             }
-            if (!treeGridColumn[stackedColumn]) {
+            if (!treeGridColumn["" + stackedColumn]) {
                 this.columnModel.push(new Column(treeGridColumn));
             }
             gridColumnCollection.push(gridColumn);
@@ -1516,7 +1589,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.query = this.query;
                     break;
                 case 'enableCollapseAll':
-                    if (newProp[prop]) {
+                    if (newProp["" + prop]) {
                         this.collapseAll();
                     }
                     else {
@@ -1555,6 +1628,9 @@ var TreeGrid = /** @class */ (function (_super) {
                     break;
                 case 'locale':
                     this.grid.locale = this.locale;
+                    this.TreeGridLocale();
+                    this.grid.toolbar = this.getGridToolbar();
+                    this.grid.contextMenuItems = this.getContextMenu();
                     break;
                 case 'selectedRowIndex':
                     this.grid.selectedRowIndex = this.selectedRowIndex;
@@ -1612,8 +1688,8 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.columnMenuItems = getActualProperties(this.columnMenuItems);
                     break;
                 case 'editSettings':
-                    if (this.grid.isEdit && this.grid.editSettings.mode === 'Normal' && newProp[prop].mode &&
-                        (newProp[prop].mode === 'Cell' || newProp[prop].mode === 'Row')) {
+                    if (this.grid.isEdit && this.grid.editSettings.mode === 'Normal' && newProp["" + prop].mode &&
+                        (newProp["" + prop].mode === 'Cell' || newProp["" + prop].mode === 'Row')) {
                         this.grid.closeEdit();
                     }
                     this.grid.editSettings = this.getGridEditSettings();
@@ -1660,8 +1736,8 @@ var TreeGrid = /** @class */ (function (_super) {
             'pagerModule', 'keyboardModule', 'columnMenuModule', 'contextMenuModule', 'editModule', 'virtualScrollModule',
             'selectionModule', 'detailRow', 'rowDragAndDropModule', 'freezeModule'];
         for (var i = 0; i < modules.length; i++) {
-            if (this[modules[i]]) {
-                this[modules[i]] = null;
+            if (this[modules[parseInt(i.toString(), 10)]]) {
+                this[modules[parseInt(i.toString(), 10)]] = null;
             }
         }
         this.element.innerHTML = '';
@@ -1704,10 +1780,10 @@ var TreeGrid = /** @class */ (function (_super) {
         var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',
             'commandTemplate', 'commands', 'dataSource'];
         for (var i = 0; i < keyEntity.length; i++) {
-            var currentObject = this[keyEntity[i]];
-            for (var k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
-                var objVal = val[k];
-                delete currentObject[objVal];
+            var currentObject = this[keyEntity[parseInt(i.toString(), 10)]];
+            for (var k = 0, val = ignoreOnPersist[keyEntity[parseInt(i.toString(), 10)]]; (!isNullOrUndefined(val) && k < val.length); k++) {
+                var objVal = val[parseInt(k.toString(), 10)];
+                delete currentObject["" + objVal];
             }
         }
         this.ignoreInArrays(ignoreOnColumn, this.columns);
@@ -1715,18 +1791,18 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.ignoreInArrays = function (ignoreOnColumn, columns) {
         for (var i = 0; i < columns.length; i++) {
-            if (columns[i].columns) {
-                this.ignoreInColumn(ignoreOnColumn, columns[i]);
-                this.ignoreInArrays(ignoreOnColumn, columns[i].columns);
+            if (columns[parseInt(i.toString(), 10)].columns) {
+                this.ignoreInColumn(ignoreOnColumn, columns[parseInt(i.toString(), 10)]);
+                this.ignoreInArrays(ignoreOnColumn, columns[parseInt(i.toString(), 10)].columns);
             }
             else {
-                this.ignoreInColumn(ignoreOnColumn, columns[i]);
+                this.ignoreInColumn(ignoreOnColumn, columns[parseInt(i.toString(), 10)]);
             }
         }
     };
     TreeGrid.prototype.ignoreInColumn = function (ignoreOnColumn, column) {
         for (var i = 0; i < ignoreOnColumn.length; i++) {
-            delete column[ignoreOnColumn[i]];
+            delete column[ignoreOnColumn[parseInt(i.toString(), 10)]];
             column.filter = {};
         }
     };
@@ -1770,7 +1846,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.addRecord = function (data, index, position) {
         if (this.editModule) {
             var isAddedRowByMethod = 'isAddedRowByMethod';
-            this.editModule[isAddedRowByMethod] = true;
+            this.editModule["" + isAddedRowByMethod] = true;
             this.editModule.addRecord(data, index, position);
         }
     };
@@ -1817,7 +1893,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.updateRow = function (index, data) {
         if (this.grid.editModule) {
             if (!isNullOrUndefined(index)) {
-                var griddata = this.grid.getCurrentViewRecords()[index];
+                var griddata = this.grid.getCurrentViewRecords()[parseInt(index.toString(), 10)];
                 extend(griddata, data);
                 this.grid.editModule.updateRow(index, griddata);
             }
@@ -1927,7 +2003,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.setCellValue = function (key, field, value) {
         this.grid.setCellValue(key, field, value);
         var rowIndex = this.grid.getRowIndexByPrimaryKey(key);
-        var record = this.getCurrentViewRecords()[rowIndex];
+        var record = this.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)];
         if (!isNullOrUndefined(record)) {
             editAction({ value: record, action: 'edit' }, this, this.isSelfReference, record.index, this.grid.selectedRowIndex, field);
         }
@@ -1946,7 +2022,7 @@ var TreeGrid = /** @class */ (function (_super) {
         var level = 0;
         var record = {};
         currentRecords.some(function (value) {
-            if (value[primaryKey] === key) {
+            if (value["" + primaryKey] === key) {
                 record = value;
                 return true;
             }
@@ -1967,7 +2043,7 @@ var TreeGrid = /** @class */ (function (_super) {
         rowData.expanded = record.expanded;
         this.grid.setRowData(key, rowData);
         var visibleRecords = this.getVisibleRecords();
-        if (visibleRecords.length > 0 && key === (visibleRecords[visibleRecords.length - 1])[primaryKey]) {
+        if (visibleRecords.length > 0 && key === (visibleRecords[visibleRecords.length - 1])["" + primaryKey]) {
             var table = this.getContentTable();
             var sHeight = table.scrollHeight;
             var clientHeight = this.getContent().clientHeight;
@@ -2030,7 +2106,7 @@ var TreeGrid = /** @class */ (function (_super) {
         var Columns = this.initialRender ? this.grid.columns : this.columns;
         var columnModel = 'columnModel';
         if (this.grid.columns.length !== this.columnModel.length) {
-            Columns = this.grid[columnModel];
+            Columns = this.grid["" + columnModel];
         }
         return iterateArrayOrObject(Columns, function (item) {
             if (item.uid === uid) {
@@ -2123,7 +2199,7 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.getVirtualColIndexByUid = function (uid) {
         var columnModel = 'columnModel';
-        var index = iterateArrayOrObject(this.grid[columnModel], function (item, index) {
+        var index = iterateArrayOrObject(this.grid["" + columnModel], function (item, index) {
             if (item.uid === uid) {
                 return index;
             }
@@ -2164,25 +2240,25 @@ var TreeGrid = /** @class */ (function (_super) {
             this.columnModel = [];
             for (var i = 0; i < gridColumns.length; i++) {
                 gridColumn = {};
-                for (var _i = 0, _a = Object.keys(gridColumns[i]); _i < _a.length; _i++) {
+                for (var _i = 0, _a = Object.keys(gridColumns[parseInt(i.toString(), 10)]); _i < _a.length; _i++) {
                     var prop = _a[_i];
-                    gridColumn[prop] = gridColumns[i][prop];
+                    gridColumn["" + prop] = gridColumns[parseInt(i.toString(), 10)]["" + prop];
                 }
                 this.columnModel.push(new Column(gridColumn));
-                if (field === this.columnModel[i].field && this.columnModel[i].type !== 'checkbox' && (!isNullOrUndefined(temp) && temp !== '')) {
-                    this.columnModel[i].template = temp;
+                if (field === this.columnModel[parseInt(i.toString(), 10)].field && this.columnModel[parseInt(i.toString(), 10)].type !== 'checkbox' && (!isNullOrUndefined(temp) && temp !== '')) {
+                    this.columnModel[parseInt(i.toString(), 10)].template = temp;
                 }
             }
         }
-        var merge = 'deepMerge';
-        this[merge] = ['columns']; // Workaround for blazor updateModel
+        var deepMerge = 'deepMerge';
+        this["" + deepMerge] = ['columns']; // Workaround for blazor updateModel
         if (this.grid.columns.length !== this.columnModel.length) {
             this.stackedHeader = true;
         }
         if (!this.stackedHeader) {
-            this.setProperties({ columns: this.columnModel }, true);
+            merge(this.columns, this.columnModel);
         }
-        this[merge] = undefined; // Workaround for blazor updateModel
+        this["" + deepMerge] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     };
     /**
@@ -2195,11 +2271,11 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.mergePersistTreeGridData = function () {
         var persist1 = 'mergePersistGridData';
-        this.grid[persist1].apply(this);
+        this.grid["" + persist1].apply(this);
     };
     TreeGrid.prototype.mergeColumns = function (storedColumn, columns) {
         var persist2 = 'mergeColumns';
-        this.grid[persist2].apply(this, [storedColumn, columns]);
+        this.grid["" + persist2].apply(this, [storedColumn, columns]);
     };
     TreeGrid.prototype.updateTreeGridModel = function () {
         this.setProperties({ filterSettings: getObject('properties', this.grid.filterSettings) }, true);
@@ -2224,8 +2300,8 @@ var TreeGrid = /** @class */ (function (_super) {
         var dRows = [];
         var rows = this.grid.getDataRows();
         for (var i = 0, len = rows.length; i < len; i++) {
-            if (!rows[i].classList.contains('e-summaryrow')) {
-                dRows.push(rows[i]);
+            if (!rows[parseInt(i.toString(), 10)].classList.contains('e-summaryrow')) {
+                dRows.push(rows[parseInt(i.toString(), 10)]);
             }
         }
         return dRows;
@@ -2361,9 +2437,9 @@ var TreeGrid = /** @class */ (function (_super) {
         var currentViewRecords = this.getCurrentViewRecords();
         if (!this.allowPaging) {
             for (var i = 0; i < currentViewRecords.length; i++) {
-                visibleRecords.push(currentViewRecords[i]);
-                if (!currentViewRecords[i].expanded) {
-                    i += findChildrenRecords(currentViewRecords[i]).length;
+                visibleRecords.push(currentViewRecords[parseInt(i.toString(), 10)]);
+                if (!currentViewRecords[parseInt(i.toString(), 10)].expanded) {
+                    i += findChildrenRecords(currentViewRecords[parseInt(i.toString(), 10)]).length;
                 }
             }
         }
@@ -2423,10 +2499,10 @@ var TreeGrid = /** @class */ (function (_super) {
         if (this.editSettings.mode === 'Batch') {
             var obj = 'dialogObj';
             var showDialog = 'showDialog';
-            if (this.getBatchChanges()[this.changedRecords].length ||
-                this.getBatchChanges()[this.deletedRecords].length || this.getBatchChanges()[this.addedRecords].length) {
-                var dialogObj = this.grid.editModule[obj];
-                this.grid.editModule[showDialog]('CancelEdit', dialogObj);
+            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
+                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+                var dialogObj = this.grid.editModule["" + obj];
+                this.grid.editModule["" + showDialog]('CancelEdit', dialogObj);
                 this.targetElement = target;
                 return;
             }
@@ -2442,16 +2518,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);
             }
         }
     };
@@ -2478,7 +2558,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     _this.expandCollapseAllChildren(record, 'expand', key, level);
                 }
                 var children = 'Children';
-                if (!(isRemoteData(_this) && !isOffline(_this)) && (!isCountRequired(_this) || !isNullOrUndefined(record[children]))) {
+                if (!(isRemoteData(_this) && !isOffline(_this)) && (!isCountRequired(_this) || !isNullOrUndefined(record["" + children]))) {
                     var collapseArgs = { data: record, row: row };
                     _this.setHeightForFrozenContent();
                     if (!isNullOrUndefined(_this.expandStateMapping)) {
@@ -2499,7 +2579,7 @@ var TreeGrid = /** @class */ (function (_super) {
         });
         records.unshift(record);
         for (var i = 0; i < records.length; i++) {
-            this.expandCollapse(action, null, records[i]);
+            this.expandCollapse(action, null, records[parseInt(i.toString(), 10)]);
         }
     };
     TreeGrid.prototype.setHeightForFrozenContent = function () {
@@ -2517,10 +2597,10 @@ var TreeGrid = /** @class */ (function (_super) {
         }
         else if (isNullOrUndefined(record)) {
             if (this.detailTemplate) {
-                record = this.grid.getCurrentViewRecords()[row.getAttribute('aria-rowindex')];
+                record = this.grid.getCurrentViewRecords()[row.getAttribute('data-rowindex')];
             }
             else {
-                record = this.grid.getCurrentViewRecords()[row.rowIndex];
+                record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('data-rowindex'), 10)];
             }
         }
         return record;
@@ -2565,12 +2645,12 @@ var TreeGrid = /** @class */ (function (_super) {
         var totalRecords = record;
         if (totalRecords.length) {
             for (var i = 0; i < totalRecords.length; i++) {
-                totalRecords[i][this.expandStateMapping] = state;
-                editAction({ value: totalRecords[i], action: 'edit' }, this, this.isSelfReference, totalRecords[i].index, this.grid.selectedRowIndex, this.expandStateMapping);
+                totalRecords[parseInt(i.toString(), 10)][this.expandStateMapping] = state;
+                editAction({ value: totalRecords[parseInt(i.toString(), 10)], action: 'edit' }, this, this.isSelfReference, totalRecords[parseInt(i.toString(), 10)].index, this.grid.selectedRowIndex, this.expandStateMapping);
             }
         }
         else {
-            record[this.expandStateMapping] = state;
+            record["" + this.expandStateMapping] = state;
             editAction({ value: record, action: 'edit' }, this, this.isSelfReference, record.index, this.grid.selectedRowIndex, this.expandStateMapping);
         }
     };
@@ -2608,8 +2688,8 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.expandAction = function (record, key, level, isPaging) {
         if (isPaging === void 0) { isPaging = false; }
         var _loop_1 = function (i) {
-            if (!isNullOrUndefined(record[i].parentItem)) {
-                var puniqueID_1 = record[i].parentItem.uniqueID;
+            if (!isNullOrUndefined(record[parseInt(i.toString(), 10)].parentItem)) {
+                var puniqueID_1 = record[parseInt(i.toString(), 10)].parentItem.uniqueID;
                 var parentItem = this_1.flatData.filter(function (e) {
                     return e.uniqueID === puniqueID_1;
                 });
@@ -2631,7 +2711,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
             }
             if (!isPaging) {
-                this_1.expandRow(null, record[i], key, level);
+                this_1.expandRow(null, record[parseInt(i.toString(), 10)], key, level);
             }
         };
         var this_1 = this;
@@ -2689,7 +2769,7 @@ var TreeGrid = /** @class */ (function (_super) {
         var dataSource = isRemoteData(this) ? this.getCurrentViewRecords() : this.grid.dataSource;
         if (!isNullOrUndefined(primaryKeyField)) {
             var rec = dataSource.filter(function (e) {
-                return e[primaryKeyField].toString() === key.toString();
+                return e["" + primaryKeyField].toString() === key.toString();
             });
             if (action === 'Expand') {
                 this.expandAction(rec, key, null);
@@ -2706,14 +2786,14 @@ var TreeGrid = /** @class */ (function (_super) {
         }
         else {
             for (var i = 0; i < record.length; i++) {
-                this.collapseRow(null, record[i], key);
+                this.collapseRow(null, record[parseInt(i.toString(), 10)], key);
             }
         }
         if (!this.grid.contentModule.isDataSourceChanged && this.enableVirtualization && this.getRows()
             && this.parentData.length === this.getRows().length) {
             var endIndex = 'endIndex';
             this.grid.contentModule.startIndex = -1;
-            this.grid.contentModule[endIndex] = -1;
+            this.grid.contentModule["" + endIndex] = -1;
         }
     };
     /**
@@ -2748,11 +2828,13 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
             });
             if (rows.length) {
-                if (action === 'collapse') {
-                    this.collapseRow(rows[0]);
-                }
-                else {
-                    this.expandRow(rows[0]);
+                for (var i = 0; i < rows.length; i++) {
+                    if (action === 'collapse') {
+                        this.collapseRow(rows[parseInt(i.toString(), 10)]);
+                    }
+                    else {
+                        this.expandRow(rows[parseInt(i.toString(), 10)]);
+                    }
                 }
             }
             else if (this.allowPaging) {
@@ -2765,10 +2847,10 @@ var TreeGrid = /** @class */ (function (_super) {
         else {
             for (var i = 0; i < rows.length; i++) {
                 if (action === 'collapse') {
-                    this.collapseRow(rows[i]);
+                    this.collapseRow(rows[parseInt(i.toString(), 10)]);
                 }
                 else {
-                    this.expandRow(rows[i]);
+                    this.expandRow(rows[parseInt(i.toString(), 10)]);
                 }
             }
         }
@@ -2781,7 +2863,7 @@ var TreeGrid = /** @class */ (function (_super) {
             return e.parentUniqueID === record.uniqueID;
         });
         var targetEle;
-        if (!isRemoteData(this) && action === 'expand' && this.isSelfReference && isCountRequired(this) && !childRecords.length) {
+        if ((!isRemoteData(this) && action === 'expand' && this.isSelfReference && isCountRequired(this) && !childRecords.length) || (action === 'collapse' || (this.isExpandAll && this.loadChildOnDemand) && !isRemoteData(this) && this.isSelfReference && isCountRequired(this))) {
             this.updateChildOnDemand(expandingArgs);
         }
         var gridRows = this.getRows();
@@ -2792,10 +2874,10 @@ var TreeGrid = /** @class */ (function (_super) {
         var rowIndex;
         if (isNullOrUndefined(row)) {
             rowIndex = this.getCurrentViewRecords().indexOf(record);
-            row = gridRows[rowIndex];
+            row = gridRows[parseInt(rowIndex.toString(), 10)];
         }
         else {
-            rowIndex = +row.getAttribute('aria-rowindex');
+            rowIndex = +row.getAttribute('data-rowindex');
         }
         if (!isNullOrUndefined(row)) {
             row.setAttribute('aria-expanded', action === 'expand' ? 'true' : 'false');
@@ -2848,6 +2930,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
                 removeClass([targetEle], 'e-treegridexpand');
             }
+            row.querySelectorAll('.e-treerowcell')[0].setAttribute('aria-expanded', action === 'expand' ? 'true' : 'false');
             var detailrows = gridRows.filter(function (r) {
                 return r.classList.contains('e-griddetailrowindex' + record.index + 'level' + (record.level + 1));
             });
@@ -2859,16 +2942,20 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.localExpand(action, row, record);
                 }
             }
+            if (!isNullOrUndefined(targetEle) && targetEle.closest('.e-treerowcell').classList.contains('e-cellselectionbackground')) {
+                targetEle.closest('.e-treerowcell').classList.remove('e-cellselectionbackground');
+                targetEle.closest('.e-treerowcell').removeAttribute('aria-selected');
+            }
             if (this.isPixelHeight() && !row.cells[0].classList.contains('e-lastrowcell')) {
                 var totalRows = this.getRows();
                 var rows = this.getContentTable().rows;
                 totalRows = [].slice.call(rows);
                 for (var i = totalRows.length - 1; i >= 0; i--) {
-                    if (!isHidden(totalRows[i])) {
+                    if (!isHidden(totalRows[parseInt(i.toString(), 10)])) {
                         var table = this.getContentTable();
                         var sHeight = table.scrollHeight;
                         var clientHeight = this.getContent().clientHeight;
-                        this.lastRowBorder(totalRows[i], sHeight <= clientHeight);
+                        this.lastRowBorder(totalRows[parseInt(i.toString(), 10)], sHeight <= clientHeight);
                         break;
                     }
                 }
@@ -2879,17 +2966,34 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.updateChildOnDemand = function (expandingArgs) {
         var _this = this;
+        if (expandingArgs.requestType === 'collapse' && isCountRequired(this)) {
+            var flatDataRecords = this.flatData.slice();
+            for (var i = 0; i < flatDataRecords.length; i++) {
+                if (flatDataRecords[parseInt(i.toString(), 10)]['parentUniqueID'] === expandingArgs.data['uniqueID']) {
+                    flatDataRecords.splice(i, 1);
+                    i = i - 1;
+                }
+            }
+            this.dataResults.result = flatDataRecords;
+            return;
+        }
         var deff = new Deferred();
         var childDataBind = 'childDataBind';
-        expandingArgs[childDataBind] = deff.resolve;
+        expandingArgs["" + childDataBind] = deff.resolve;
         var record = expandingArgs.data;
         this.trigger(events.dataStateChange, expandingArgs);
         deff.promise.then(function () {
             if (expandingArgs.childData.length) {
+                if (isCountRequired(_this)) {
+                    _this.flatData = _this.dataResults.result;
+                }
+                if (_this.enableInfiniteScrolling && isCountRequired(_this)) {
+                    _this.flatData = _this.infiniteScrollData;
+                }
                 var currentData = (_this.flatData);
                 var index = 0;
                 for (var i = 0; i < currentData.length; i++) {
-                    if (currentData[i].taskData === record.taskData) {
+                    if (currentData[parseInt(i.toString(), 10)].taskData === record.taskData) {
                         index = i;
                         break;
                     }
@@ -2906,42 +3010,57 @@ var TreeGrid = /** @class */ (function (_super) {
                             }
                         });
                     }
-                    if (childData[i]) {
-                        childData[i].level = record.level + 1;
-                        childData[i].index = Math.ceil(Math.random() * 1000);
-                        childData[i].parentItem = extend({}, record);
-                        childData[i].taskData = extend({}, childData[i]);
-                        delete childData[i].parentItem.childRecords;
-                        delete childData[i].taskData.parentItem;
-                        childData[i].parentUniqueID = record.uniqueID;
-                        childData[i].uniqueID = getUid(_this.element.id + '_data_');
-                        setValue('uniqueIDCollection.' + childData[i].uniqueID, childData[i], _this);
-                        if (!isNullOrUndefined(childData[i][_this.childMapping]) ||
-                            (childData[i][_this.hasChildMapping] && isCountRequired(_this))) {
-                            childData[i].hasChildRecords = true;
+                    if (childData[parseInt(i.toString(), 10)]) {
+                        childData[parseInt(i.toString(), 10)].level = record.level + 1;
+                        childData[parseInt(i.toString(), 10)].index = Math.ceil(Math.random() * 1000);
+                        childData[parseInt(i.toString(), 10)].parentItem = extend({}, record);
+                        childData[parseInt(i.toString(), 10)].taskData = extend({}, childData[parseInt(i.toString(), 10)]);
+                        delete childData[parseInt(i.toString(), 10)].parentItem.childRecords;
+                        delete childData[parseInt(i.toString(), 10)].taskData.parentItem;
+                        childData[parseInt(i.toString(), 10)].parentUniqueID = record.uniqueID;
+                        childData[parseInt(i.toString(), 10)].uniqueID = getUid(_this.element.id + '_data_');
+                        setValue('uniqueIDCollection.' + childData[parseInt(i.toString(), 10)].uniqueID, childData[parseInt(i.toString(), 10)], _this);
+                        if (!isNullOrUndefined(childData[parseInt(i.toString(), 10)][_this.childMapping]) ||
+                            (childData[parseInt(i.toString(), 10)][_this.hasChildMapping] && isCountRequired(_this))) {
+                            childData[parseInt(i.toString(), 10)].hasChildRecords = true;
+                        }
+                        if (isCountRequired(_this) && record[_this.childMapping] && record[_this.childMapping][parseInt(i.toString(), 10)]) {
+                            currentData.splice(index + 1 + i, 0, childData[parseInt(i.toString(), 10)]);
+                        }
+                        else {
+                            currentData.splice(index + 1 + i, record[_this.childMapping] &&
+                                record[_this.childMapping][parseInt(i.toString(), 10)] ? 1 : 0, childData[parseInt(i.toString(), 10)]);
                         }
-                        currentData.splice(index + 1 + i, record[_this.childMapping] && record[_this.childMapping][i] ? 1 : 0, childData[i]);
                     }
                     else {
                         currentData.splice(index + 1 + i, 1);
                     }
                 }
-                currentData[index][_this.childMapping] = childData;
-                currentData[index].childRecords = childData;
-                currentData[index].expanded = true;
-                setValue('uniqueIDCollection.' + currentData[index].uniqueID, currentData[index], _this);
+                currentData[parseInt(index.toString(), 10)]["" + _this.childMapping] = childData;
+                currentData[parseInt(index.toString(), 10)].childRecords = childData;
+                currentData[parseInt(index.toString(), 10)].expanded = true;
+                setValue('uniqueIDCollection.' + currentData[parseInt(index.toString(), 10)].uniqueID, currentData[parseInt(index.toString(), 10)], _this);
                 for (var j = 0; j < expandingArgs.childData.length; j++) {
-                    data_1.push(expandingArgs.childData[j]);
+                    data_1.push(expandingArgs.childData[parseInt(j.toString(), 10)]);
                 }
             }
+            if (isCountRequired(_this) && _this.loadChildOnDemand && expandingArgs.requestType === 'expand') {
+                _this.dataResults['expandRecord'] = {};
+                _this.dataResults['expandRecord'] = expandingArgs.data;
+            }
             _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);
         });
     };
     TreeGrid.prototype.remoteExpand = function (action, row, record) {
         var gridRows = this.getRows();
+        var fetchRemoteChildData = 'fetchRemoteChildData';
         if (this.rowTemplate) {
             var rows_1 = this.getContentTable().rows;
             gridRows = [].slice.call(rows_1);
@@ -2949,7 +3068,7 @@ var TreeGrid = /** @class */ (function (_super) {
         var args = { data: record, row: row };
         var rows = [];
         rows = gridRows.filter(function (r) {
-            return r.querySelector('.e-gridrowindex' + record.index + 'level' + (record.level + 1));
+            return ((r.querySelector('.e-gridrowindex' + record.index + 'level' + (record.level + 1))) || (r.querySelector('.e-gridrowindex' + record.index + 'level0' + '.e-summarycell')));
         });
         if (action === 'expand') {
             this.notify(events.remoteExpand, { record: record, rows: rows, parentRow: row });
@@ -2959,6 +3078,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 this.trigger(events.expanded, args_1);
             }
         }
+        else if (action === 'collapse' && this.enableVirtualization) {
+            this.dataModule["" + fetchRemoteChildData]({ action: action, record: args.data, rows: null, parentRow: args.row });
+        }
         else {
             this.collapseRemoteChild({ record: record, rows: rows });
             this.setHeightForFrozenContent();
@@ -2985,8 +3107,8 @@ var TreeGrid = /** @class */ (function (_super) {
         if (this.enableImmutableMode && !this.allowPaging) {
             rows = [];
             for (var i = 0; i < childRecords.length; i++) {
-                var rowIndex = this.grid.getRowIndexByPrimaryKey(childRecords[i][primaryKeyField]);
-                rows.push(this.getRows()[rowIndex]);
+                var rowIndex = this.grid.getRowIndexByPrimaryKey(childRecords[parseInt(i.toString(), 10)]["" + primaryKeyField]);
+                rows.push(this.getRows()[parseInt(rowIndex.toString(), 10)]);
             }
         }
         else {
@@ -3005,31 +3127,65 @@ var TreeGrid = /** @class */ (function (_super) {
                 return r.querySelector('.e-gridrowindex' + record.index + 'level' + (record.level + 1));
             });
         }
+        var gridRowsObject = this.grid.getRowsObject();
+        var currentViewData = this.getCurrentViewRecords();
+        var currentRecord = currentViewData.filter(function (e) {
+            return e.uniqueID === record.uniqueID;
+        });
+        var currentIndex = currentViewData.indexOf(currentRecord[0]);
+        if (!isNullOrUndefined(gridRowsObject[parseInt(currentIndex.toString(), 10)].visible) &&
+            gridRowsObject[parseInt(currentIndex.toString(), 10)].visible !== false) {
+            gridRowsObject[parseInt(currentIndex.toString(), 10)].visible = true;
+        }
+        var detailrows = gridRows.filter(function (r) {
+            return r.classList.contains('e-griddetailrowindex' + record.index + 'level' + (record.level + 1));
+        });
         for (var i = 0; i < rows.length; i++) {
-            if (!isNullOrUndefined(rows[i])) {
-                rows[i].style.display = displayAction;
+            if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)])) {
+                rows[parseInt(i.toString(), 10)].style.display = displayAction;
+            }
+            if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
+                || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
+                gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
+                var parentRecord = currentViewData.filter(function (e) {
+                    return e.uniqueID === currentRecord[0].parentUniqueID;
+                });
+                if (!isNullOrUndefined(parentRecord[0]) && gridRows[currentViewData.indexOf(parentRecord[0])].getElementsByClassName('e-treegridcollapse').length) {
+                    gridRowsObject[parseInt(currentIndex.toString(), 10)].visible = false;
+                }
             }
             if (!isNullOrUndefined(movableRows)) {
-                movableRows[i].style.display = displayAction;
+                movableRows[parseInt(i.toString(), 10)].style.display = displayAction;
             }
             if (!isNullOrUndefined(freezeRightRows)) {
-                freezeRightRows[i].style.display = displayAction;
+                freezeRightRows[parseInt(i.toString(), 10)].style.display = displayAction;
             }
-            this.notify('childRowExpand', { row: rows[i] });
-            if ((!isNullOrUndefined(childRecords[i].childRecords) && childRecords[i].childRecords.length > 0) && (action !== 'expand' ||
-                isNullOrUndefined(childRecords[i].expanded) || childRecords[i].expanded)) {
-                this.expandCollapse(action, rows[i], childRecords[i], true);
+            this.notify('childRowExpand', { row: rows[parseInt(i.toString(), 10)] });
+            if ((!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
+                isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].expanded) || childRecords[parseInt(i.toString(), 10)].expanded)) {
+                this.expandCollapse(action, rows[parseInt(i.toString(), 10)], childRecords[parseInt(i.toString(), 10)], true);
                 if (this.frozenColumns <= this.treeColumnIndex && !isNullOrUndefined(movableRows)) {
-                    this.expandCollapse(action, movableRows[i], childRecords[i], true);
+                    this.expandCollapse(action, movableRows[parseInt(i.toString(), 10)], childRecords[parseInt(i.toString(), 10)], true);
                 }
             }
         }
+        for (var i = 0; i < detailrows.length; i++) {
+            if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
+                || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
+                gridRowsObject[detailrows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
+                detailrows[parseInt(i.toString(), 10)].style.display = displayAction;
+            }
+        }
+        if (!this.allowPaging && !(this.enableVirtualization || this.enableInfiniteScrolling || isRemoteData(this)
+            || isCountRequired(this))) {
+            this.grid.notify('refresh-Expand-and-Collapse', { rows: this.grid.getRowsObject() });
+        }
     };
     TreeGrid.prototype.updateAltRow = function (rows) {
         if (this.enableAltRow && !this.rowTemplate) {
             var visibleRowCount = 0;
             for (var i = 0; rows && i < rows.length; i++) {
-                var gridRow = rows[i];
+                var gridRow = rows[parseInt(i.toString(), 10)];
                 if (gridRow.style.display !== 'none') {
                     if (gridRow.classList.contains('e-altrow')) {
                         removeClass([gridRow], 'e-altrow');
@@ -3049,9 +3205,10 @@ var TreeGrid = /** @class */ (function (_super) {
             var rows = this.getContentTable().rows;
             rows = [].slice.call(rows);
             for (var i = 0; i < rows.length; i++) {
-                var rcell = this.grid.getContentTable().rows[i].cells[this.treeColumnIndex];
-                var row = rows[i];
-                var rowData = this.grid.getRowsObject()[i].data;
+                var rcell = this.grid.getContentTable().rows[parseInt(i.toString(), 10)]
+                    .cells[this.treeColumnIndex];
+                var row = rows[parseInt(i.toString(), 10)];
+                var rowData = this.grid.getRowsObject()[parseInt(i.toString(), 10)].data;
                 var arg = { data: rowData, row: row, cell: rcell, column: this.getColumns()[this.treeColumnIndex] };
                 this.renderModule.cellRender(arg);
             }
@@ -3076,28 +3233,28 @@ var TreeGrid = /** @class */ (function (_super) {
             });
         }
         for (var i = 0; i < rows.length; i++) {
-            rows[i].style.display = 'none';
-            row = rows[i];
-            var collapsingTd = rows[i].querySelector('.e-detailrowexpand');
+            rows[parseInt(i.toString(), 10)].style.display = 'none';
+            row = rows[parseInt(i.toString(), 10)];
+            var collapsingTd = rows[parseInt(i.toString(), 10)].querySelector('.e-detailrowexpand');
             if (!isNullOrUndefined(collapsingTd)) {
                 this.grid.detailRowModule.collapse(collapsingTd);
             }
             if (freeze) {
-                movablerows[i].style.display = 'none';
-                rightrows[i].style.display = 'none';
-                if (!rows[i].querySelector('.e-treecolumn-container .e-treegridexpand')) {
-                    if (movablerows[i].querySelector('.e-treecolumn-container .e-treegridexpand')) {
-                        row = movablerows[i];
+                movablerows[parseInt(i.toString(), 10)].style.display = 'none';
+                rightrows[parseInt(i.toString(), 10)].style.display = 'none';
+                if (!rows[parseInt(i.toString(), 10)].querySelector('.e-treecolumn-container .e-treegridexpand')) {
+                    if (movablerows[parseInt(i.toString(), 10)].querySelector('.e-treecolumn-container .e-treegridexpand')) {
+                        row = movablerows[parseInt(i.toString(), 10)];
                     }
-                    else if (rightrows[i].querySelector('.e-treecolumn-container .e-treegridexpand')) {
-                        row = rightrows[i];
+                    else if (rightrows[parseInt(i.toString(), 10)].querySelector('.e-treecolumn-container .e-treegridexpand')) {
+                        row = rightrows[parseInt(i.toString(), 10)];
                     }
                 }
             }
             if (row.querySelector('.e-treecolumn-container .e-treegridexpand')) {
                 var expandElement = row.querySelector('.e-treecolumn-container .e-treegridexpand');
-                childRecord = this.rowTemplate ? this.grid.getCurrentViewRecords()[rows[i].rowIndex] :
-                    this.grid.getRowObjectFromUID(rows[i].getAttribute('data-Uid')).data;
+                childRecord = this.rowTemplate ? this.grid.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex] :
+                    this.grid.getRowObjectFromUID(rows[parseInt(i.toString(), 10)].getAttribute('data-Uid')).data;
                 if (!isNullOrUndefined(expandElement) && childRecord.expanded) {
                     removeClass([expandElement], 'e-treegridexpand');
                     addClass([expandElement], 'e-treegridcollapse');
@@ -3105,8 +3262,8 @@ var TreeGrid = /** @class */ (function (_super) {
                 var cRow = [];
                 var eRows = this.getRows();
                 for (var i_1 = 0; i_1 < eRows.length; i_1++) {
-                    if (eRows[i_1].querySelector('.e-gridrowindex' + childRecord.index + 'level' + (childRecord.level + 1))) {
-                        cRow.push(eRows[i_1]);
+                    if (eRows[parseInt(i_1.toString(), 10)].querySelector('.e-gridrowindex' + childRecord.index + 'level' + (childRecord.level + 1))) {
+                        cRow.push(eRows[parseInt(i_1.toString(), 10)]);
                     }
                 }
                 if (cRow.length && childRecord.expanded) {
@@ -3126,13 +3283,13 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.updateRowAndCellElements = function (records, rows, index) {
         for (var i = 0; i < records.length; i++) {
             this.renderModule.cellRender({
-                data: records[i], cell: rows[i].cells[index],
+                data: records[parseInt(i.toString(), 10)], cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)],
                 column: this.grid.getColumns()[this.treeColumnIndex],
                 requestType: 'rowDragAndDrop'
             });
             if (this['action'] === 'indenting' || this['action'] === 'outdenting') {
                 this.renderModule.RowModifier({
-                    data: records[i], row: rows[i]
+                    data: records[parseInt(i.toString(), 10)], row: rows[parseInt(i.toString(), 10)]
                 });
             }
         }
@@ -3435,11 +3592,11 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.getFrozenCount = function (cols, cnt) {
         for (var j = 0, len = cols.length; j < len; j++) {
-            if (cols[j].columns) {
-                cnt = this.getFrozenCount(cols[j].columns, cnt);
+            if (cols[parseInt(j.toString(), 10)].columns) {
+                cnt = this.getFrozenCount(cols[parseInt(j.toString(), 10)].columns, cnt);
             }
             else {
-                if (cols[j].isFrozen) {
+                if (cols[parseInt(j.toString(), 10)].isFrozen) {
                     cnt++;
                 }
             }
@@ -3674,6 +3831,12 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property('auto')
     ], TreeGrid.prototype, "width", void 0);
+    __decorate([
+        Complex({}, LoadingIndicator)
+    ], TreeGrid.prototype, "loadingIndicator", void 0);
+    __decorate([
+        Property(true)
+    ], TreeGrid.prototype, "enableVirtualMaskRow", void 0);
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableVirtualization", void 0);