@syncfusion/ej2-treegrid 20.1.48 → 20.1.55

package/src/treegrid/base/treegrid.js

@@ -38,7 +38,6 @@ import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenReco
 import { Grid, Logger } from '@syncfusion/ej2-grids';
 import { Render } from '../renderer/render';
 import { DataManipulation } from './data';
-import { RowDD } from '../actions/rowdragdrop';
 import { iterateArrayOrObject } from '@syncfusion/ej2-grids';
 import { ToolbarItem, ContextMenuItems } from '../enum';
 import { PageSettings } from '../models/page-settings';
@@ -68,6 +67,9 @@ var TreeGrid = /** @class */ (function (_super) {
         _this.changedRecords = 'changedRecords';
         _this.deletedRecords = 'deletedRecords';
         _this.addedRecords = 'addedRecords';
+        _this.indentOutdentAction = 'indentOutdentAction';
+        _this.modifiedRecords = [];
+        _this.stackedHeader = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -476,14 +478,14 @@ var TreeGrid = /** @class */ (function (_super) {
         return modules;
     };
     TreeGrid.prototype.extendRequiredModules = function (modules) {
-        if (this.allowRowDragAndDrop) {
-            modules.push({
-                member: 'rowDragAndDrop',
-                args: [this]
-            });
-        }
-        if (!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') || this.toolbar['includes']('Outdent'))) {
-            TreeGrid_1.Inject(RowDD);
+        var IsRowDDInjected = this.injectedModules.filter(function (e) {
+            return e.name === 'RowDD';
+        });
+        if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
+            if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
+                this.toolbar['includes']('Outdent')))) {
+                this.isIndentEnabled = true;
+            }
             modules.push({
                 member: 'rowDragAndDrop',
                 args: [this]
@@ -612,6 +614,9 @@ var TreeGrid = /** @class */ (function (_super) {
         var root = 'root';
         this.grid[root] = this[root] ? this[root] : this;
         this.grid.appendTo(gridContainer);
+        if (this.isIndentEnabled) {
+            this.refreshToolbarItems();
+        }
         this.wireEvents();
         this.renderComplete();
         var destroyTemplate = 'destroyTemplate';
@@ -625,6 +630,15 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         };
     };
+    TreeGrid.prototype.refreshToolbarItems = function () {
+        var toolbarElement = this.toolbarModule.getToolbar();
+        var indentID = this.element.id + '_gridcontrol_indent';
+        var outdentID = this.element.id + '_gridcontrol_outdent';
+        var indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+        var outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+        indentElement.classList.add('e-hidden');
+        outdentElement.classList.add('e-hidden');
+    };
     TreeGrid.prototype.afterGridRender = function () {
         if (!isNullOrUndefined(this.grid.clipboardModule)) {
             this.grid.clipboardModule.destroy();
@@ -1104,14 +1118,24 @@ var TreeGrid = /** @class */ (function (_super) {
             }
             if (_this.action === 'indenting' || _this.action === 'outdenting') {
                 _this.action = _this.action === 'indenting' ? 'indented' : 'outdented';
+                var selectedItem_1 = [_this.selectedRecords];
                 var actionArgs = {
+                    data: selectedItem_1,
+                    dropIndex: _this.dropIndex,
+                    dropPosition: _this.dropPosition,
+                    modifiedRecords: _this.modifiedRecords,
                     requestType: _this.action,
-                    data: _this.selectedRecords,
                     row: _this.selectedRows
                 };
                 _this.trigger(events.actionComplete, actionArgs);
+                var currentPageItem = _this.getCurrentViewRecords().filter(function (e) {
+                    return e.uniqueID === selectedItem_1[0].uniqueID;
+                });
+                if (!currentPageItem.length) {
+                    _this.refreshToolbarItems();
+                }
                 _this.action = '';
-                _this.selectedRecords = _this.selectedRows = [];
+                _this.selectedRecords = _this.selectedRows = _this.modifiedRecords = [];
             }
             else {
                 _this.trigger(events.actionComplete, args);
@@ -1315,7 +1339,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     case ToolbarItem.RowIndent:
                         tooltipText = this.l10n.getConstant('RowIndent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-indent', id: this.element.id + '_gridcontrol_indent'
                         });
                         break;
@@ -1323,7 +1347,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     case ToolbarItem.RowOutdent:
                         tooltipText = this.l10n.getConstant('RowOutdent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-outdent', id: this.element.id + '_gridcontrol_outdent'
                         });
                         break;
@@ -2004,6 +2028,10 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.getColumnByUid = function (uid) {
         var Columns = this.initialRender ? this.grid.columns : this.columns;
+        var columnModel = 'columnModel';
+        if (this.grid.columns.length !== this.columnModel.length) {
+            Columns = this.grid[columnModel];
+        }
         return iterateArrayOrObject(Columns, function (item) {
             if (item.uid === uid) {
                 return item;
@@ -2131,7 +2159,6 @@ var TreeGrid = /** @class */ (function (_super) {
             temp = this.columnModel[this.treeColumnIndex].template;
             field = this.columnModel[this.treeColumnIndex].field;
         }
-        var stackedHeader = false;
         var gridColumn;
         if (!this.enableColumnVirtualization || (this.enableColumnVirtualization && this.columnModel.length === gridColumns.length)) {
             this.columnModel = [];
@@ -2150,9 +2177,9 @@ var TreeGrid = /** @class */ (function (_super) {
         var merge = 'deepMerge';
         this[merge] = ['columns']; // Workaround for blazor updateModel
         if (this.grid.columns.length !== this.columnModel.length) {
-            stackedHeader = true;
+            this.stackedHeader = true;
         }
-        if (!stackedHeader) {
+        if (!this.stackedHeader) {
             this.setProperties({ columns: this.columnModel }, true);
         }
         this[merge] = undefined; // Workaround for blazor updateModel
@@ -3463,6 +3490,30 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.reorderRows = function (fromIndexes, toIndex, position) {
         this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
     };
+    /**
+     * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
+     *
+     * @param {Object} record – specifies the record to do indented
+     * @returns {void}
+     */
+    TreeGrid.prototype.indent = function (record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'indent');
+        }
+    };
+    /**
+     * Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
+     *
+     * @param {Object} record – specifies the record to do outdented
+     * @returns {void}
+     */
+    TreeGrid.prototype.outdent = function (record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'outdent');
+        }
+    };
     var TreeGrid_1;
     __decorate([
         Property(0)

package/src/treegrid/models/column.d.ts

@@ -326,7 +326,16 @@ export declare class Column {
      * @default null
      */
     freeze: freezeDirection;
+    private parent;
     constructor(options: ColumnModel);
+    /**
+    * Update the State changes reflected for TreeGrid columndirective in react platform.
+    *
+    * @param {Column} column - specifies the column
+    * @returns {void}
+    * @hidden
+    */
+    private setProperties;
 }
 /**
  * Interface for a TreeGrid class Column

package/src/treegrid/models/column.js

@@ -71,6 +71,25 @@ var Column = /** @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'].renderModule[refreshReactColumnTemplateByUid](this.uid);
+            }
+        }
+    };
     return Column;
 }());
 export { Column };

package/src/treegrid/models/rowdrop-settings.d.ts

@@ -13,7 +13,15 @@ export declare class RowDropSettings extends ChildProperty<RowDropSettings> {
 }
 export interface TreeActionEventArgs {
     requestType?: string;
-    data?: ITreeData[];
+    data?: ITreeData | ITreeData[];
     row?: Object[];
     cancel?: boolean;
+    /** Defines the corresponding action */
+    action?: string;
+    /** Defines the target element from index. */
+    dropIndex?: number;
+    /** Defines drop position of the dragged record */
+    dropPosition?: string;
+    /** Defines the modified records. */
+    modifiedRecords?: ITreeData[];
 }

package/src/treegrid/renderer/render.d.ts

@@ -29,6 +29,12 @@ export declare class Render {
      */
     cellRender(args: QueryCellInfoEventArgs): void;
     private updateTreeCell;
+    /**
+    * @param {string} columnUid - Defines column uid
+    * @returns {void}
+    * @hidden
+    */
+    private refreshReactColumnTemplateByUid;
     private columnTemplateResult;
     private reactTemplateRender;
     destroy(): void;

package/src/treegrid/renderer/render.js

@@ -1,5 +1,5 @@
 import { getObject, appendChildren } from '@syncfusion/ej2-grids';
-import { templateCompiler, extend } from '@syncfusion/ej2-grids';
+import { templateCompiler, extend, CellRenderer } from '@syncfusion/ej2-grids';
 import { addClass, createElement, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import { isRemoteData, isOffline, getExpandStatus, isFilterChildHierarchy } from '../utils';
@@ -275,6 +275,32 @@ var Render = /** @class */ (function () {
             args.cell.innerHTML = '';
         }
     };
+    /**
+    * @param {string} columnUid - Defines column uid
+    * @returns {void}
+    * @hidden
+    */
+    Render.prototype.refreshReactColumnTemplateByUid = function (columnUid) {
+        var _this = this;
+        if (this.parent.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.parent.clearTemplate(['columnTemplate'], undefined, function () {
+                var cells = 'cells';
+                var rowIdx = 'index';
+                var rowsObj = _this.parent.grid.getRowsObject();
+                var indent = _this.parent.grid.getIndentCount();
+                var cellIndex = _this.parent.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.parent.grid, _this.parent.grid.serviceLocator);
+                        var td = _this.parent.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                    }
+                }
+            });
+        }
+    };
     Render.prototype.columnTemplateResult = function (args) {
         this.templateResult = args.template;
     };

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -126,7 +126,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
                 }
             }
-            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || this.isDataSourceChanged) {
+            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || (this.isDataSourceChanged && this.startIndex === -1)) {
                 this.contents.scrollTop = 0;
                 this.isDataSourceChanged = false;
             }