@syncfusion/ej2-treegrid 19.3.57 → 19.4.42

package/dist/es6/ej2-treegrid.es2015.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 @@ class Column {
         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
+     */
+    setProperties(column) {
+        //Angular two way binding
+        const keys = Object.keys(column);
+        for (let 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') {
+                const refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
+                this.parent.clipboardModule['treeGridParent'][refreshReactColumnTemplateByUid](this.uid);
+            }
+        }
+    }
 }
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3527,6 +3546,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
@@ -3575,7 +3595,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this.grid.currentViewData.length !== this.grid.selectionModule.selectedRowIndexes.length) {
                 const updateRowSelection = 'updateRowSelection';
                 for (let 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);
                     }
                 }
@@ -3689,6 +3709,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     }
                 }
             }
+            const action = 'action';
+            if (this.enableVirtualization && this.selectionSettings.persistSelection && (this.dataResults[action] === 'expand' || this.dataResults[action] === 'collapse')) {
+                const refreshPersistSelection = 'refreshPersistSelection';
+                this.grid.selectionModule[refreshPersistSelection]();
+                if (this.grid.selectionSettings.type === 'Single') {
+                    const updateRowSelection = 'updateRowSelection';
+                    const index = this.getCurrentViewRecords().indexOf(this.grid.selectionModule['data']);
+                    this.grid.selectionModule[updateRowSelection](this.getRows()[index], index);
+                }
+            }
             this.trigger(dataBound, args);
             this.initialRender = false;
         };
@@ -3883,8 +3913,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 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();
                 }
             }
             const callBackPromise = new Deferred();
@@ -4328,6 +4361,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 case 'enableAutoFill':
                     this.grid.enableAutoFill = this.enableAutoFill;
                     break;
+                case 'enableAdaptiveUI':
+                    this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
+                    break;
                 case 'enableImmutableMode':
                     this.grid.enableImmutableMode = this.enableImmutableMode;
                     break;
@@ -4455,7 +4491,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         for (let i = 0; i < keyEntity.length; i++) {
             const currentObject = this[keyEntity[i]];
             for (let k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
-                let objVal = val[k];
+                const objVal = val[k];
                 delete currentObject[objVal];
             }
         }
@@ -4907,7 +4943,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     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;
                 }
             }
@@ -4923,6 +4959,31 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this[merge$$1] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     }
+    /**
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
+    refreshReactColumnTemplateByUid(columnUid) {
+        if (this.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.clearTemplate(['columnTemplate'], undefined, () => {
+                const cells = 'cells';
+                const rowIdx = 'index';
+                const rowsObj = this.grid.getRowsObject();
+                const indent = this.grid.getIndentCount();
+                const cellIndex = this.grid.getNormalizedColumnIndex(columnUid);
+                for (let j = 0; j < rowsObj.length; j++) {
+                    if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {
+                        const cell = rowsObj[j][cells][cellIndex];
+                        const cellRenderer = new CellRenderer(this.grid, this.grid.serviceLocator);
+                        const 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.
      *
@@ -5191,9 +5252,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      *
      * @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}
      */
-    expandRow(row, record) {
+    expandRow(row, record, key, level) {
         record = this.getCollapseExpandRecords(row, record);
         if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
@@ -5202,6 +5265,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.trigger(expanding, args, (expandingArgs) => {
             if (!expandingArgs.cancel) {
                 this.expandCollapse('expand', row, record);
+                if (expandingArgs.expandAll) {
+                    this.expandCollapseAllChildren(record, 'expand', key, level);
+                }
                 const children = 'Children';
                 if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record[children]))) {
                     const collapseArgs = { data: record, row: row };
@@ -5211,6 +5277,19 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         });
     }
+    expandCollapseAllChildren(record, action, key, level) {
+        if ((!isNullOrUndefined(key) && record[this.getPrimaryKeyFieldNames()[0]] !== key) ||
+            (!isNullOrUndefined(level) && level !== record.level)) {
+            return;
+        }
+        const records = findChildrenRecords(record).filter((e) => {
+            return e.hasChildRecords;
+        });
+        records.unshift(record);
+        for (let i = 0; i < records.length; i++) {
+            this.expandCollapse(action, null, records[i]);
+        }
+    }
     setHeightForFrozenContent() {
         const freeze = (this.grid.getFrozenLeftColumnsCount() > 0 || this.grid.getFrozenRightColumnsCount() > 0) ? true : false;
         if (this.grid.getFrozenColumns() > 0 || freeze) {
@@ -5234,13 +5313,17 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      *
      * @param {HTMLTableRowElement} row - Collapse the given row
      * @param {Object} record - Collapse the given record
+     * @param {Object} key - Primary key value
      * @returns {void}
      */
-    collapseRow(row, record) {
+    collapseRow(row, record, key) {
         record = this.getCollapseExpandRecords(row, record);
         const args = { data: record, row: row, cancel: false };
         this.trigger(collapsing, args, (collapsingArgs) => {
             if (!collapsingArgs.cancel) {
+                if (collapsingArgs.collapseAll) {
+                    this.expandCollapseAllChildren(record, 'collapse', key);
+                }
                 this.expandCollapse('collapse', row, record);
                 const collapseArgs = { data: record, row: row };
                 if (!isRemoteData(this)) {
@@ -5271,22 +5354,53 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.expandRow(null, rec);
+            this.expandAction(rec, null, level, true);
         }
         else {
             const rec = this.getRecordDetails(level);
-            const row = getObject('rows', rec);
             const record = getObject('records', rec);
-            for (let i = 0; i < record.length; i++) {
-                if (!isNullOrUndefined(record[i].parentItem)) {
-                    const 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}
+     */
+    expandByKey(key) {
+        this.expandCollapseActionByKey(key, 'Expand');
+    }
+    expandAction(record, key, level, isPaging = false) {
+        for (let i = 0; i < record.length; i++) {
+            if (!isNullOrUndefined(record[i].parentItem)) {
+                const puniqueID = record[i].parentItem.uniqueID;
+                let parentItem = this.flatData.filter((e) => {
+                    return e.uniqueID === puniqueID;
+                });
+                if (isRemoteData(this)) {
+                    parentItem = this.getCurrentViewRecords().filter((e) => {
+                        return e.uniqueID === puniqueID;
+                    });
+                }
+                if (parentItem[0].expanded === false) {
+                    record.push(parentItem[0]);
+                    parentItem[0].expanded = true;
+                }
+                else {
+                    if (!getExpandStatus(this, parentItem[0], this.parentData)) {
+                        if (parentItem[0].expanded && parentItem[0].parentItem !== undefined) {
+                            record.push(parentItem[0]);
+                        }
                     }
                 }
-                this.expandRow(row[i], record[i]);
             }
+            if (!isPaging) {
+                this.expandRow(null, record[i], key, level);
+            }
+        }
+        if (isPaging) {
+            this.expandRow(null, record, key, level);
         }
     }
     getRecordDetails(level) {
@@ -5314,14 +5428,45 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.collapseRow(null, record);
+            this.collapseAction(record, null, true);
         }
         else {
             const rec = this.getRecordDetails(level);
-            const rows = getObject('rows', rec);
             const records = getObject('records', rec);
-            for (let 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}
+     */
+    collapseByKey(key) {
+        this.expandCollapseActionByKey(key, 'Collapse');
+    }
+    expandCollapseActionByKey(key, action) {
+        const primaryKeyField = this.getPrimaryKeyFieldNames()[0];
+        const dataSource = isRemoteData(this) ? this.getCurrentViewRecords() : this.grid.dataSource;
+        if (!isNullOrUndefined(primaryKeyField)) {
+            const rec = dataSource.filter((e) => {
+                return e[primaryKeyField].toString() === key.toString();
+            });
+            if (action === 'Expand') {
+                this.expandAction(rec, key, null);
+            }
+            else {
+                this.collapseAction(rec, key);
+            }
+        }
+    }
+    collapseAction(record, key, isPaging = false) {
+        if (isPaging) {
+            this.collapseRow(null, record);
+        }
+        else {
+            for (let i = 0; i < record.length; i++) {
+                this.collapseRow(null, record[i], key);
             }
         }
         if (!this.grid.contentModule.isDataSourceChanged && this.enableVirtualization && this.getRows()
@@ -6216,6 +6361,9 @@ __decorate([
 __decorate([
     Property(false)
 ], TreeGrid.prototype, "enableAutoFill", void 0);
+__decorate([
+    Property(false)
+], TreeGrid.prototype, "enableAdaptiveUI", void 0);
 __decorate([
     Property(false)
 ], TreeGrid.prototype, "enableImmutableMode", void 0);
@@ -7760,6 +7908,14 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
         return super.getData();
     }
     generateRows(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);
+        }
         const info = this.getDataInfo();
         if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
             if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
@@ -8211,9 +8367,9 @@ class ExcelExport$1 {
         if (excelRow.type === 'excel') {
             const excelrowobj = excelRow.rowObj.data;
             const filtercolumnlength = this.parent.grid.filterSettings.columns.length;
+            const rowlength = excelRow.excelRows.length;
+            const rowlevel = excelrowobj.level;
             if (excelrowobj.parentItem && getParentData(this.parent, excelrowobj.parentItem.uniqueID, Boolean(filtercolumnlength))) {
-                const rowlength = excelRow.excelRows.length;
-                const rowlevel = excelrowobj.level;
                 let expandedStatus = false;
                 let sublevelState = false;
                 const state = getExpandStatus(this.parent, excelrowobj, this.parent.parentData);
@@ -8224,6 +8380,9 @@ class ExcelExport$1 {
                 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 */
@@ -9589,11 +9748,6 @@ class BatchEdit {
         const data = (this.parent.grid.dataSource instanceof DataManager ?
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
         const primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        if (!isNullOrUndefined(this.parent[targetElement])) {
-            const row = this.parent[targetElement].closest('tr');
-            this.parent.collapseRow(row);
-            this.parent[targetElement] = null;
-        }
         if (!isNullOrUndefined(this.batchAddedRecords)) {
             for (let i = 0; i < this.batchAddedRecords.length; i++) {
                 index = data.map((e) => { return e[primaryKey]; }).indexOf(this.batchAddedRecords[i][primaryKey]);
@@ -9613,6 +9767,11 @@ class BatchEdit {
                 }
             }
         }
+        if (!isNullOrUndefined(this.parent[targetElement])) {
+            const row = this.parent[targetElement].closest('tr');
+            this.parent.collapseRow(row);
+            this.parent[targetElement] = null;
+        }
         if (!isNullOrUndefined(this.batchDeletedRecords)) {
             for (let i = 0; i < this.batchDeletedRecords.length; i++) {
                 if (!isNullOrUndefined(this.batchDeletedRecords[i][parentItem])) {
@@ -10579,8 +10738,7 @@ class Edit$1 {
             const 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);
             }
             let index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');
@@ -11084,7 +11242,8 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         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[selectVirtualRow](args);
         }
     }
@@ -11321,6 +11480,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             const 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 {
@@ -11514,7 +11674,10 @@ class VirtualScroll$1 {
             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();
+        }
         const requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
         getValue('grid.renderModule', this.parent).dataManagerSuccess(ret, { requestType: requestType });
     }