@syncfusion/ej2-treegrid 20.3.61 → 20.4.40

package/src/treegrid/base/data.js

@@ -129,7 +129,7 @@ var DataManipulation = /** @class */ (function () {
         else {
             var keys = Object.keys(data);
             for (var i = 0; i < keys.length; i++) {
-                var tempData = data[i];
+                var tempData = data[parseInt(i.toString(), 10)];
                 this.hierarchyData.push(extend({}, tempData));
                 if (!isNullOrUndefined(tempData[this.parent.idMapping])) {
                     this.taskIds.push(tempData[this.parent.idMapping]);
@@ -141,12 +141,12 @@ var DataManipulation = /** @class */ (function () {
             var mappingData = new DataManager(this.hierarchyData).executeLocal(new Query()
                 .group(this.parent.parentIdMapping));
             for (var i = 0; i < mappingData.length; i++) {
-                var groupData = mappingData[i];
+                var groupData = mappingData[parseInt(i.toString(), 10)];
                 var index = this.taskIds.indexOf(groupData.key);
                 if (!isNullOrUndefined(groupData.key)) {
                     if (index > -1) {
                         var childData = (groupData.items);
-                        this.hierarchyData[index][this.parent.childMapping] = childData;
+                        this.hierarchyData[parseInt(index.toString(), 10)][this.parent.childMapping] = childData;
                         continue;
                     }
                 }
@@ -156,7 +156,7 @@ var DataManipulation = /** @class */ (function () {
         }
         if (!Object.keys(this.hierarchyData).length) {
             var isGantt = 'isGantt';
-            var referenceData = !(this.parent.dataSource instanceof DataManager) && this.parent[isGantt];
+            var referenceData = !(this.parent.dataSource instanceof DataManager) && this.parent["" + isGantt];
             this.parent.flatData = referenceData ? (this.parent.dataSource) : [];
         }
         else {
@@ -196,7 +196,14 @@ var DataManipulation = /** @class */ (function () {
      * @returns {void}
      */
     DataManipulation.prototype.updateParentRemoteData = function (args) {
+        var actionArgs = 'actionArgs';
+        if (isRemoteData(this.parent) && this.parent.enableVirtualization && args["" + actionArgs].requestType === 'virtualscroll') {
+            this.parent.hideSpinner();
+        }
         var records = args.result;
+        if (isRemoteData(this.parent) && this.parent.enableVirtualization && (args["" + actionArgs].requestType === 'virtualscroll' || args["" + actionArgs].action === 'clearFilter' || args["" + actionArgs].searchString === '')) {
+            this.parent.query.expands = [];
+        }
         if (!this.parent.hasChildMapping && !this.parentItems.length &&
             (!this.parent.loadChildOnDemand)) {
             this.zerothLevelData = args;
@@ -204,31 +211,72 @@ var DataManipulation = /** @class */ (function () {
         }
         else {
             if (!this.parent.loadChildOnDemand) {
-                for (var rec = 0; rec < records.length; rec++) {
-                    if (isCountRequired(this.parent) && records[rec].hasChildRecords && this.parent.initialRender) {
-                        records[rec].expanded = false;
+                var _loop_1 = function (rec) {
+                    if (isCountRequired(this_1.parent) && records[parseInt(rec.toString(), 10)].hasChildRecords &&
+                        this_1.parent.initialRender) {
+                        records[parseInt(rec.toString(), 10)].expanded = false;
+                    }
+                    if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization) {
+                        var childRecords_1 = [];
+                        var parent_1 = this_1.parent;
+                        records.filter(function (e) {
+                            if (e["" + parent_1.parentIdMapping] === records[parseInt(rec.toString(), 10)]["" + parent_1.idMapping]) {
+                                childRecords_1.push(e);
+                            }
+                        });
+                        if (childRecords_1.length) {
+                            records[parseInt(rec.toString(), 10)].expanded = true;
+                        }
+                        else if (records[parseInt(rec.toString(), 10)].hasChildRecords) {
+                            records[parseInt(rec.toString(), 10)].expanded = false;
+                        }
                     }
-                    if (isNullOrUndefined(records[rec].index)) {
-                        records[rec].taskData = extend({}, records[rec]);
-                        records[rec].uniqueID = getUid(this.parent.element.id + '_data_');
-                        setValue('uniqueIDCollection.' + records[rec].uniqueID, records[rec], this.parent);
-                        records[rec].level = 0;
-                        records[rec].index = Math.ceil(Math.random() * 1000);
-                        if ((records[rec][this.parent.hasChildMapping] ||
-                            this.parentItems.indexOf(records[rec][this.parent.idMapping]) !== -1)) {
-                            records[rec].hasChildRecords = true;
+                    if (isNullOrUndefined(records[parseInt(rec.toString(), 10)].index)) {
+                        records[parseInt(rec.toString(), 10)].taskData = extend({}, records[parseInt(rec.toString(), 10)]);
+                        records[parseInt(rec.toString(), 10)].uniqueID = getUid(this_1.parent.element.id + '_data_');
+                        setValue('uniqueIDCollection.' + records[parseInt(rec.toString(), 10)].uniqueID, records[parseInt(rec.toString(), 10)], this_1.parent);
+                        records[parseInt(rec.toString(), 10)].level = 0;
+                        if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization && records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping] && records[parseInt(rec.toString(), 10)].level === 0) {
+                            records[parseInt(rec.toString(), 10)].level = records[parseInt(rec.toString(), 10)].level + 1;
+                        }
+                        records[parseInt(rec.toString(), 10)].index = Math.ceil(Math.random() * 1000);
+                        if ((records[parseInt(rec.toString(), 10)][this_1.parent.hasChildMapping] ||
+                            this_1.parentItems.indexOf(records[parseInt(rec.toString(), 10)][this_1.parent.idMapping]) !== -1)) {
+                            records[parseInt(rec.toString(), 10)].hasChildRecords = true;
                         }
-                        records[rec].checkboxState = 'uncheck';
+                        records[parseInt(rec.toString(), 10)].checkboxState = 'uncheck';
                     }
+                };
+                var this_1 = this;
+                for (var rec = 0; rec < records.length; rec++) {
+                    _loop_1(rec);
                 }
             }
             else {
-                if (!isNullOrUndefined(records) && !((this.parent.loadChildOnDemand) && isCountRequired(this.parent) && !isNullOrUndefined(this.parent['dataResults']['expandRecord']))) {
+                var dataResults = 'dataResults';
+                var expandRecord = 'expandRecord';
+                if (!isNullOrUndefined(records) && !((this.parent.loadChildOnDemand) && isCountRequired(this.parent) && !isNullOrUndefined(this.parent["" + dataResults]["" + expandRecord])) &&
+                    !(isRemoteData(this.parent) && this.parent.loadChildOnDemand && args["" + actionArgs].isExpandCollapse && this.parent.enableVirtualization)) {
                     this.convertToFlatData(records);
                 }
             }
         }
-        args.result = this.parent.loadChildOnDemand ? this.parent.flatData : records;
+        if (isRemoteData(this.parent) && this.parent.loadChildOnDemand && args["" + actionArgs].isExpandCollapse && this.parent.enableVirtualization) {
+            args.result = records;
+        }
+        else if (isRemoteData(this.parent) && this.parent.enableVirtualization && !this.parent.loadChildOnDemand) {
+            args.result = records;
+        }
+        else {
+            args.result = this.parent.loadChildOnDemand ? this.parent.flatData : records;
+        }
+        if (isRemoteData(this.parent) && this.parent.enableVirtualization && this.parent.loadChildOnDemand
+            && this.parent.grid.aggregates.length && this.parent.grid.sortSettings.columns.length === 0
+            && this.parent.grid.filterSettings.columns.length === 0 && !this.parent.grid.searchSettings.key.length) {
+            var query = 'query';
+            var summaryQuery = args["" + query].queries.filter(function (q) { q.fn === 'onAggregates'; });
+            args.result = this.parent.summaryModule.calculateSummaryValue(summaryQuery, this.parent.flatData, true);
+        }
         this.parent.notify('updateResults', args);
     };
     /**
@@ -244,6 +292,7 @@ var DataManipulation = /** @class */ (function () {
      */
     DataManipulation.prototype.collectExpandingRecs = function (rowDetails, isChild) {
         var gridRows = this.parent.getRows();
+        var name = 'name';
         if (this.parent.rowTemplate) {
             var rows = this.parent.getContentTable().rows;
             gridRows = [].slice.call(rows);
@@ -254,11 +303,12 @@ var DataManipulation = /** @class */ (function () {
                 rowDetails.record.expanded = true;
             }
             for (var i = 0; i < rowDetails.rows.length; i++) {
-                rowDetails.rows[i].style.display = 'table-row';
+                rowDetails.rows[parseInt(i.toString(), 10)].style.display = 'table-row';
                 if (this.parent.loadChildOnDemand) {
-                    var targetEle = rowDetails.rows[i].getElementsByClassName('e-treegridcollapse')[0];
-                    childRecord = this.parent.rowTemplate ? this.parent.grid.getCurrentViewRecords()[rowDetails.rows[i].rowIndex] :
-                        this.parent.grid.getRowObjectFromUID(rowDetails.rows[i].getAttribute('data-Uid')).data;
+                    var targetEle = rowDetails.rows[parseInt(i.toString(), 10)].getElementsByClassName('e-treegridcollapse')[0];
+                    childRecord = this.parent.rowTemplate ?
+                        this.parent.grid.getCurrentViewRecords()[rowDetails.rows[parseInt(i.toString(), 10)].rowIndex] :
+                        this.parent.grid.getRowObjectFromUID(rowDetails.rows[parseInt(i.toString(), 10)].getAttribute('data-Uid')).data;
                     if (!isNullOrUndefined(targetEle) && childRecord.expanded) {
                         addClass([targetEle], 'e-treegridexpand');
                         removeClass([targetEle], 'e-treegridcollapse');
@@ -271,14 +321,14 @@ var DataManipulation = /** @class */ (function () {
                         this.collectExpandingRecs({ record: childRecord, rows: childRows, parentRow: rowDetails.parentRow }, true);
                     }
                 }
-                var expandingTd = rowDetails.rows[i].querySelector('.e-detailrowcollapse');
+                var expandingTd = rowDetails.rows[parseInt(i.toString(), 10)].querySelector('.e-detailrowcollapse');
                 if (!isNullOrUndefined(expandingTd)) {
                     this.parent.grid.detailRowModule.expand(expandingTd);
                 }
             }
         }
         else {
-            this.fetchRemoteChildData({ record: rowDetails.record, rows: rowDetails.rows, parentRow: rowDetails.parentRow });
+            this.fetchRemoteChildData({ action: rowDetails["" + name], record: rowDetails.record, rows: rowDetails.rows, parentRow: rowDetails.parentRow });
         }
     };
     DataManipulation.prototype.fetchRemoteChildData = function (rowDetails) {
@@ -289,11 +339,32 @@ var DataManipulation = /** @class */ (function () {
         var clonequries = qry.queries.filter(function (e) { return e.fn !== 'onPage' && e.fn !== 'onWhere'; });
         qry.queries = clonequries;
         qry.isCountRequired = true;
+        if (this.parent.enableVirtualization && rowDetails.action === 'remoteExpand') {
+            qry.take(this.parent.pageSettings.pageSize);
+            var expandDetail_1 = [];
+            expandDetail_1.push('ExpandingAction', rowDetails.record[this.parent.idMapping]);
+            qry.expand(expandDetail_1);
+        }
+        else if (this.parent.enableVirtualization && rowDetails.action === 'collapse') {
+            qry.take(this.parent.grid.pageSettings.pageSize);
+            var expandDetail = [];
+            expandDetail.push('CollapsingAction', rowDetails.record[this.parent.idMapping]);
+            qry.expand(expandDetail);
+        }
         qry.where(this.parent.parentIdMapping, 'equal', rowDetails.record[this.parent.idMapping]);
         showSpinner(this.parent.element);
         dm.executeQuery(qry).then(function (e) {
+            var remoteExpandedData = 'remoteExpandedData';
+            var remoteCollapsedData = 'remoteCollapsedData';
+            var level = 'level';
             var datas = _this.parent.grid.currentViewData.slice();
             var inx = datas.indexOf(rowDetails.record);
+            if (_this.parent.enableVirtualization && (rowDetails.action === 'collapse' || rowDetails.action === 'remoteExpand')) {
+                datas = [];
+                for (var i = 0; i < inx; i++) {
+                    datas.push(_this.parent.grid.currentViewData[parseInt(i.toString(), 10)]);
+                }
+            }
             if (inx === -1) {
                 _this.parent.grid.getRowsObject().forEach(function (rows) {
                     if (rows.data.uniqueID === rowDetails.record.uniqueID) {
@@ -305,23 +376,107 @@ var DataManipulation = /** @class */ (function () {
             var result = e.result;
             rowDetails.record.childRecords = result;
             for (var r = 0; r < result.length; r++) {
-                result[r].taskData = extend({}, result[r]);
-                result[r].level = rowDetails.record.level + 1;
-                result[r].index = Math.ceil(Math.random() * 1000);
-                var parentData = extend({}, rowDetails.record);
-                delete parentData.childRecords;
-                result[r].parentItem = parentData;
-                result[r].parentUniqueID = rowDetails.record.uniqueID;
-                result[r].uniqueID = getUid(_this.parent.element.id + '_data_');
-                result[r].checkboxState = 'uncheck';
-                setValue('uniqueIDCollection.' + result[r].uniqueID, result[r], _this.parent);
+                if (_this.parent.enableVirtualization && result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping] && rowDetails.action === 'remoteExpand') {
+                    _this.parent["" + remoteExpandedData].push(rowDetails.record);
+                }
+                else if (_this.parent.enableVirtualization && result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping] && rowDetails.action === 'collapse') {
+                    for (var i = 0; i < _this.parent["" + remoteExpandedData].length; i++) {
+                        if (rowDetails.record["" + _this.parent.idMapping] === _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)]["" + _this.parent.idMapping]) {
+                            _this.parent["" + remoteExpandedData].splice(i, 1);
+                        }
+                    }
+                }
+                result[parseInt(r.toString(), 10)].taskData = extend({}, result[parseInt(r.toString(), 10)]);
+                if (result[parseInt(r.toString(), 10)]["" + _this.parent.parentIdMapping] && _this.parent.enableVirtualization && _this.parent["" + remoteExpandedData].length) {
+                    for (var i = 0; i < _this.parent["" + remoteExpandedData].length; i++) {
+                        if (result[parseInt(r.toString(), 10)]["" + _this.parent.parentIdMapping] === _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)]["" + _this.parent.idMapping]) {
+                            result[parseInt(r.toString(), 10)].level = _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)]["" + level] + 1;
+                            var parentData = _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)];
+                            result[parseInt(r.toString(), 10)].parentItem = parentData;
+                            result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                        }
+                    }
+                }
+                else if (_this.parent.enableVirtualization) {
+                    if ((result[parseInt(r.toString(), 10)]["" + _this.parent.hasChildMapping] ||
+                        _this.parentItems.indexOf(result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping]) !== -1)
+                        && !(haveChild && !haveChild[parseInt(r.toString(), 10)])) {
+                        if (isNullOrUndefined(result[parseInt(r.toString(), 10)]["" + _this.parent.parentIdMapping])) {
+                            result[parseInt(r.toString(), 10)].level = 0;
+                        }
+                        else {
+                            result[parseInt(r.toString(), 10)].level = rowDetails.record.level;
+                        }
+                    }
+                    else {
+                        var parentData = extend({}, rowDetails.record);
+                        delete parentData.childRecords;
+                        result[parseInt(r.toString(), 10)].parentItem = parentData;
+                        result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                    }
+                }
+                else {
+                    result[parseInt(r.toString(), 10)].level = rowDetails.record.level + 1;
+                    var parentData = extend({}, rowDetails.record);
+                    delete parentData.childRecords;
+                    result[parseInt(r.toString(), 10)].parentItem = parentData;
+                    result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                }
+                result[parseInt(r.toString(), 10)].index = Math.ceil(Math.random() * 1000);
+                result[parseInt(r.toString(), 10)].uniqueID = getUid(_this.parent.element.id + '_data_');
+                result[parseInt(r.toString(), 10)].checkboxState = 'uncheck';
+                if (_this.parent.enableVirtualization && isNullOrUndefined(result[parseInt(r.toString(), 10)].level)) {
+                    for (var p = 0; p < _this.parent.grid.currentViewData.length; p++) {
+                        if (_this.parent.grid.currentViewData[parseInt(p.toString(), 10)]["" + _this.parent.idMapping] === result[parseInt(r.toString(), 10)]["" + _this.parent.parentIdMapping]) {
+                            result[parseInt(r.toString(), 10)].level = _this.parent.grid.currentViewData[parseInt(p.toString(), 10)]['level'] + 1;
+                        }
+                    }
+                }
+                setValue('uniqueIDCollection.' + result[parseInt(r.toString(), 10)].uniqueID, result[parseInt(r.toString(), 10)], _this.parent);
                 // delete result[r].parentItem.childRecords;
-                if ((result[r][_this.parent.hasChildMapping] || _this.parentItems.indexOf(result[r][_this.parent.idMapping]) !== -1)
-                    && !(haveChild && !haveChild[r])) {
-                    result[r].hasChildRecords = true;
-                    result[r].expanded = false;
+                if ((result[parseInt(r.toString(), 10)]["" + _this.parent.hasChildMapping] ||
+                    _this.parentItems.indexOf(result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping]) !== -1)
+                    && !(haveChild && !haveChild[parseInt(r.toString(), 10)])) {
+                    result[parseInt(r.toString(), 10)].hasChildRecords = true;
+                    if (_this.parent.enableVirtualization && _this.parent.loadChildOnDemand) {
+                        for (var i = 0; i < _this.parent["" + remoteCollapsedData].length; i++) {
+                            if (result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] === _this.parent["" + remoteCollapsedData][parseInt(i.toString(), 10)]["" + _this.parent.idMapping]) {
+                                result[parseInt(r.toString(), 10)].expanded = _this.parent["" + remoteCollapsedData][parseInt(i.toString(), 10)]['expanded'];
+                            }
+                        }
+                        if (rowDetails.action === 'collapse' && result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] !== rowDetails.record["" + _this.parent.idMapping] && result[parseInt(r.toString(), 10)].expanded !== false) {
+                            result[parseInt(r.toString(), 10)].expanded = true;
+                        }
+                        else if (rowDetails.action === 'collapse' && result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping]) {
+                            result[parseInt(r.toString(), 10)].expanded = false;
+                            _this.parent["" + remoteCollapsedData].push(rowDetails.record);
+                        }
+                        else if (rowDetails.action === 'remoteExpand') {
+                            for (var i = 0; i < _this.parent.grid.currentViewData.length; i++) {
+                                if (_this.parent.grid.currentViewData[parseInt(i.toString(), 10)]["" + _this.parent.idMapping] === result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping]) {
+                                    result.splice(r, 1, _this.parent.grid.currentViewData[parseInt(i.toString(), 10)]);
+                                }
+                            }
+                            if (result[parseInt(r.toString(), 10)][_this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping]) {
+                                for (var i = 0; i < _this.parent["" + remoteCollapsedData].length; i++) {
+                                    if (rowDetails.record["" + _this.parent.idMapping] === _this.parent["" + remoteCollapsedData][parseInt(i.toString(), 10)]["" + _this.parent.idMapping]) {
+                                        _this.parent["" + remoteCollapsedData].splice(i, 1);
+                                    }
+                                }
+                            }
+                            if (result[parseInt(r.toString(), 10)].expanded !== false) {
+                                result[parseInt(r.toString(), 10)].expanded = true;
+                            }
+                        }
+                    }
+                    else if (_this.parent.enableVirtualization && result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping] && rowDetails.action !== 'collapse') {
+                        result[parseInt(r.toString(), 10)].expanded = true;
+                    }
+                    else if (!(_this.parent.enableVirtualization && _this.parent.loadChildOnDemand)) {
+                        result[parseInt(r.toString(), 10)].expanded = false;
+                    }
                 }
-                datas.splice(inx + r + 1, 0, result[r]);
+                datas.splice(inx + r + 1, 0, result[parseInt(r.toString(), 10)]);
             }
             setValue('result', datas, e);
             setValue('action', 'beforecontentrender', e);
@@ -335,9 +490,12 @@ var DataManipulation = /** @class */ (function () {
                 }
                 if (!isNullOrUndefined(gridQuery)) {
                     var summaryQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onAggregates'; });
-                    e[result_1] = _this.parent.summaryModule.calculateSummaryValue(summaryQuery, e[result_1], true);
+                    e["" + result_1] = _this.parent.summaryModule.calculateSummaryValue(summaryQuery, e["" + result_1], true);
                 }
             }
+            if (_this.parent.enableVirtualization) {
+                _this.parent.grid.pageSettings.totalRecordsCount = e.count;
+            }
             e.count = _this.parent.grid.pageSettings.totalRecordsCount;
             var virtualArgs = {};
             if (_this.parent.enableVirtualization) {
@@ -365,13 +523,22 @@ var DataManipulation = /** @class */ (function () {
     };
     DataManipulation.prototype.beginSorting = function () {
         this.isSortAction = true;
+        if (isRemoteData(this.parent) && this.parent.enableVirtualization) {
+            var index = this.parent.query.queries.indexOf(this.parent.query.queries.filter(function (q) { return q.fn === 'onSortBy'; })[0]);
+            if (index !== -1) {
+                this.parent.query.queries.splice(index, 1);
+            }
+            if (this.parent.grid.sortSettings.columns.length === 0) {
+                this.parent.query.sortBy(null, null);
+            }
+        }
     };
     DataManipulation.prototype.createRecords = function (data, parentRecords) {
         var treeGridData = [];
         var keys = Object.keys(data);
         for (var i = 0, len = keys.length; i < len; i++) {
-            var currentData = extend({}, data[i]);
-            currentData.taskData = data[i];
+            var currentData = extend({}, data[parseInt(i.toString(), 10)]);
+            currentData.taskData = data[parseInt(i.toString(), 10)];
             var level = 0;
             this.storedIndex++;
             if (!Object.prototype.hasOwnProperty.call(currentData, 'index')) {
@@ -412,7 +579,27 @@ var DataManipulation = /** @class */ (function () {
                 currentData.level = level;
             }
             currentData.checkboxState = 'uncheck';
-            if (isNullOrUndefined(currentData[this.parent.parentIdMapping]) || currentData.parentItem) {
+            var remoteCollapsedData = 'remoteCollapsedData';
+            if (this.parent.enableVirtualization && this.parent.loadChildOnDemand && isRemoteData(this.parent)
+                && !this.parent.initialRender) {
+                if (!currentData.hasChildRecords && isNullOrUndefined(currentData["" + this.parent.parentIdMapping])) {
+                    currentData.hasChildRecords = true;
+                    for (var c = 0; c < this.parent["" + remoteCollapsedData].length; c++) {
+                        if (this.parent["" + remoteCollapsedData][parseInt(c.toString(), 10)]["" + this.parent.idMapping] === currentData["" + this.parent.idMapping]) {
+                            currentData.expanded = false;
+                        }
+                    }
+                }
+                else if (currentData.level === 0 && isNullOrUndefined(parentRecords) && !currentData.hasChildRecords) {
+                    currentData.level = currentData.level + 1;
+                }
+                if (currentData["" + this.parent.hasChildMapping] && !isNullOrUndefined(currentData["" + this.parent.expandStateMapping])) {
+                    currentData.expanded = currentData["" + this.parent.expandStateMapping];
+                    currentData.hasChildRecords = true;
+                }
+                this.parent.flatData.push(currentData);
+            }
+            else if (isNullOrUndefined(currentData["" + this.parent.parentIdMapping]) || currentData.parentItem) {
                 this.parent.flatData.push(currentData);
                 this.parent['infiniteScrollData'].push(currentData);
             }
@@ -448,9 +635,9 @@ var DataManipulation = /** @class */ (function () {
         var primaryKeyColumnName = this.parent.getPrimaryKeyFieldNames()[0];
         var dataValue = getObject('data', actionAddArgs);
         if ((!isNullOrUndefined(actionAddArgs)) && (!isNullOrUndefined(actionAddArgs.action)) && (actionAddArgs.action === 'add')
-            && (!isNullOrUndefined(actionAddArgs.data)) && isNullOrUndefined(actionAddArgs.data[primaryKeyColumnName])) {
-            actionAddArgs.data[primaryKeyColumnName] = args.result[actionAddArgs.index][primaryKeyColumnName];
-            dataValue.taskData[primaryKeyColumnName] = args.result[actionAddArgs.index][primaryKeyColumnName];
+            && (!isNullOrUndefined(actionAddArgs.data)) && isNullOrUndefined(actionAddArgs.data["" + primaryKeyColumnName])) {
+            actionAddArgs.data["" + primaryKeyColumnName] = args.result[actionAddArgs.index]["" + primaryKeyColumnName];
+            dataValue.taskData["" + primaryKeyColumnName] = args.result[actionAddArgs.index]["" + primaryKeyColumnName];
         }
         if ((!isNullOrUndefined(actionArgs) && Object.keys(actionArgs).length) || requestType === 'save') {
             requestType = requestType ? requestType : actionArgs.requestType;
@@ -523,12 +710,12 @@ var DataManipulation = /** @class */ (function () {
             var srtQry = new Query();
             for (var srt = this.parent.grid.sortSettings.columns.length - 1; srt >= 0; srt--) {
                 var getColumnByField = 'getColumnByField';
-                var col = this.parent.grid.renderModule.data[getColumnByField](this.parent.grid.
-                    sortSettings.columns[srt].field);
+                var col = this.parent.grid.renderModule.data["" + getColumnByField](this.parent.grid.
+                    sortSettings.columns[parseInt(srt.toString(), 10)].field);
                 var compFun = col.sortComparer && isOffline(this.parent) ?
                     col.sortComparer.bind(col) :
-                    this.parent.grid.sortSettings.columns[srt].direction;
-                srtQry.sortBy(this.parent.grid.sortSettings.columns[srt].field, compFun);
+                    this.parent.grid.sortSettings.columns[parseInt(srt.toString(), 10)].direction;
+                srtQry.sortBy(this.parent.grid.sortSettings.columns[parseInt(srt.toString(), 10)].field, compFun);
             }
             var modifiedData = new DataManager(parentData).executeLocal(srtQry);
             if (this.parent.allowRowDragAndDrop && !isNullOrUndefined(this.parent.rowDragAndDropModule['draggedRecord']) &&
@@ -582,13 +769,13 @@ var DataManipulation = /** @class */ (function () {
         }
         var isPdfExport = 'isPdfExport';
         var isCollapsedStatePersist = 'isCollapsedStatePersist';
-        if ((isPrinting === true || (args[isPdfExport] && (isNullOrUndefined(args[isCollapsedStatePersist])
-            || args[isCollapsedStatePersist]))) && this.parent.printMode === 'AllPages') {
+        if ((isPrinting === true || (args["" + isPdfExport] && (isNullOrUndefined(args["" + isCollapsedStatePersist])
+            || args["" + isCollapsedStatePersist]))) && this.parent.printMode === 'AllPages') {
             var actualResults = [];
             for (var i = 0; i < results.length; i++) {
-                var expandStatus = getExpandStatus(this.parent, results[i], this.parent.parentData);
+                var expandStatus = getExpandStatus(this.parent, results[parseInt(i.toString(), 10)], this.parent.parentData);
                 if (expandStatus) {
-                    actualResults.push(results[i]);
+                    actualResults.push(results[parseInt(i.toString(), 10)]);
                 }
             }
             results = actualResults;

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

@@ -1,4 +1,4 @@
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend, merge} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import {RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { ActionEventArgs, TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { CellSaveEventArgs, DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend, merge} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import { RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { LoadingIndicator } from '../models/loading-indicator';import { LoadingIndicatorModel } from '../models/loading-indicator-model';import { ActionEventArgs, TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { CellSaveEventArgs, DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -469,6 +469,22 @@ export interface TreeGridModel extends ComponentModel{
      */
     width?: string | number;
 
+    /**
+     *  Configures the loading indicator of the Tree Grid. Specifies whether to display spinner or shimmer effect
+     *  during the waiting time on any actions (paging, sorting, filtering, CRUD operations) performed in Tree Grid.
+     *
+     * @default {indicatorType: 'Spinner'}
+     */
+    loadingIndicator?: LoadingIndicatorModel;
+
+    /**
+     * Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature.
+     * If disabled, spinner is shown instead of shimmer effect.
+     *
+     * @default true
+     */
+    enableVirtualMaskRow?: boolean;
+
     /**
      * If `enableVirtualization` set to true, then the TreeGrid will render only the rows visible within the view-port
      * and load subsequent rows on vertical scrolling. This helps to load large dataset in TreeGrid.
@@ -545,14 +561,14 @@ export interface TreeGridModel extends ComponentModel{
      *
      * @event collapsing
      */
-    collapsing?: EmitType<RowExpandingEventArgs>;
+    collapsing?: EmitType<RowCollapsingEventArgs>;
 
     /**
      * Triggers after the record is collapsed.
      *
      * @event collapsed
      */
-    collapsed?: EmitType<RowExpandingEventArgs>;
+    collapsed?: EmitType<RowCollapsedEventArgs>;
 
     /**
      * Triggers when cell is saved.
@@ -579,7 +595,7 @@ export interface TreeGridModel extends ComponentModel{
    * @event actionComplete
    */
 
-    actionComplete?: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs| SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs | CellSaveEventArgs>;
+    actionComplete?: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs| SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs>;
 
     /**
    * Triggers before the record is to be edit.

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

@@ -5,6 +5,7 @@ import { Column, ColumnModel } from '../models/column';
 import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs } from '@syncfusion/ej2-grids';
 import { ColumnQueryModeType, HeaderCellInfoEventArgs } from '@syncfusion/ej2-grids';
 import { RowDragEventArgs, RowDropSettingsModel } from '@syncfusion/ej2-grids';
+import { LoadingIndicatorModel } from '../models/loading-indicator-model';
 import { DetailDataBoundEventArgs, ClipMode, ColumnChooser } from '@syncfusion/ej2-grids';
 import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs } from '@syncfusion/ej2-grids';
 import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs, BeginEditArgs, CellEditArgs } from '@syncfusion/ej2-grids';
@@ -41,8 +42,8 @@ import { Render } from '../renderer/render';
 import { DataManipulation } from './data';
 import { RowDD } from '../actions/rowdragdrop';
 import { Sort } from '../actions/sort';
-import { ITreeData, RowExpandedEventArgs, TreeGridExcelExportProperties } from './interface';
-import { CellSaveEventArgs, DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';
+import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';
+import { DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';
 import { GridLine } from '@syncfusion/ej2-grids';
 import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';
 import { ToolbarItems, ToolbarItem, ContextMenuItem, RowPosition, CopyHierarchyType } from '../enum';
@@ -112,6 +113,10 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     /** @hidden */
     private infiniteScrollData;
     /** @hidden */
+    private remoteCollapsedData;
+    /** @hidden */
+    private remoteExpandedData;
+    /** @hidden */
     isLocalData: boolean;
     /** @hidden */
     parentData: Object[];
@@ -586,6 +591,20 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default 'auto'
      */
     width: string | number;
+    /**
+     *  Configures the loading indicator of the Tree Grid. Specifies whether to display spinner or shimmer effect
+     *  during the waiting time on any actions (paging, sorting, filtering, CRUD operations) performed in Tree Grid.
+     *
+     * @default {indicatorType: 'Spinner'}
+     */
+    loadingIndicator: LoadingIndicatorModel;
+    /**
+     * Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature.
+     * If disabled, spinner is shown instead of shimmer effect.
+     *
+     * @default true
+     */
+    enableVirtualMaskRow: boolean;
     /**
      * If `enableVirtualization` set to true, then the TreeGrid will render only the rows visible within the view-port
      * and load subsequent rows on vertical scrolling. This helps to load large dataset in TreeGrid.
@@ -653,13 +672,13 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      *
      * @event collapsing
      */
-    collapsing: EmitType<RowExpandingEventArgs>;
+    collapsing: EmitType<RowCollapsingEventArgs>;
     /**
      * Triggers after the record is collapsed.
      *
      * @event collapsed
      */
-    collapsed: EmitType<RowExpandingEventArgs>;
+    collapsed: EmitType<RowCollapsedEventArgs>;
     /**
      * Triggers when cell is saved.
      *
@@ -681,7 +700,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * Triggers when TreeGrid actions such as sorting, filtering, paging etc. are completed.
      * @event actionComplete
      */
-    actionComplete: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs | SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs | CellSaveEventArgs>;
+    actionComplete: EmitType<PageEventArgs | FilterEventArgs | SortEventArgs | SearchEventArgs | AddEventArgs | SaveEventArgs | EditEventArgs | DeleteEventArgs>;
     /**
      * Triggers before the record is to be edit.
      * @event beginEdit