@syncfusion/ej2-treegrid 19.3.45 → 19.3.53

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.45
+*  version : 19.3.53
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@19.3.44",
+  "_id": "@syncfusion/ej2-treegrid@19.3.47",
   "_inBundle": false,
-  "_integrity": "sha512-uy3Okez3Wq7Xp1v9znGLXpc/bQMjSXzQNktNVfYxJvcXPgh7GKbKdIDhuzIE3b8R6p2i8zmYyDGrepiraR9oZw==",
+  "_integrity": "sha512-1qAa8qD3pixiqbAaV3Iqu5V6+3NzXa8G+EHL6QLhJF0fo/Fgj4DOuEUXSnQCy602s3YVzqSSPSAboKUvBNe4gg==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.3.44.tgz",
-  "_shasum": "ab8aa46930d22cb52cf4776a2233044b8169d9f7",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.3.47.tgz",
+  "_shasum": "9d3509b03b5ef89e7c2517ecea267f4908255bb6",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-data": "~19.3.44",
-    "@syncfusion/ej2-grids": "~19.3.45",
-    "@syncfusion/ej2-popups": "~19.3.43"
+    "@syncfusion/ej2-base": "~19.3.53",
+    "@syncfusion/ej2-data": "~19.3.53",
+    "@syncfusion/ej2-grids": "~19.3.53",
+    "@syncfusion/ej2-popups": "~19.3.53"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -60,6 +60,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.45",
+  "version": "19.3.53",
   "sideEffects": false
 }

package/src/treegrid/actions/batch-edit.js

@@ -111,10 +111,11 @@ var BatchEdit = /** @class */ (function () {
         if (frozenCols && args.columnObject.index > frozenCols) {
             actualCellIndex = actualCellIndex + frozenCols;
         }
-        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
         if (freeze) {
             var colCount = this.parent.getFrozenLeftColumnsCount() + actualCellIndex;
-            if (colCount == this.parent.treeColumnIndex) {
+            if (colCount === this.parent.treeColumnIndex) {
                 this.parent.renderModule.cellRender({ data: args.rowData, cell: args.cell,
                     column: this.parent.grid.getColumnByIndex(args.cell.cellIndex)
                 });
@@ -276,7 +277,7 @@ var BatchEdit = /** @class */ (function () {
             focusModule.getContent().matrix.current = [actualIndex, focusModule.getContent().matrix.current[1]];
         }
     };
-    BatchEdit.prototype.beforeBatchDelete = function () {
+    BatchEdit.prototype.beforeBatchDelete = function (args) {
         if (!this.batchRecords.length) {
             this.batchRecords = extendArray(this.parent.grid.getCurrentViewRecords());
             this.currentViewRecords = extendArray(this.parent.grid.getCurrentViewRecords());
@@ -286,9 +287,19 @@ var BatchEdit = /** @class */ (function () {
         var row = [];
         var records = [];
         var primarykey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        var data = this.parent.grid.getSelectedRecords()[this.parent.grid.getSelectedRecords().length - 1];
-        var childs = findChildrenRecords(data);
-        var uid = this.parent.getSelectedRows()[0].getAttribute('data-uid');
+        var data;
+        var childs;
+        var uid;
+        if (!isNullOrUndefined(args.row) && this.parent.getSelectedRows().indexOf(args.row) === -1) {
+            data = args.rowData;
+            childs = findChildrenRecords(data);
+            uid = args.row.getAttribute('data-uid');
+        }
+        else {
+            data = this.parent.grid.getSelectedRecords()[this.parent.grid.getSelectedRecords().length - 1];
+            childs = findChildrenRecords(data);
+            uid = this.parent.getSelectedRows()[0].getAttribute('data-uid');
+        }
         var parentRowIndex = parseInt(this.parent.grid.getRowElementByUID(uid).getAttribute('aria-rowindex'), 10);
         if (childs.length) {
             var totalCount = parentRowIndex + childs.length;
@@ -328,7 +339,8 @@ var BatchEdit = /** @class */ (function () {
         for (var i = 0; i < rows.length; i++) {
             rows[i].setAttribute('aria-rowindex', i.toString());
         }
-        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
         if (this.parent.frozenRows || this.parent.getFrozenColumns() || this.parent.frozenColumns || freeze) {
             var mRows = this.parent.grid.getMovableDataRows();
             var freezeRightRows = this.parent.grid.getFrozenRightDataRows();

package/src/treegrid/actions/crud-actions.js

@@ -66,6 +66,7 @@ export function editAction(details, control, isSelfReference, addRowIndex, selec
                                 var childRecords = parentData ? parentData[control.childMapping] : [];
                                 for (var p = childRecords.length - 1; p >= 0; p--) {
                                     if (childRecords[p][control.idMapping] === currentData_1[control.idMapping]) {
+                                        parentData['childRecords'].splice(p, 1);
                                         childRecords.splice(p, 1);
                                         if (!childRecords.length) {
                                             parentData.hasChildRecords = false;

package/src/treegrid/actions/edit.js

@@ -260,7 +260,7 @@ var Edit = /** @class */ (function () {
         if (args.action === 'f2') {
             this.recordDoubleClick(args);
         }
-        if (args.action == 'escape') {
+        if (args.action === 'escape') {
             this.parent.closeEdit();
         }
     };
@@ -371,12 +371,13 @@ var Edit = /** @class */ (function () {
                 });
             }
             else {
-                var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+                var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+                    this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
                 if (freeze) {
-                    if (this.parent.getRows().indexOf(row_1) != -1) {
+                    if (this.parent.getRows().indexOf(row_1) !== -1) {
                         rowIndex_1 = this.parent.getRows().indexOf(row_1);
                     }
-                    else if (this.parent.getFrozenRightRows().indexOf(row_1) != -1) {
+                    else if (this.parent.getFrozenRightRows().indexOf(row_1) !== -1) {
                         rowIndex_1 = this.parent.getFrozenRightRows().indexOf(row_1);
                     }
                     else {
@@ -443,7 +444,8 @@ var Edit = /** @class */ (function () {
             this.isOnBatch = false;
         }
         this.enableToolbarItems('save');
-        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
         if (freeze) {
             if (args.cell.closest('.e-frozen-left-header') || args.cell.closest('.e-frozen-left-content')) {
                 mRow = this.parent.grid.getRows()[rowIndex];
@@ -480,7 +482,7 @@ var Edit = /** @class */ (function () {
             type: 'save', column: this.parent.getColumnByField(args.columnName), data: args.rowData,
             previousData: args.previousValue, row: row, target: args.cell
         };
-        if (this.parent.aggregates.map(function (ag) { return ag.showChildSummary == true; }).length) {
+        if (this.parent.aggregates.map(function (ag) { return ag.showChildSummary === true; }).length) {
             this.parent.grid.refresh();
         }
         this.parent.trigger(events.actionComplete, saveArgs);
@@ -522,6 +524,10 @@ var Edit = /** @class */ (function () {
                 }
             }
             setValue('uniqueIDCollection.' + data[i].uniqueID + '.index', i, this.parent);
+            var adaptor = this.parent.dataSource.adaptor;
+            if ((isRemoteData(this.parent) || adaptor instanceof RemoteSaveAdaptor)) {
+                setValue('uniqueIDCollection.' + data[i].uniqueID, data[i], this.parent);
+            }
             if (!data[i].level) {
                 this.parent.parentData.push(data[i]);
             }
@@ -641,7 +647,8 @@ var Edit = /** @class */ (function () {
                     this.parent.grid.contentModule[r].splice(0, 1);
                     this.parent.grid.contentModule[r].splice(rowObjectIndex, 0, newRowObject);
                 }
-                var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+                var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+                    this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
                 if (this.parent.frozenRows || this.parent.getFrozenColumns() || this.parent.frozenColumns || freeze) {
                     var movableRows = this.parent.getMovableDataRows();
                     var frows = 'freezeRows';

package/src/treegrid/actions/freeze-column.js

@@ -35,7 +35,8 @@ var Freeze = /** @class */ (function () {
         var frozenrows = this.parent.getRows();
         var rows;
         var frozenRightRows;
-        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 || this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+        var freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
         if (freeze) {
             frozenRightRows = this.parent.getFrozenRightRows().filter(function (e) {
                 return e.querySelector('.e-gridrowindex' + args.record.index + 'level' + (args.record.level + 1));

package/src/treegrid/actions/rowdragdrop.js

@@ -351,7 +351,8 @@ var RowDD = /** @class */ (function () {
         var bottomRowSegment = middleRowSegment + divide;
         var mouseEvent = getObject('originalEvent.event', args);
         var touchEvent = getObject('originalEvent.event', args);
-        var posy = (mouseEvent.type == "mousemove") ? mouseEvent.pageY : ((!isNullOrUndefined(touchEvent) && !isNullOrUndefined(touchEvent.changedTouches)) ? touchEvent.changedTouches[0].pageY : null);
+        var posy = (mouseEvent.type === 'mousemove') ? mouseEvent.pageY : ((!isNullOrUndefined(touchEvent) &&
+            !isNullOrUndefined(touchEvent.changedTouches)) ? touchEvent.changedTouches[0].pageY : null);
         var isTopSegment = posy <= topRowSegment;
         var isMiddleRowSegment = (posy > topRowSegment && posy <= middleRowSegment);
         var isBottomRowSegment = (posy > middleRowSegment && posy <= bottomRowSegment);
@@ -578,7 +579,7 @@ var RowDD = /** @class */ (function () {
         }
         else {
             if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID) || parentsUntil(args.target, 'e-treegrid') &&
-                parentsUntil(args.target, 'e-treegrid').id === tObj.rowDropSettings.targetID) {
+                parentsUntil(args.target, 'e-treegrid').id === tObj.rowDropSettings.targetID || args.target && document.getElementById(tObj.rowDropSettings.targetID)) {
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(events.rowDrop, args);
                 if (!args.cancel && tObj.rowDropSettings.targetID) {
@@ -905,6 +906,11 @@ var RowDD = /** @class */ (function () {
             draggedRecord.parentItem = parentItem;
             draggedRecord.parentUniqueID = droppedRecord.uniqueID;
             droppedRecord.childRecords.splice(droppedRecord.childRecords.length, 0, draggedRecord);
+            var isSelfReference = 'isSelfReference';
+            if (tObj[isSelfReference]) {
+                droppedRecord[tObj.childMapping] = [];
+                droppedRecord[tObj.childMapping].splice(droppedRecord[tObj.childMapping].length, 0, draggedRecord);
+            }
             if (!isNullOrUndefined(draggedRecord) && !tObj.parentIdMapping && !isNullOrUndefined(droppedRecord.taskData[childItem])) {
                 droppedRecord.taskData[tObj.childMapping].splice(droppedRecord.childRecords.length, 0, draggedRecord.taskData);
             }
@@ -943,7 +949,7 @@ var RowDD = /** @class */ (function () {
         }
         length = record.childRecords.length;
         for (var i = 0; i < length; i++) {
-            currentRecord = record.childRecords[i];
+            currentRecord = getValue('uniqueIDCollection.' + record.childRecords[i].uniqueID, tObj);
             count++;
             tObj.flatData.splice(count, 0, currentRecord);
             setValue('uniqueIDCollection.' + currentRecord.uniqueID, currentRecord, this.parent);
@@ -965,7 +971,7 @@ var RowDD = /** @class */ (function () {
         }
         length = record.childRecords.length;
         for (var i = 0; i < length; i++) {
-            currentRecord = record.childRecords[i];
+            currentRecord = getValue('uniqueIDCollection.' + record.childRecords[i].uniqueID, this.parent);
             var parentData = void 0;
             if (record.parentItem) {
                 parentData = getParentData(this.parent, record.parentItem.uniqueID);

package/src/treegrid/actions/selection.js

@@ -261,11 +261,11 @@ var Selection = /** @class */ (function () {
         var length = 0;
         if (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) {
             var filterResult = this.parent.filterModule.filteredResult;
-            if (this.filteredList.length == 0) {
+            if (this.filteredList.length === 0) {
                 this.filteredList = filterResult;
             }
             else {
-                if (this.filteredList != filterResult) {
+                if (this.filteredList !== filterResult) {
                     this.filteredList = filterResult;
                 }
             }
@@ -434,7 +434,12 @@ var Selection = /** @class */ (function () {
                         this.parent.getCurrentViewRecords() : this.parent.flatData;
                     childData.forEach(function (record) {
                         if (_this.parent.enableVirtualization) {
-                            record.hasChildRecords ? _this.updateParentSelection(record) : _this.updateSelectedItems(record, record.checkboxState);
+                            if (record.hasChildRecords) {
+                                _this.updateParentSelection(record);
+                            }
+                            else {
+                                _this.updateSelectedItems(record, record.checkboxState);
+                            }
                             var child = findChildrenRecords(record);
                             child = _this.getFilteredChildRecords(child);
                             for (var i = 0; i < child.length; i++) {

package/src/treegrid/actions/virtual-scroll.js

@@ -18,6 +18,7 @@ import * as events from '../base/constant';
 import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
 import { getExpandStatus } from '../utils';
 import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';
+import { VirtualHeaderRenderer } from '@syncfusion/ej2-grids';
 /**
  * TreeGrid Virtual Scroll module will handle Virtualization
  *
@@ -53,8 +54,12 @@ var VirtualScroll = /** @class */ (function () {
      * @returns {void}
      */
     VirtualScroll.prototype.addEventListener = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
         this.parent.on(events.localPagedExpandCollapse, this.collapseExpandVirtualchilds, this);
         this.parent.on(events.pagingActions, this.virtualPageAction, this);
+        this.parent.on(events.destroy, this.destroy, this);
     };
     /**
      * @hidden
@@ -66,6 +71,7 @@ var VirtualScroll = /** @class */ (function () {
         }
         this.parent.off(events.localPagedExpandCollapse, this.collapseExpandVirtualchilds);
         this.parent.off(events.pagingActions, this.virtualPageAction);
+        this.parent.off(events.destroy, this.destroy);
     };
     VirtualScroll.prototype.collapseExpandVirtualchilds = function (row) {
         this.parent.grid.notify(events.virtualActionArgs, { isExpandCollapse: true });
@@ -121,7 +127,7 @@ var VirtualScroll = /** @class */ (function () {
                 var resourceCount = this.parent.getRows();
                 var sIndex = visualData.indexOf(this.expandCollapseRec);
                 var tempdata = visualData.slice(sIndex, sIndex + resourceCount.length);
-                if (tempdata.length < resourceCount.length && sIndex >= 0) {
+                if (tempdata.length < resourceCount.length && sIndex >= 0 && startIndex !== 0) {
                     sIndex = visualData.length - resourceCount.length;
                     sIndex = sIndex > 0 ? sIndex : 0;
                     startIndex = sIndex;
@@ -134,7 +140,7 @@ var VirtualScroll = /** @class */ (function () {
                 }
             }
             //}
-            if (!isNullOrUndefined(this.expandCollapseRec) && this.parent.enableCollapseAll) {
+            if ((this.parent.enableCollapseAll || this.parent.expandStateMapping) && !isNullOrUndefined(this.expandCollapseRec)) {
                 if (pageingDetails.count < this.parent.getRows()[0].getBoundingClientRect().height) {
                     startIndex = 0;
                 }
@@ -173,8 +179,13 @@ var TreeVirtual = /** @class */ (function (_super) {
         return 'treeVirtualScroll';
     };
     TreeVirtual.prototype.instantiateRenderers = function () {
+        var parentGrid = getValue('parent', this);
         getValue('parent', this).log(['limitation', 'virtual_height'], 'virtualization');
         var renderer = getValue('locator', this).getService('rendererFactory');
+        if (parentGrid.enableColumnVirtualization) {
+            getValue('addRenderer', renderer)
+                .apply(renderer, [RenderType.Header, new VirtualHeaderRenderer(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)));

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

@@ -97,6 +97,8 @@ export declare const virtualColumnIndex: string;
 /** @hidden */
 export declare const virtualActionArgs: string;
 /** @hidden */
+export declare const destroy: string;
+/** @hidden */
 export declare const dataListener: string;
 /** @hidden */
 export declare const indexModifier: string;
@@ -124,3 +126,5 @@ export declare const rowsRemove: string;
 export declare const rowdraging: string;
 /** @hidden */
 export declare const rowDropped: string;
+/** @hidden */
+export declare const autoCol: string;

package/src/treegrid/base/constant.js

@@ -97,6 +97,8 @@ export var virtualColumnIndex = 'virtualColumnIndex';
 /** @hidden */
 export var virtualActionArgs = 'virtual-action-args';
 /** @hidden */
+export var destroy = 'destroy';
+/** @hidden */
 export var dataListener = 'data-listener';
 /** @hidden */
 export var indexModifier = 'index-modifier';
@@ -124,3 +126,5 @@ export var rowsRemove = 'rows-remove';
 export var rowdraging = 'row-draging';
 /** @hidden */
 export var rowDropped = 'row-dropped';
+/** @hidden */
+export var autoCol = 'auto-col';

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

@@ -462,6 +462,14 @@ export interface TreeGridModel extends ComponentModel{
      */
     enableVirtualization?: boolean;
 
+    /**
+     * If `enableColumnVirtualization` set to true, then the Tree Grid will render only the columns visible within the view-port
+     * and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Tree Grid.
+     *
+     * @default false
+     */
+    enableColumnVirtualization?: boolean;
+
     /**
      * If `enableInfiniteScrolling` set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end.
      * This helps to load large dataset in TreeGrid.

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

@@ -566,6 +566,13 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     enableVirtualization: boolean;
+    /**
+     * If `enableColumnVirtualization` set to true, then the Tree Grid will render only the columns visible within the view-port
+     * and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Tree Grid.
+     *
+     * @default false
+     */
+    enableColumnVirtualization: boolean;
     /**
      * If `enableInfiniteScrolling` set to true, then the data will be loaded in TreeGrid when the scrollbar reaches the end.
      * This helps to load large dataset in TreeGrid.
@@ -1491,6 +1498,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {number} - Returns column index
      */
     getColumnIndexByField(field: string): number;
+    private getVirtualColIndexByUid;
     /**
      * Gets a column index by UID.
      *

package/src/treegrid/base/treegrid.js

@@ -441,7 +441,8 @@ var TreeGrid = /** @class */ (function (_super) {
                 member: 'ExcelExport', args: [this]
             });
         }
-        if (this.frozenColumns || this.frozenRows || this.getFrozenColumns() || this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount()) {
+        if (this.frozenColumns || this.frozenRows || this.getFrozenColumns() ||
+            this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount()) {
             modules.push({
                 member: 'freeze', args: [this]
             });
@@ -662,6 +663,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.allowSorting = this.allowSorting;
         this.grid.allowFiltering = this.allowFiltering;
         this.grid.enableVirtualization = this.enableVirtualization;
+        this.grid.enableColumnVirtualization = this.enableColumnVirtualization;
         this.grid.enableInfiniteScrolling = this.enableInfiniteScrolling;
         this.grid.infiniteScrollSettings = this.infiniteScrollSettings;
         this.grid.width = this.width;
@@ -1023,6 +1025,10 @@ var TreeGrid = /** @class */ (function (_super) {
                 && (_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)) {
+                    _this.grid.renderModule.data.dataManager = _this.grid.dataSource instanceof DataManager ? _this.grid.dataSource :
+                        (isNullOrUndefined(_this.grid.dataSource) ? new DataManager() : new DataManager(_this.grid.dataSource));
+                }
             }
             var callBackPromise = new Deferred();
             _this.trigger(events.actionBegin, args, function (actionArgs) {
@@ -1048,7 +1054,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.notify(events.batchSave, args);
             }
             _this.notify('updateGridActions', args);
-            if (args.requestType === 'save' && _this.aggregates.map(function (ag) { return ag.showChildSummary == true; }).length) {
+            if (args.requestType === 'save' && _this.aggregates.map(function (ag) { return ag.showChildSummary === true; }).length) {
                 _this.grid.refresh();
             }
             _this.trigger(events.actionComplete, args);
@@ -1344,6 +1350,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 case 'enableVirtualization':
                     this.grid.enableVirtualization = this.enableVirtualization;
                     break;
+                case 'enableColumnVirtualization':
+                    this.grid.enableColumnVirtualization = this.enableColumnVirtualization;
+                    break;
                 case 'toolbar':
                     this.grid.toolbar = this.getGridToolbar();
                     break;
@@ -1567,6 +1576,11 @@ var TreeGrid = /** @class */ (function (_super) {
         if (isNullOrUndefined(this.grid)) {
             return;
         }
+        if (!isNullOrUndefined(this.rowDropSettings.targetID) &&
+            isNullOrUndefined(document.getElementById(this.grid.rowDropSettings.targetID))) {
+            document.getElementById(this.rowDropSettings.targetID).id = this.grid.rowDropSettings.targetID;
+            this.rowDropSettings.targetID = this.grid.rowDropSettings.targetID;
+        }
         _super.prototype.dataBind.call(this);
         this.grid.dataBind();
     };
@@ -1578,7 +1592,7 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.getPersistData = function () {
         var keyEntity = ['pageSettings', 'sortSettings',
-            'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex'];
+            'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex'];
         var ignoreOnPersist = {
             pageSettings: ['template', 'pageSizes', 'pageSizeMode', 'enableQueryString', 'totalRecordsCount', 'pageCount'],
             filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent', 'hierarchyMode'],
@@ -1589,9 +1603,9 @@ var TreeGrid = /** @class */ (function (_super) {
             'commandTemplate', 'commands', 'dataSource'];
         for (var i = 0; i < keyEntity.length; i++) {
             var currentObject = this[keyEntity[i]];
-            for (var _i = 0, _a = ignoreOnPersist[keyEntity[i]]; _i < _a.length; _i++) {
-                var val = _a[_i];
-                delete currentObject[val];
+            for (var k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
+                var objVal = val[k];
+                delete currentObject[objVal];
             }
         }
         this.ignoreInArrays(ignoreOnColumn, this.columns);
@@ -1994,6 +2008,16 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.getColumnIndexByField = function (field) {
         return this.grid.getColumnIndexByField(field);
     };
+    TreeGrid.prototype.getVirtualColIndexByUid = function (uid) {
+        var columnModel = 'columnModel';
+        var index = iterateArrayOrObject(this.grid[columnModel], function (item, index) {
+            if (item.uid === uid) {
+                return index;
+            }
+            return undefined;
+        })[0];
+        return !isNullOrUndefined(index) ? index : -1;
+    };
     /**
      * Gets a column index by UID.
      *
@@ -2022,18 +2046,20 @@ var TreeGrid = /** @class */ (function (_super) {
             temp = this.columnModel[this.treeColumnIndex].template;
             field = this.columnModel[this.treeColumnIndex].field;
         }
-        this.columnModel = [];
         var stackedHeader = false;
         var gridColumn;
-        for (var i = 0; i < gridColumns.length; i++) {
-            gridColumn = {};
-            for (var _i = 0, _a = Object.keys(gridColumns[i]); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                gridColumn[prop] = gridColumns[i][prop];
-            }
-            this.columnModel.push(new Column(gridColumn));
-            if (field === this.columnModel[i].field && (!isNullOrUndefined(temp) && temp !== '')) {
-                this.columnModel[i].template = temp;
+        if (!this.enableColumnVirtualization || (this.enableColumnVirtualization && this.columnModel.length === gridColumns.length)) {
+            this.columnModel = [];
+            for (var i = 0; i < gridColumns.length; i++) {
+                gridColumn = {};
+                for (var _i = 0, _a = Object.keys(gridColumns[i]); _i < _a.length; _i++) {
+                    var prop = _a[_i];
+                    gridColumn[prop] = gridColumns[i][prop];
+                }
+                this.columnModel.push(new Column(gridColumn));
+                if (field === this.columnModel[i].field && (!isNullOrUndefined(temp) && temp !== '')) {
+                    this.columnModel[i].template = temp;
+                }
             }
         }
         var merge = 'deepMerge';
@@ -2405,7 +2431,7 @@ var TreeGrid = /** @class */ (function (_super) {
             var row = getObject('rows', rec);
             var record = getObject('records', rec);
             for (var i = 0; i < record.length; i++) {
-                if (record[i].parentItem != undefined) {
+                if (record[i].parentItem !== undefined) {
                     var pindex = this.flatData[record[i].parentItem.index].index;
                     if (this.flatData[pindex].expanded === false) {
                         record.push(this.flatData[pindex]);
@@ -3370,6 +3396,9 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableVirtualization", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableColumnVirtualization", void 0);
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableInfiniteScrolling", void 0);

package/src/treegrid/renderer/render.js

@@ -96,7 +96,15 @@ var Render = /** @class */ (function () {
         else {
             index = data.index;
         }
-        if (grid.getColumnIndexByUid(args.column.uid) === this.parent.treeColumnIndex && (args.requestType === 'add' || args.requestType
+        var columnIndex;
+        var getVirtualColIndexByUid = 'getVirtualColIndexByUid';
+        if (this.parent.enableColumnVirtualization && !this.parent.initialRender) {
+            columnIndex = this.parent[getVirtualColIndexByUid](args.column.uid);
+        }
+        else {
+            columnIndex = grid.getColumnIndexByUid(args.column.uid);
+        }
+        if (columnIndex === this.parent.treeColumnIndex && (args.requestType === 'add' || args.requestType
             === 'rowDragAndDrop' || args.requestType === 'delete' || isNullOrUndefined(args.cell.querySelector('.e-treecell')))) {
             var container = createElement('div', { className: 'e-treecolumn-container' });
             var emptyExpandIcon = createElement('span', {

package/src/treegrid/renderer/virtual-row-model-generator.d.ts

@@ -10,6 +10,7 @@ export declare class TreeVirtualRowModelGenerator extends VirtualRowModelGenerat
     constructor(parent: IGrid);
     addEventListener(): void;
     private getDatas;
+    private getDataInfo;
     generateRows(data: Object[], notifyArgs?: NotifyArgs): Row<Column>[];
     checkAndResetCache(action: string): boolean;
 }

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

@@ -34,7 +34,19 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
     TreeVirtualRowModelGenerator.prototype.getDatas = function (args) {
         this.visualData = args.data;
     };
+    TreeVirtualRowModelGenerator.prototype.getDataInfo = function () {
+        return _super.prototype.getData.call(this);
+    };
     TreeVirtualRowModelGenerator.prototype.generateRows = function (data, notifyArgs) {
+        var info = this.getDataInfo();
+        if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
+            if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
+                notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
+            }
+            else {
+                notifyArgs.virtualInfo.blockIndexes = this.getBlockIndexes(notifyArgs.virtualInfo.page);
+            }
+        }
         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)) {
             return _super.prototype.generateRows.call(this, data, notifyArgs);

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

@@ -49,6 +49,7 @@ export declare class VirtualTreeContentRenderer extends VirtualContentRenderer {
     private restoreNewRow;
     private getData;
     private onActionComplete;
+    private onEnteredAction;
     scrollListeners(scrollArgs: ScrollArg): void;
     appendContent(target: HTMLElement, newChild: DocumentFragment, e: NotifyArgs): void;
     removeEventListener(): void;
@@ -58,7 +59,7 @@ export declare class TreeInterSectionObserver extends InterSectionObserver {
     private newPos;
     private lastPos;
     private timer;
-    observes(callback: Function): void;
+    observes(callback: Function, onEnterCallback: Function): void;
     private clear;
     private virtualScrollHandlers;
 }