@syncfusion/ej2-treegrid 19.3.53 → 19.4.40

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) {
@@ -2165,7 +2184,9 @@ class DataManipulation {
             const query = getObject('query', args);
             const srtQry = new Query();
             for (let srt = this.parent.grid.sortSettings.columns.length - 1; srt >= 0; srt--) {
-                const col = this.parent.grid.getColumnByField(this.parent.grid.sortSettings.columns[srt].field);
+                const getColumnByField = 'getColumnByField';
+                const col = this.parent.grid.renderModule.data[getColumnByField](this.parent.grid.
+                    sortSettings.columns[srt].field);
                 const compFun = col.sortComparer && isOffline(this.parent) ?
                     col.sortComparer.bind(col) :
                     this.parent.grid.sortSettings.columns[srt].direction;
@@ -3525,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);
@@ -3569,6 +3591,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             this.trigger(rowSelecting, args);
         };
         this.grid.rowSelected = (args) => {
+            if (this.enableVirtualization && args.isHeaderCheckboxClicked &&
+                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) {
+                        this.grid.selectionModule[updateRowSelection](this.getRows()[i], this.getCurrentViewRecords()[i].index);
+                    }
+                }
+            }
             this.selectedRowIndex = this.grid.selectedRowIndex;
             this.notify(rowSelected, args);
             this.trigger(rowSelected, args);
@@ -3872,8 +3903,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();
@@ -4317,6 +4351,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;
@@ -4444,7 +4481,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];
             }
         }
@@ -4912,6 +4949,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.
      *
@@ -5180,9 +5242,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);
@@ -5191,6 +5255,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 };
@@ -5200,6 +5267,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) {
@@ -5223,13 +5303,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)) {
@@ -5260,22 +5344,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 (record[i].parentItem !== undefined) {
-                    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) {
@@ -5303,14 +5418,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()
@@ -6205,6 +6351,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);
@@ -7749,6 +7898,12 @@ 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') {
@@ -9578,11 +9733,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]);
@@ -9602,6 +9752,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])) {
@@ -10476,13 +10631,23 @@ class Edit$1 {
         }
         if (args.requestType === 'delete') {
             const data = args.data;
+            if (isNullOrUndefined(args.data[0].uniqueID)) {
+                const primaryKeys = this.parent.getPrimaryKeyFieldNames();
+                for (let i = 0; i < data.length; i++) {
+                    this.parent.flatData.filter((e) => {
+                        if (e[primaryKeys[0]] === args.data[i][primaryKeys[0]]) {
+                            data[i] = e;
+                        }
+                    });
+                }
+            }
             for (let i = 0; i < data.length; i++) {
                 this.deleteUniqueID(data[i].uniqueID);
                 const childs = findChildrenRecords(data[i]);
                 for (let c = 0; c < childs.length; c++) {
                     this.deleteUniqueID(childs[c].uniqueID);
                 }
-                args.data = [...data, ...childs];
+                args.data = [...args.data, ...childs];
             }
         }
         if (args.requestType === 'add' || (this.isAddedRowByMethod && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling))) {
@@ -10527,6 +10692,7 @@ class Edit$1 {
         }
         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])) {
@@ -10555,6 +10721,10 @@ class Edit$1 {
             let position = null;
             value.taskData = isNullOrUndefined(value.taskData) ? extend({}, args.data) : value.taskData;
             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'), 10);
+            }
             let index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');
             setValue('uniqueIDCollection.' + value.uniqueID, value, this.parent);
@@ -11057,7 +11227,10 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         if (isNullOrUndefined(this.observer[containerRect])) {
             this.observer[containerRect] = this.observers[containerRect];
         }
-        super[selectVirtualRow](args);
+        if (isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule) || args.selectedIndex !== 0 ||
+            isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
+            super[selectVirtualRow](args);
+        }
     }
     refreshCell(rowObj) {
         rowObj.cells = this.generateCells();
@@ -11523,6 +11696,11 @@ class VirtualScroll$1 {
             }
             //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)) {
                 const resourceCount = this.parent.getRows();
                 let sIndex = visualData.indexOf(this.expandCollapseRec);