@syncfusion/ej2-treegrid 19.3.57 → 19.4.42

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;
 }());
 
@@ -3773,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);
@@ -3822,7 +3842,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 _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) {
+                    if (_this.getRows()[i].getElementsByClassName('e-frame e-icons e-uncheck').length) {
                         _this.grid.selectionModule[updateRowSelection](_this.getRows()[i], _this.getCurrentViewRecords()[i].index);
                     }
                 }
@@ -3937,6 +3957,16 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
+            var action = 'action';
+            if (_this.enableVirtualization && _this.selectionSettings.persistSelection && (_this.dataResults[action] === 'expand' || _this.dataResults[action] === 'collapse')) {
+                var refreshPersistSelection = 'refreshPersistSelection';
+                _this.grid.selectionModule[refreshPersistSelection]();
+                if (_this.grid.selectionSettings.type === 'Single') {
+                    var updateRowSelection = 'updateRowSelection';
+                    var index = _this.getCurrentViewRecords().indexOf(_this.grid.selectionModule['data']);
+                    _this.grid.selectionModule[updateRowSelection](_this.getRows()[index], index);
+                }
+            }
             _this.trigger(dataBound, args);
             _this.initialRender = false;
         };
@@ -4134,8 +4164,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();
@@ -4585,6 +4618,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;
@@ -5165,7 +5201,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                     gridColumn[prop] = gridColumns[i][prop];
                 }
                 this.columnModel.push(new Column(gridColumn));
-                if (field === this.columnModel[i].field && (!isNullOrUndefined(temp) && temp !== '')) {
+                if (field === this.columnModel[i].field && this.columnModel[i].type !== 'checkbox' && (!isNullOrUndefined(temp) && temp !== '')) {
                     this.columnModel[i].template = temp;
                 }
             }
@@ -5181,6 +5217,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.
      *
@@ -5450,9 +5512,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')) {
@@ -5462,6 +5526,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 };
@@ -5471,6 +5538,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) {
@@ -5494,14 +5574,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)) {
@@ -5532,22 +5616,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 (!isNullOrUndefined(record[i].parentItem)) {
-                    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) {
@@ -5575,14 +5695,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()
@@ -6492,6 +6644,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);
@@ -8082,6 +8237,14 @@ 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') {
@@ -8536,9 +8699,9 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
         if (excelRow.type === 'excel') {
             var excelrowobj = excelRow.rowObj.data;
             var filtercolumnlength = this.parent.grid.filterSettings.columns.length;
+            var rowlength = excelRow.excelRows.length;
+            var rowlevel = excelrowobj.level;
             if (excelrowobj.parentItem && getParentData(this.parent, excelrowobj.parentItem.uniqueID, Boolean(filtercolumnlength))) {
-                var rowlength = excelRow.excelRows.length;
-                var rowlevel = excelrowobj.level;
                 var expandedStatus = false;
                 var sublevelState = false;
                 var state = getExpandStatus(this.parent, excelrowobj, this.parent.parentData);
@@ -8549,6 +8712,9 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
                 excelRow.excelRows[rowlength - 1].grouping = { outlineLevel: rowlevel, isCollapsed: sublevelState,
                     isHidden: expandedStatus };
             }
+            else if (excelrowobj.hasChildRecords && isNullOrUndefined(excelrowobj.parentItem)) {
+                excelRow.excelRows[rowlength - 1].grouping = { outlineLevel: rowlevel };
+            }
         }
     };
     /* eslint-disable-next-line */
@@ -9933,11 +10099,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]);
@@ -9957,6 +10118,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])) {
@@ -10931,8 +11097,7 @@ var Edit$1 = /** @__PURE__ @class */ (function () {
             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'));
-                
+                this.selectedIndex = parseInt(this.parent.getRows()[this.addRowIndex].getAttribute('aria-rowindex'), 10);
             }
             var index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');
@@ -11455,7 +11620,8 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(this.observer[containerRect])) {
             this.observer[containerRect] = this.observers[containerRect];
         }
-        if (args.selectedIndex !== 0 || isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
+        if (isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule) || args.selectedIndex !== 0 ||
+            isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
             _super.prototype[selectVirtualRow].call(this, args);
         }
     };
@@ -11693,6 +11859,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             var replace = 'replaceWith';
             this.getTable().querySelector('tbody')[replace](target);
             if (!this.isExpandCollapse || this.translateY === 0) {
+                this.translateY = this.translateY < 0 ? 0 : this.translateY;
                 getValue('virtualEle', this).adjustTable(cOffset, this.translateY);
             }
             else {
@@ -11904,7 +12071,10 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
             record: row.record,
             count: this.parent.flatData.length
         };
-        this.parent.grid.clearSelection();
+        if (this.parent.enableVirtualization && this.parent.selectionSettings.mode === 'Cell' ||
+            this.parent.selectionSettings.mode === 'Row' && !this.parent.selectionSettings.persistSelection) {
+            this.parent.grid.clearSelection();
+        }
         var requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
         getValue('grid.renderModule', this.parent).dataManagerSuccess(ret, { requestType: requestType });
     };