@syncfusion/ej2-treegrid 19.3.48 → 19.4.38

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

@@ -1,5 +1,5 @@
 import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, classList, closest, compile, createElement, debounce, extend, getEnumValue, getValue, isNullOrUndefined, merge, remove, removeClass, select, setValue } from '@syncfusion/ej2-base';
-import { Aggregate, Cell, CellType, Clipboard, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, templateCompiler } from '@syncfusion/ej2-grids';
+import { Aggregate, Cell, CellRenderer, CellType, Clipboard, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, DetailRow, Edit, ExcelExport, Filter, Freeze, Grid, InfiniteScroll, InterSectionObserver, Logger, Page, PdfExport, Print, RenderType, Reorder, Resize, RowDD, RowDropSettings, RowRenderer, Scroll, Sort, Toolbar, VirtualContentRenderer, VirtualHeaderRenderer, VirtualRowModelGenerator, VirtualScroll, appendChildren, calculateAggregate, detailLists, extend as extend$1, getActualProperties, getObject, getUid, iterateArrayOrObject, parentsUntil, resetRowIndex, templateCompiler } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { CacheAdaptor, DataManager, DataUtil, Deferred, JsonAdaptor, ODataAdaptor, Predicate, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor } from '@syncfusion/ej2-data';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
@@ -76,6 +76,25 @@ var Column = /** @__PURE__ @class */ (function () {
         this.filter = {};
         merge(this, options);
     }
+    /**
+     * Update the State changes reflected for TreeGrid columndirective in react platform.
+     *
+     * @param {Column} column - specifies the column
+     * @returns {void}
+     * @hidden
+     */
+    Column.prototype.setProperties = function (column) {
+        //Angular two way binding
+        var keys = Object.keys(column);
+        for (var i = 0; i < keys.length; i++) {
+            this[keys[i]] = column[keys[i]];
+            //Refresh the react columnTemplates on state change
+            if (this.parent && this.parent['isReact'] && keys[i] === 'template') {
+                var refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
+                this.parent.clipboardModule['treeGridParent'][refreshReactColumnTemplateByUid](this.uid);
+            }
+        }
+    };
     return Column;
 }());
 
@@ -2286,7 +2305,9 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
             var query = getObject('query', args);
             var srtQry = new Query();
             for (var srt = this.parent.grid.sortSettings.columns.length - 1; srt >= 0; srt--) {
-                var col = this.parent.grid.getColumnByField(this.parent.grid.sortSettings.columns[srt].field);
+                var getColumnByField = 'getColumnByField';
+                var col = this.parent.grid.renderModule.data[getColumnByField](this.parent.grid.
+                    sortSettings.columns[srt].field);
                 var compFun = col.sortComparer && isOffline(this.parent) ?
                     col.sortComparer.bind(col) :
                     this.parent.grid.sortSettings.columns[srt].direction;
@@ -3771,6 +3792,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.allowResizing = this.allowResizing;
         this.grid.enableHover = this.enableHover;
         this.grid.enableAutoFill = this.enableAutoFill;
+        this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
         this.grid.enableImmutableMode = this.enableImmutableMode;
         this.grid.allowRowDragAndDrop = this.allowRowDragAndDrop;
         this.grid.rowDropSettings = getActualProperties(this.rowDropSettings);
@@ -3816,6 +3838,15 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             _this.trigger(rowSelecting, 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);
+                    }
+                }
+            }
             _this.selectedRowIndex = _this.grid.selectedRowIndex;
             _this.notify(rowSelected, args);
             _this.trigger(rowSelected, args);
@@ -4123,8 +4154,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 _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 :
+                    _this.grid.renderModule.data.dataManager = _this.grid.dataSource instanceof DataManager ?
+                        _this.grid.dataSource :
                         (isNullOrUndefined(_this.grid.dataSource) ? new DataManager() : new DataManager(_this.grid.dataSource));
+                    _this.grid.renderModule.data.isQueryInvokedFromData = true;
+                    _this.grid.query = _this.grid.query instanceof Query ? _this.grid.query : new Query();
                 }
             }
             var callBackPromise = new Deferred();
@@ -4574,6 +4608,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 case 'enableAutoFill':
                     this.grid.enableAutoFill = this.enableAutoFill;
                     break;
+                case 'enableAdaptiveUI':
+                    this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
+                    break;
                 case 'enableImmutableMode':
                     this.grid.enableImmutableMode = this.enableImmutableMode;
                     break;
@@ -5170,6 +5207,32 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this[merge$$1] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     };
+    /**
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
+    TreeGrid.prototype.refreshReactColumnTemplateByUid = function (columnUid) {
+        var _this = this;
+        if (this.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.clearTemplate(['columnTemplate'], undefined, function () {
+                var cells = 'cells';
+                var rowIdx = 'index';
+                var rowsObj = _this.grid.getRowsObject();
+                var indent = _this.grid.getIndentCount();
+                var cellIndex = _this.grid.getNormalizedColumnIndex(columnUid);
+                for (var j = 0; j < rowsObj.length; j++) {
+                    if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {
+                        var cell = rowsObj[j][cells][cellIndex];
+                        var cellRenderer = new CellRenderer(_this.grid, _this.grid.serviceLocator);
+                        var td = _this.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                    }
+                }
+            });
+        }
+    };
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -5439,9 +5502,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {HTMLTableRowElement} row - Expands the given row
      * @param {Object} record - Expands the given record
+     * @param {Object} key - Primary key value
+     * @param {number} level - Specifies the hierarchical level of the record
      * @returns {void}
      */
-    TreeGrid.prototype.expandRow = function (row, record) {
+    TreeGrid.prototype.expandRow = function (row, record, key, level) {
         var _this = this;
         record = this.getCollapseExpandRecords(row, record);
         if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
@@ -5451,6 +5516,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.trigger(expanding, args, function (expandingArgs) {
             if (!expandingArgs.cancel) {
                 _this.expandCollapse('expand', row, record);
+                if (expandingArgs.expandAll) {
+                    _this.expandCollapseAllChildren(record, 'expand', key, level);
+                }
                 var children = 'Children';
                 if (!(isRemoteData(_this) && !isOffline(_this)) && (!isCountRequired(_this) || !isNullOrUndefined(record[children]))) {
                     var collapseArgs = { data: record, row: row };
@@ -5460,6 +5528,19 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    TreeGrid.prototype.expandCollapseAllChildren = function (record, action, key, level) {
+        if ((!isNullOrUndefined(key) && record[this.getPrimaryKeyFieldNames()[0]] !== key) ||
+            (!isNullOrUndefined(level) && level !== record.level)) {
+            return;
+        }
+        var records = findChildrenRecords(record).filter(function (e) {
+            return e.hasChildRecords;
+        });
+        records.unshift(record);
+        for (var i = 0; i < records.length; i++) {
+            this.expandCollapse(action, null, records[i]);
+        }
+    };
     TreeGrid.prototype.setHeightForFrozenContent = function () {
         var freeze = (this.grid.getFrozenLeftColumnsCount() > 0 || this.grid.getFrozenRightColumnsCount() > 0) ? true : false;
         if (this.grid.getFrozenColumns() > 0 || freeze) {
@@ -5483,14 +5564,18 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {HTMLTableRowElement} row - Collapse the given row
      * @param {Object} record - Collapse the given record
+     * @param {Object} key - Primary key value
      * @returns {void}
      */
-    TreeGrid.prototype.collapseRow = function (row, record) {
+    TreeGrid.prototype.collapseRow = function (row, record, key) {
         var _this = this;
         record = this.getCollapseExpandRecords(row, record);
         var args = { data: record, row: row, cancel: false };
         this.trigger(collapsing, args, function (collapsingArgs) {
             if (!collapsingArgs.cancel) {
+                if (collapsingArgs.collapseAll) {
+                    _this.expandCollapseAllChildren(record, 'collapse', key);
+                }
                 _this.expandCollapse('collapse', row, record);
                 var collapseArgs = { data: record, row: row };
                 if (!isRemoteData(_this)) {
@@ -5521,22 +5606,58 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.expandRow(null, rec);
+            this.expandAction(rec, null, level, true);
         }
         else {
             var rec = this.getRecordDetails(level);
-            var row = getObject('rows', rec);
             var record = getObject('records', rec);
-            for (var i = 0; i < record.length; i++) {
-                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]);
-                        this.flatData[pindex].expanded = true;
+            this.expandAction(record, null, level);
+        }
+    };
+    /**
+     * Expands the records by given primary key value
+     *
+     * @param {Object} key - Expands the parent rows with given primary key value
+     * @returns {void}
+     */
+    TreeGrid.prototype.expandByKey = function (key) {
+        this.expandCollapseActionByKey(key, 'Expand');
+    };
+    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;
+                var parentItem = this_1.flatData.filter(function (e) {
+                    return e.uniqueID === puniqueID_1;
+                });
+                if (isRemoteData(this_1)) {
+                    parentItem = this_1.getCurrentViewRecords().filter(function (e) {
+                        return e.uniqueID === puniqueID_1;
+                    });
+                }
+                if (parentItem[0].expanded === false) {
+                    record.push(parentItem[0]);
+                    parentItem[0].expanded = true;
+                }
+                else {
+                    if (!getExpandStatus(this_1, parentItem[0], this_1.parentData)) {
+                        if (parentItem[0].expanded && parentItem[0].parentItem !== undefined) {
+                            record.push(parentItem[0]);
+                        }
                     }
                 }
-                this.expandRow(row[i], record[i]);
             }
+            if (!isPaging) {
+                this_1.expandRow(null, record[i], key, level);
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < record.length; i++) {
+            _loop_1(i);
+        }
+        if (isPaging) {
+            this.expandRow(null, record, key, level);
         }
     };
     TreeGrid.prototype.getRecordDetails = function (level) {
@@ -5564,14 +5685,46 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.collapseRow(null, record);
+            this.collapseAction(record, null, true);
         }
         else {
             var rec = this.getRecordDetails(level);
-            var rows = getObject('rows', rec);
             var records = getObject('records', rec);
-            for (var i = 0; i < records.length; i++) {
-                this.collapseRow(rows[i], records[i]);
+            this.collapseAction(records);
+        }
+    };
+    /**
+     * Collapses the records by given primary key value
+     *
+     * @param {Object} key - Collapses the parent rows with given primary key value
+     * @returns {void}
+     */
+    TreeGrid.prototype.collapseByKey = function (key) {
+        this.expandCollapseActionByKey(key, 'Collapse');
+    };
+    TreeGrid.prototype.expandCollapseActionByKey = function (key, action) {
+        var primaryKeyField = this.getPrimaryKeyFieldNames()[0];
+        var dataSource = isRemoteData(this) ? this.getCurrentViewRecords() : this.grid.dataSource;
+        if (!isNullOrUndefined(primaryKeyField)) {
+            var rec = dataSource.filter(function (e) {
+                return e[primaryKeyField].toString() === key.toString();
+            });
+            if (action === 'Expand') {
+                this.expandAction(rec, key, null);
+            }
+            else {
+                this.collapseAction(rec, key);
+            }
+        }
+    };
+    TreeGrid.prototype.collapseAction = function (record, key, isPaging) {
+        if (isPaging === void 0) { isPaging = false; }
+        if (isPaging) {
+            this.collapseRow(null, record);
+        }
+        else {
+            for (var i = 0; i < record.length; i++) {
+                this.collapseRow(null, record[i], key);
             }
         }
         if (!this.grid.contentModule.isDataSourceChanged && this.enableVirtualization && this.getRows()
@@ -6481,6 +6634,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableAutoFill", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableAdaptiveUI", void 0);
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableImmutableMode", void 0);
@@ -8071,6 +8227,12 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @class */ (function (_super) {
         return _super.prototype.getData.call(this);
     };
     TreeVirtualRowModelGenerator.prototype.generateRows = function (data, notifyArgs) {
+        if (!isNullOrUndefined(notifyArgs.virtualInfo) && notifyArgs.virtualInfo.loadNext && notifyArgs.virtualInfo.nextInfo.page !== this.parent.pageSettings.currentPage) {
+            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.nextInfo.page } }, true);
+        }
+        else if (!isNullOrUndefined(notifyArgs.virtualInfo) && !notifyArgs.virtualInfo.loadNext && notifyArgs.virtualInfo.page !== this.parent.pageSettings.currentPage) {
+            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.page } }, true);
+        }
         var info = this.getDataInfo();
         if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
             if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
@@ -9922,11 +10084,6 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         var data = (this.parent.grid.dataSource instanceof DataManager ?
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
         var primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        if (!isNullOrUndefined(this.parent[targetElement])) {
-            var row = this.parent[targetElement].closest('tr');
-            this.parent.collapseRow(row);
-            this.parent[targetElement] = null;
-        }
         if (!isNullOrUndefined(this.batchAddedRecords)) {
             for (var i = 0; i < this.batchAddedRecords.length; i++) {
                 index = data.map(function (e) { return e[primaryKey]; }).indexOf(this.batchAddedRecords[i][primaryKey]);
@@ -9946,6 +10103,11 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 }
             }
         }
+        if (!isNullOrUndefined(this.parent[targetElement])) {
+            var row = this.parent[targetElement].closest('tr');
+            this.parent.collapseRow(row);
+            this.parent[targetElement] = null;
+        }
         if (!isNullOrUndefined(this.batchDeletedRecords)) {
             for (var i = 0; i < this.batchDeletedRecords.length; i++) {
                 if (!isNullOrUndefined(this.batchDeletedRecords[i][parentItem])) {
@@ -10823,14 +10985,28 @@ var Edit$1 = /** @__PURE__ @class */ (function () {
             return;
         }
         if (args.requestType === 'delete') {
-            var data = args.data;
-            for (var i = 0; i < data.length; i++) {
-                this.deleteUniqueID(data[i].uniqueID);
-                var childs = findChildrenRecords(data[i]);
+            var data_1 = args.data;
+            if (isNullOrUndefined(args.data[0].uniqueID)) {
+                var primaryKeys_2 = this.parent.getPrimaryKeyFieldNames();
+                var _loop_1 = function (i) {
+                    this_1.parent.flatData.filter(function (e) {
+                        if (e[primaryKeys_2[0]] === args.data[i][primaryKeys_2[0]]) {
+                            data_1[i] = e;
+                        }
+                    });
+                };
+                var this_1 = this;
+                for (var i = 0; i < data_1.length; i++) {
+                    _loop_1(i);
+                }
+            }
+            for (var i = 0; i < data_1.length; i++) {
+                this.deleteUniqueID(data_1[i].uniqueID);
+                var childs = findChildrenRecords(data_1[i]);
                 for (var c = 0; c < childs.length; c++) {
                     this.deleteUniqueID(childs[c].uniqueID);
                 }
-                args.data = data.concat(childs);
+                args.data = args.data.concat(childs);
             }
         }
         if (args.requestType === 'add' || (this.isAddedRowByMethod && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling))) {
@@ -10875,6 +11051,7 @@ var Edit$1 = /** @__PURE__ @class */ (function () {
         }
         if (this.isAddedRowByMethod && args.index !== 0) {
             this.addRowRecord = this.parent.flatData[args.index];
+            this.addRowIndex = args.index;
         }
         if (this.parent.editSettings.newRowPosition === 'Child' && isNullOrUndefined(this.addRowRecord)
             && !isNullOrUndefined(this.parent.getSelectedRecords()[0])) {
@@ -10903,6 +11080,10 @@ var Edit$1 = /** @__PURE__ @class */ (function () {
             var position = null;
             value.taskData = isNullOrUndefined(value.taskData) ? extend({}, args.data) : value.taskData;
             var currentData = this.parent.grid.getCurrentViewRecords();
+            if (this.parent.enableVirtualization && args.index !== 0) {
+                this.addRowIndex = this.parent.grid.getCurrentViewRecords().indexOf(this.addRowRecord);
+                this.selectedIndex = parseInt(this.parent.getRows()[this.addRowIndex].getAttribute('aria-rowindex'), 10);
+            }
             var index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');
             setValue('uniqueIDCollection.' + value.uniqueID, value, this.parent);
@@ -11424,7 +11605,10 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(this.observer[containerRect])) {
             this.observer[containerRect] = this.observers[containerRect];
         }
-        _super.prototype[selectVirtualRow].call(this, args);
+        if (isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule) || args.selectedIndex !== 0 ||
+            isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
+            _super.prototype[selectVirtualRow].call(this, args);
+        }
     };
     VirtualTreeContentRenderer.prototype.refreshCell = function (rowObj) {
         rowObj.cells = this.generateCells();
@@ -11910,6 +12094,11 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
             }
             //if ((this.prevendIndex !== -1 && this.prevstartIndex !== -1) &&
             //this.prevendIndex === endIndex && this.prevstartIndex === startIndex) {
+            if (!isNullOrUndefined(this.expandCollapseRec) && (pageingDetails.actionArgs.requestType === 'virtualscroll' ||
+                (pageingDetails.actionArgs.requestType === 'refresh' && startIndex !== this.prevstartIndex)) &&
+                (startIndex < this.parent.getRows().length && endIndex <= startIndex + this.parent.getRows().length)) {
+                startIndex = 0;
+            }
             if (!isNullOrUndefined(this.expandCollapseRec)) {
                 var resourceCount = this.parent.getRows();
                 var sIndex = visualData.indexOf(this.expandCollapseRec);