@syncfusion/ej2-treegrid 19.4.50 → 19.4.55

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

@@ -2893,6 +2893,11 @@ function updateParentRow(key, record, action, control, isSelfReference, child) {
                 column: control.grid.getColumns()[control.treeColumnIndex],
                 requestType: action
             });
+            if (control.enableImmutableMode && control['action'] === 'indenting' || control['action'] === 'outdenting') {
+                control.renderModule.RowModifier({
+                    data: record, row: row
+                });
+            }
         }
     }
 }
@@ -3613,6 +3618,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         };
         this.grid.rowDeselected = (args) => {
             this.selectedRowIndex = this.grid.selectedRowIndex;
+            if (!isNullOrUndefined(args.data)) {
+                this.notify(rowDeselected, args);
+            }
             this.trigger(rowDeselected, args);
         };
         this.grid.resizeStop = (args) => {
@@ -3927,14 +3935,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     this.grid.query = this.grid.query instanceof Query ? this.grid.query : new Query();
                 }
             }
-            const callBackPromise = new Deferred();
-            this.trigger(actionBegin, args, (actionArgs) => {
-                if (!actionArgs.cancel) {
-                    this.notify(beginEdit, actionArgs);
-                }
-                callBackPromise.resolve(actionArgs);
-            });
-            return callBackPromise;
+            if (this.action !== 'indenting' && this.action !== 'outdenting') {
+                const callBackPromise = new Deferred();
+                this.trigger(actionBegin, args, (actionArgs) => {
+                    if (!actionArgs.cancel) {
+                        this.notify(beginEdit, actionArgs);
+                    }
+                    callBackPromise.resolve(actionArgs);
+                });
+                return callBackPromise;
+            }
         };
         this.grid.actionComplete = (args) => {
             this.notify('actioncomplete', args);
@@ -3954,7 +3964,20 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             if (args.requestType === 'save' && this.aggregates.map((ag) => ag.showChildSummary === true).length) {
                 this.grid.refresh();
             }
-            this.trigger(actionComplete, args);
+            if (this.action === 'indenting' || this.action === 'outdenting') {
+                this.action = this.action === 'indenting' ? 'indented' : 'outdented';
+                const actionArgs = {
+                    requestType: this.action,
+                    data: this.selectedRecords,
+                    row: this.selectedRows
+                };
+                this.trigger(actionComplete, actionArgs);
+                this.action = '';
+                this.selectedRecords = this.selectedRows = [];
+            }
+            else {
+                this.trigger(actionComplete, args);
+            }
         };
     }
     extendedGridEvents() {
@@ -4152,7 +4175,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     case ToolbarItem.RowIndent:
                         tooltipText = this.l10n.getConstant('RowIndent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText,
+                            text: tooltipText, tooltipText: tooltipText, disabled: true,
                             prefixIcon: 'e-indent', id: this.element.id + '_gridcontrol_indent'
                         });
                         break;
@@ -4160,7 +4183,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     case ToolbarItem.RowOutdent:
                         tooltipText = this.l10n.getConstant('RowOutdent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText,
+                            text: tooltipText, tooltipText: tooltipText, disabled: true,
                             prefixIcon: 'e-outdent', id: this.element.id + '_gridcontrol_outdent'
                         });
                         break;
@@ -4758,6 +4781,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         rowData.parentUniqueID = record.parentUniqueID;
         rowData.expanded = record.expanded;
         this.grid.setRowData(key, rowData);
+        const table = this.getContentTable();
+        const sHeight = table.scrollHeight;
+        const clientHeight = this.getContent().clientHeight;
+        this.lastRowBorder(this.getRows()[record.index], sHeight <= clientHeight);
     }
     /**
      * Navigates to the specified target page.
@@ -5513,7 +5540,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         this.isExpandAll = true;
         this.isCollapseAll = true;
-        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization) && !isRemoteData(this)) {
+        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization || this.enableInfiniteScrolling) && !isRemoteData(this)) {
             this.flatData.filter((e) => {
                 if (e.hasChildRecords) {
                     e.expanded = action === 'collapse' ? false : true;
@@ -5572,7 +5599,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (!isNullOrUndefined(row)) {
             row.setAttribute('aria-expanded', action === 'expand' ? 'true' : 'false');
         }
-        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization) && !isRemoteData(this)
+        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization || this.enableInfiniteScrolling) && !isRemoteData(this)
             && !isCountRequired(this)) {
             this.notify(localPagedExpandCollapse, { action: action, row: row, record: record });
         }
@@ -5633,7 +5660,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 let totalRows = this.getRows();
                 const rows = this.getContentTable().rows;
                 totalRows = [].slice.call(rows);
-                for (let i = totalRows.length - 1; i > 0; i--) {
+                for (let i = totalRows.length - 1; i >= 0; i--) {
                     if (!isHidden(totalRows[i])) {
                         const table = this.getContentTable();
                         const sHeight = table.scrollHeight;
@@ -6777,6 +6804,7 @@ class RowDD$1 {
      */
     reorderRows(fromIndexes, toIndex, position) {
         const tObj = this.parent;
+        const action = 'action';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -6803,6 +6831,11 @@ class RowDD$1 {
             if (tObj.isLocalData) {
                 tObj.flatData = this.orderToIndex(tObj.flatData);
             }
+            if (this.parent[action] === 'outdenting') {
+                if (!isNullOrUndefined(data[0].parentItem)) {
+                    data[0].level = data[0].parentItem.level + 1;
+                }
+            }
             this.parent.grid.refresh();
             if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
                 const index = this.parent.treeColumnIndex + 1;
@@ -6823,6 +6856,11 @@ class RowDD$1 {
                         column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
                         requestType: 'rowDragAndDrop'
                     });
+                    if (this.parent[action] === 'indenting' || this.parent[action] === 'outdenting') {
+                        this.parent.renderModule.RowModifier({
+                            data: totalRecord[i], row: rows[i]
+                        });
+                    }
                 }
             }
         }
@@ -8781,6 +8819,7 @@ class Toolbar$1 {
      */
     addEventListener() {
         this.parent.on(rowSelected, this.refreshToolbar, this);
+        this.parent.on(rowDeselected, this.refreshToolbar, this);
         this.parent.on(toolbarClick, this.toolbarClickHandler, this);
     }
     /**
@@ -8792,6 +8831,7 @@ class Toolbar$1 {
             return;
         }
         this.parent.off(rowSelected, this.refreshToolbar);
+        this.parent.off(rowDeselected, this.refreshToolbar);
         this.parent.off(toolbarClick, this.toolbarClickHandler);
     }
     refreshToolbar(args) {
@@ -8799,7 +8839,7 @@ class Toolbar$1 {
         if (args.row.rowIndex === 0 || tObj.getSelectedRecords().length > 1) {
             this.enableItems([tObj.element.id + '_gridcontrol_indent', tObj.element.id + '_gridcontrol_outdent'], false);
         }
-        else {
+        else if (args['name'] !== "rowDeselected") {
             if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex])) {
                 if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex]) &&
                     (tObj.getCurrentViewRecords()[args.row.rowIndex].level >
@@ -8821,12 +8861,21 @@ class Toolbar$1 {
                 }
             }
         }
+        if (args['name'] === "rowDeselected") {
+            if (this.parent.toolbar['includes']('Indent')) {
+                this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
+            }
+            if (this.parent.toolbar['includes']('Outdent')) {
+                this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
+            }
+        }
         if (args.row.rowIndex === 0 && !isNullOrUndefined(args.data.parentItem)) {
             this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
         }
     }
     toolbarClickHandler(args) {
         const tObj = this.parent;
+        const action = 'action';
         if (this.parent.editSettings.mode === 'Cell' && this.parent.grid.editSettings.mode === 'Batch' &&
             args.item.id === this.parent.grid.element.id + '_update') {
             args.cancel = true;
@@ -8851,10 +8900,10 @@ class Toolbar$1 {
             else {
                 dropIndex = tObj.getSelectedRowIndexes()[0] - 1;
             }
-            tObj.reorderRows([tObj.getSelectedRowIndexes()[0]], dropIndex, 'child');
+            this.parent[action] = 'indenting';
+            this.eventTrigger('indenting', dropIndex);
         }
         if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length) {
-            const index = tObj.getSelectedRowIndexes()[0];
             let dropIndex;
             const parentItem = tObj.getSelectedRecords()[0].parentItem;
             for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
@@ -8862,9 +8911,32 @@ class Toolbar$1 {
                     dropIndex = i;
                 }
             }
-            tObj.reorderRows([index], dropIndex, 'below');
+            this.parent[action] = 'outdenting';
+            this.eventTrigger('outdenting', dropIndex);
         }
     }
+    eventTrigger(action, dropIndex) {
+        const selectedRecords = 'selectedRecords';
+        const selectedRows = 'selectedRows';
+        this.parent[selectedRows] = this.parent.getSelectedRows();
+        this.parent[selectedRecords] = this.parent.getSelectedRecords();
+        const actionArgs = {
+            requestType: action,
+            data: this.parent.getSelectedRecords(),
+            row: this.parent.getSelectedRows(),
+            cancel: false
+        };
+        this.parent.trigger(actionBegin, actionArgs, (actionArgs) => {
+            if (!actionArgs.cancel) {
+                if (actionArgs.requestType === 'indenting') {
+                    this.parent.reorderRows([this.parent.getSelectedRowIndexes()[0]], dropIndex, 'child');
+                }
+                else if (actionArgs.requestType === 'outdenting') {
+                    this.parent.reorderRows([this.parent.getSelectedRowIndexes()[0]], dropIndex, 'below');
+                }
+            }
+        });
+    }
     /**
      * Gets the toolbar of the TreeGrid.
      *
@@ -11986,6 +12058,7 @@ class InfiniteScroll$1 {
         this.parent.grid.on('infinite-edit-handler', this.infiniteEditHandler, this);
         this.parent.grid.on('infinite-crud-cancel', this.createRows, this);
         this.parent.grid.on('content-ready', this.contentready, this);
+        this.parent.on(localPagedExpandCollapse, this.collapseExpandInfinitechilds, this);
     }
     /**
      * @hidden
@@ -12001,6 +12074,7 @@ class InfiniteScroll$1 {
         this.parent.off(pagingActions, this.infinitePageAction);
         this.parent.grid.off('infinite-crud-cancel', this.createRows);
         this.parent.grid.off('content-ready', this.contentready);
+        this.parent.off(localPagedExpandCollapse, this.collapseExpandInfinitechilds);
     }
     /**
      * Handles the Expand Collapse action for Remote data with infinite scrolling.
@@ -12050,6 +12124,18 @@ class InfiniteScroll$1 {
             }
         }
     }
+    collapseExpandInfinitechilds(row) {
+        row.record.expanded = row.action === 'collapse' ? false : true;
+        const ret = {
+            result: this.parent.flatData,
+            row: row.row,
+            action: row.action,
+            record: row.record,
+            count: this.parent.flatData.length
+        };
+        const requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
+        getValue('grid.renderModule', this.parent).dataManagerSuccess(ret, { requestType: requestType });
+    }
     /**
      * Handles the page query for Data operations and CRUD actions.
      *
@@ -12062,7 +12148,10 @@ class InfiniteScroll$1 {
     infinitePageAction(pageingDetails) {
         const dm = new DataManager(pageingDetails.result);
         const expanded$$1 = new Predicate('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
-        const visualData = dm.executeLocal(new Query().where(expanded$$1));
+        const infiniteParents = dm.executeLocal(new Query().where(expanded$$1));
+        const visualData = infiniteParents.filter((e) => {
+            return getExpandStatus(this.parent, e, infiniteParents);
+        });
         const actionArgs = getValue('actionArgs', pageingDetails.actionArgs);
         const actions = getValue('actions', this.parent.grid.infiniteScrollModule);
         const initial = actions.some((value) => { return value === actionArgs.requestType; });
@@ -12078,10 +12167,10 @@ class InfiniteScroll$1 {
             if (isCache && this.parent.infiniteScrollSettings.initialBlocks > this.parent.infiniteScrollSettings.maxBlocks) {
                 this.parent.infiniteScrollSettings.initialBlocks = this.parent.infiniteScrollSettings.maxBlocks;
             }
-            const size = initialRender ?
+            let size = initialRender ?
                 this.parent.pageSettings.pageSize * this.parent.infiniteScrollSettings.initialBlocks :
                 this.parent.pageSettings.pageSize;
-            const current = this.parent.grid.pageSettings.currentPage;
+            let current = this.parent.grid.pageSettings.currentPage;
             if (!isNullOrUndefined(actionArgs)) {
                 const lastIndex = getValue('lastIndex', this.parent.grid.infiniteScrollModule);
                 const firstIndex = getValue('firstIndex', this.parent.grid.infiniteScrollModule);
@@ -12096,6 +12185,10 @@ class InfiniteScroll$1 {
                     query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
                 }
                 else {
+                    if ((pageingDetails.actionArgs['action'] === 'expand' || pageingDetails.actionArgs['action'] === 'collapse') && this.parent.grid.pageSettings.currentPage !== 1) {
+                        current = 1;
+                        size = this.parent.pageSettings.pageSize * this.parent.grid.pageSettings.currentPage;
+                    }
                     query = query.page(current, size);
                 }
             }