@syncfusion/ej2-treegrid 20.1.55 → 20.1.60

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

@@ -77,12 +77,12 @@ class Column {
         merge(this, options);
     }
     /**
-    * Update the State changes reflected for TreeGrid columndirective in react platform.
-    *
-    * @param {Column} column - specifies the column
-    * @returns {void}
-    * @hidden
-    */
+     * 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);
@@ -884,7 +884,7 @@ class Selection {
     getCheckboxcolumnIndex() {
         let mappingUid;
         let columnIndex;
-        const stackedHeader = "stackedHeader";
+        const stackedHeader = 'stackedHeader';
         const columnModel = 'columnModel';
         const columns = this.parent[stackedHeader] ? this.parent[columnModel] : (this.parent.columns);
         for (let col = 0; col < columns.length; col++) {
@@ -1271,6 +1271,100 @@ class Selection {
     }
 }
 
+/**
+ * TreeGrid Freeze module
+ *
+ * @hidden
+ */
+class Freeze$1 {
+    /**
+     * Constructor for render module
+     *
+     * @param {TreeGrid} parent - Tree Grid instance
+     */
+    constructor(parent) {
+        Grid.Inject(Freeze);
+        this.parent = parent;
+        this.addEventListener();
+    }
+    addEventListener() {
+        this.parent.on('rowExpandCollapse', this.rowExpandCollapse, this);
+        this.parent.on('dataBoundArg', this.dataBoundArg, this);
+        this.parent.grid.on('dblclick', this.dblClickHandler, this);
+    }
+    removeEventListener() {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.off('rowExpandCollapse', this.rowExpandCollapse);
+        this.parent.off('dataBoundArg', this.dataBoundArg);
+        this.parent.grid.off('dblclick', this.dblClickHandler);
+    }
+    rowExpandCollapse(args) {
+        const movableRows = this.parent.getMovableDataRows();
+        const frozenrows = this.parent.getRows();
+        let rows;
+        let frozenRightRows;
+        const freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
+            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
+        if (freeze) {
+            frozenRightRows = this.parent.getFrozenRightRows().filter((e) => e.querySelector('.e-gridrowindex' + args.record.index + 'level' + (args.record.level + 1)));
+        }
+        if (!args.detailrows.length) {
+            rows = movableRows.filter((e) => e.querySelector('.e-gridrowindex' + args.record.index + 'level' + (args.record.level + 1)));
+        }
+        else {
+            rows = args.detailrows;
+        }
+        for (let i = 0; i < rows.length; i++) {
+            const rData = this.parent.grid.getRowObjectFromUID(rows[i].getAttribute('data-Uid')).data;
+            rows[i].style.display = args.action;
+            if (freeze) {
+                frozenRightRows[i].style.display = args.action;
+            }
+            const queryselector = args.action === 'none' ? '.e-treecolumn-container .e-treegridcollapse'
+                : '.e-treecolumn-container .e-treegridexpand';
+            if (frozenrows[rows[i].rowIndex].querySelector(queryselector)) {
+                const cRow = [];
+                for (let i = 0; i < movableRows.length; i++) {
+                    if (movableRows[i].querySelector('.e-gridrowindex' + rData.index + 'level' + (rData.level + 1))) {
+                        cRow.push(movableRows[i]);
+                    }
+                }
+                if (cRow.length) {
+                    this.rowExpandCollapse({ detailrows: cRow, action: args.action });
+                }
+            }
+        }
+    }
+    dblClickHandler(e) {
+        if (parentsUntil(e.target, 'e-rowcell') &&
+            this.parent.grid.editSettings.allowEditOnDblClick && this.parent.editSettings.mode !== 'Cell') {
+            this.parent.grid.editModule.startEdit(parentsUntil(e.target, 'e-row'));
+        }
+    }
+    dataBoundArg() {
+        const checkboxColumn = this.parent.getColumns().filter((e) => {
+            return e.showCheckbox;
+        });
+        if (checkboxColumn.length && this.parent.freezeModule && this.parent.initialRender) {
+            addClass([this.parent.element.getElementsByClassName('e-grid')[0]], 'e-checkselection');
+        }
+    }
+    destroy() {
+        this.removeEventListener();
+    }
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @private
+     * @returns {string} Returns Freeze module name
+     */
+    getModuleName() {
+        return 'freeze';
+    }
+}
+
 /**
  * TreeGrid Print module
  *
@@ -1661,10 +1755,10 @@ class Render {
         }
     }
     /**
-    * @param {string} columnUid - Defines column uid
-    * @returns {void}
-    * @hidden
-    */
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
     refreshReactColumnTemplateByUid(columnUid) {
         if (this.parent.isReact) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1680,6 +1774,8 @@ class Render {
                         const cellRenderer = new CellRenderer(this.parent.grid, this.parent.grid.serviceLocator);
                         const td = this.parent.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
                         cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                        const treecell = this.parent.getRows()[j].cells[cellIndex];
+                        this.cellRender({ data: rowsObj[j].data, cell: treecell, column: cell.column });
                     }
                 }
             });
@@ -2335,6 +2431,8 @@ var ContextMenuItems;
     ContextMenuItems[ContextMenuItems["LastPage"] = 13] = "LastPage";
     ContextMenuItems[ContextMenuItems["NextPage"] = 14] = "NextPage";
     ContextMenuItems[ContextMenuItems["AddRow"] = 15] = "AddRow";
+    ContextMenuItems[ContextMenuItems["RowIndent"] = 16] = "RowIndent";
+    ContextMenuItems[ContextMenuItems["RowOutdent"] = 17] = "RowOutdent";
 })(ContextMenuItems || (ContextMenuItems = {}));
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3315,6 +3413,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     requiredModules() {
         const modules = [];
         const splitFrozenCount = 'splitFrozenCount';
+        this.freezeModule = new Freeze$1(this);
         this.grid[splitFrozenCount](this.getGridColumns(this.columns));
         if (this.isDestroyed) {
             return modules;
@@ -3366,7 +3465,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             });
         }
         if (this.frozenColumns || this.frozenRows || this.getFrozenColumns() ||
-            this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount()) {
+            this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount() || this.freezeModule) {
             modules.push({
                 member: 'freeze', args: [this]
             });
@@ -3396,7 +3495,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     extendRequiredModules(modules) {
         const IsRowDDInjected = this.injectedModules.filter((e) => {
-            return e.name === 'RowDD';
+            return e.prototype.getModuleName() === 'rowDragAndDrop';
         });
         if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
             if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
@@ -4199,6 +4298,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                             target: '.e-content', id: this.element.id + '_gridcontrol_cmenu_AddRow',
                             items: [{ text: this.l10n.getConstant('Above'), id: 'Above' }, { text: this.l10n.getConstant('Below'), id: 'Below' }, { text: this.l10n.getConstant('Child'), id: 'Child' }] });
                         break;
+                    case 'Indent':
+                    case ContextMenuItems.RowIndent:
+                        items.push({ text: this.l10n.getConstant('RowIndent'),
+                            target: '.e-content', iconCss: 'e-indent e-icons', id: this.element.id + '_gridcontrol_cmenu_Indent' });
+                        break;
+                    case 'Outdent':
+                    case ContextMenuItems.RowOutdent:
+                        items.push({ text: this.l10n.getConstant('RowOutdent'),
+                            target: '.e-content', iconCss: 'e-outdent e-icons', id: this.element.id + '_gridcontrol_cmenu_Outdent' });
+                        break;
                     default:
                         items.push(this.contextMenuItems[i]);
                 }
@@ -4217,6 +4326,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      */
     getGridToolbar() {
         if (this.toolbar) {
+            this.l10n = new L10n('treegrid', this.defaultLocale, this.locale);
             const items = [];
             let tooltipText;
             for (let i = 0; i < this.toolbar.length; i++) {
@@ -4295,6 +4405,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                         gridColumn[prop] = this.getGridColumns(column[i][prop], false, index);
                         treeGridColumn[prop] = column[i][prop];
                     }
+                    else if (this.initialRender && !isNullOrUndefined(treeColumn) && this.enablePersistence && prop === 'edit') {
+                        gridColumn[prop] = treeGridColumn[prop] = treeColumn[prop];
+                    }
                     else if (!(treeColumn) || prop !== 'sortComparer') {
                         gridColumn[prop] = treeGridColumn[prop] = column[i][prop];
                     }
@@ -4458,6 +4571,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     break;
                 case 'locale':
                     this.grid.locale = this.locale;
+                    this.TreeGridLocale();
+                    this.grid.toolbar = this.getGridToolbar();
+                    this.grid.contextMenuItems = this.getContextMenu();
                     break;
                 case 'selectedRowIndex':
                     this.grid.selectedRowIndex = this.selectedRowIndex;
@@ -7730,8 +7846,8 @@ class RowDD$1 {
         if (this.dropPosition === 'bottomSegment') {
             const primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
             const rowIndex = selectedItemIndex === -1 ?
-                (this.parent.grid.getRowIndexByPrimaryKey(data[0][primaryKeyField])) - 1
-                : this.parent.getSelectedRowIndexes()[0] - 1;
+                (this.parent.grid.getRowIndexByPrimaryKey(data[0][primaryKeyField]))
+                : this.parent.getSelectedRowIndexes()[0];
             const selectedRecord = this.parent.getCurrentViewRecords()[rowIndex];
             this.droppedRecord = getParentData(this.parent, selectedRecord.parentItem.uniqueID);
         }
@@ -9040,6 +9156,16 @@ class Page$1 {
         }
         return newResults;
     }
+    updatePageSize(pageingDetails) {
+        const updateSize = pageingDetails.result.length;
+        const gridPagerModule = this.parent.grid.pagerModule;
+        if (this.parent.pageSettings.pageSizes === true) {
+            if (gridPagerModule.pagerObj.pagerdropdownModule['dropDownListObject'].value === gridPagerModule.pagerObj.getLocalizedLabel('All')) {
+                gridPagerModule['pagerObj'].totalRecordsCount = updateSize;
+                this.parent.grid.pageSettings.pageSize = updateSize;
+            }
+        }
+    }
     pageAction(pageingDetails) {
         const dm = new DataManager(pageingDetails.result);
         if (this.parent.pageSettings.pageSizeMode === 'Root') {
@@ -9075,6 +9201,7 @@ class Page$1 {
             pageingDetails.count = visualData.length;
             let query = new Query();
             const size = this.parent.grid.pageSettings.pageSize;
+            this.updatePageSize(pageingDetails);
             let current = this.parent.grid.pageSettings.currentPage;
             if (visualData.length < (current * size)) {
                 current = (Math.floor(visualData.length / size)) + ((visualData.length % size) ? 1 : 0);
@@ -9653,6 +9780,8 @@ class ContextMenu$1 {
     contextMenuOpen(args) {
         const addRow = select('#' + this.parent.element.id + '_gridcontrol_cmenu_AddRow', args.element);
         const editRecord = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Edit', args.element);
+        const indent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Indent', args.element);
+        const outdent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Outdent', args.element);
         if (addRow) {
             if (this.parent.grid.editSettings.allowAdding === false) {
                 addRow.style.display = 'none';
@@ -9665,6 +9794,47 @@ class ContextMenu$1 {
             && !(isNullOrUndefined(editRecord)) && !(editRecord.classList.contains('e-menu-hide'))) {
             editRecord.style.display = 'none';
         }
+        if (indent || outdent) {
+            const tObj = this.parent;
+            const selectedrow = tObj.getSelectedRows()[0];
+            const targetElement = args.event.target.closest('td');
+            if (isNullOrUndefined(targetElement) || (!isNullOrUndefined(targetElement) && !targetElement.classList.contains('e-rowcell'))) {
+                indent.style.display = outdent.style.display = 'none';
+            }
+            else {
+                if (selectedrow.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
+                    indent.style.display = outdent.style.display = 'none';
+                }
+                else if (args['name'] !== 'rowDeselected' || (!isNullOrUndefined(selectedrow) && tObj.grid.isCheckBoxSelection)) {
+                    const selectedItem = tObj.getCurrentViewRecords()[selectedrow.rowIndex];
+                    if (!isNullOrUndefined(selectedItem)) {
+                        if ((selectedItem.level > tObj.getCurrentViewRecords()[selectedrow.rowIndex - 1].level)) {
+                            indent.style.display = 'none';
+                        }
+                        else {
+                            indent.style.display = 'block';
+                        }
+                        if (selectedItem.level === tObj.getCurrentViewRecords()[selectedrow.rowIndex - 1].level) {
+                            indent.style.display = 'block';
+                        }
+                        if (selectedItem.level === 0) {
+                            outdent.style.display = 'none';
+                        }
+                        if (selectedItem.level !== 0) {
+                            outdent.style.display = 'block';
+                        }
+                    }
+                }
+                if (args['name'] === 'rowDeselected' && isNullOrUndefined(selectedrow) && !tObj.grid.isCheckBoxSelection) {
+                    if (this.parent.toolbar['includes']('Indent')) {
+                        indent.style.display = 'none';
+                    }
+                    if (this.parent.toolbar['includes']('Outdent')) {
+                        outdent.style.display = 'none';
+                    }
+                }
+            }
+        }
     }
     contextMenuClick(args) {
         if (args.item.id === 'Above' || args.item.id === 'Below' || args.item.id === 'Child') {
@@ -9672,6 +9842,13 @@ class ContextMenu$1 {
             this.parent.setProperties({ editSettings: { newRowPosition: args.item.id } }, true);
             this.parent.addRecord();
         }
+        if (args.item.id === this.parent.element.id + '_gridcontrol_cmenu_Indent' || args.item.id === this.parent.element.id + '_gridcontrol_cmenu_Outdent') {
+            if (!isNullOrUndefined(this.parent.rowDragAndDropModule)) {
+                const indentOutdentAction = 'indentOutdentAction';
+                const action = args.item.id === this.parent.element.id + '_gridcontrol_cmenu_Indent' ? 'indent' : 'outdent';
+                this.parent.rowDragAndDropModule[indentOutdentAction](null, action);
+            }
+        }
     }
     /**
      * For internal use only - Get the module name.
@@ -10842,11 +11019,13 @@ class Edit$1 {
     updateIndex(data, rows, records) {
         for (let j = 0; j < this.parent.getDataRows().length; j++) {
             const data1 = records[j];
-            const index = getValue('uniqueIDCollection.' + data1.uniqueID + '.index', this.parent);
-            data1.index = index;
-            if (!isNullOrUndefined(data1.parentItem)) {
-                const parentIndex = getValue('uniqueIDCollection.' + data1.parentItem.uniqueID + '.index', this.parent);
-                data1.parentItem.index = parentIndex;
+            if (!isNullOrUndefined(data1)) {
+                const index = getValue('uniqueIDCollection.' + data1.uniqueID + '.index', this.parent);
+                data1.index = index;
+                if (!isNullOrUndefined(data1.parentItem)) {
+                    const parentIndex = getValue('uniqueIDCollection.' + data1.parentItem.uniqueID + '.index', this.parent);
+                    data1.parentItem.index = parentIndex;
+                }
             }
         }
         let count = -1;
@@ -10865,32 +11044,34 @@ class Edit$1 {
                 count++;
             }
             const data2 = records[count];
-            let index = data2.index;
-            const level = data2.level;
-            const row = rows[k];
-            if (!isNullOrUndefined(data2.parentItem)) {
-                index = getValue('uniqueIDCollection.' + data2.parentItem.uniqueID + '.index', this.parent);
-            }
-            const treecell = row.cells[treeColIndex];
-            if (!isNullOrUndefined(treecell)) {
-                for (let l = 0; l < treecell.classList.length; l++) {
-                    const value = treecell.classList[l];
-                    const remove$$1 = /e-gridrowindex/i;
-                    const removed = /e-griddetailrowindex/i;
-                    const result = value.match(remove$$1);
-                    const results = value.match(removed);
-                    if (result != null) {
-                        removeClass([treecell], value);
-                    }
-                    if (results != null) {
-                        removeClass([treecell], value);
-                    }
-                }
-                if (!rows[k].classList.contains('e-detailrow')) {
-                    addClass([treecell], 'e-gridrowindex' + index + 'level' + level);
-                }
-                else {
-                    addClass([treecell], 'e-griddetailrowindex' + index + 'level' + level);
+            if (!isNullOrUndefined(data2)) {
+                let index = data2.index;
+                const level = data2.level;
+                const row = rows[k];
+                if (!isNullOrUndefined(data2.parentItem)) {
+                    index = getValue('uniqueIDCollection.' + data2.parentItem.uniqueID + '.index', this.parent);
+                }
+                const treecell = row.cells[treeColIndex];
+                if (!isNullOrUndefined(treecell)) {
+                    for (let l = 0; l < treecell.classList.length; l++) {
+                        const value = treecell.classList[l];
+                        const remove$$1 = /e-gridrowindex/i;
+                        const removed = /e-griddetailrowindex/i;
+                        const result = value.match(remove$$1);
+                        const results = value.match(removed);
+                        if (result != null) {
+                            removeClass([treecell], value);
+                        }
+                        if (results != null) {
+                            removeClass([treecell], value);
+                        }
+                    }
+                    if (!rows[k].classList.contains('e-detailrow')) {
+                        addClass([treecell], 'e-gridrowindex' + index + 'level' + level);
+                    }
+                    else {
+                        addClass([treecell], 'e-griddetailrowindex' + index + 'level' + level);
+                    }
                 }
             }
         }
@@ -12183,100 +12364,6 @@ class TreeVirtual extends VirtualScroll {
     }
 }
 
-/**
- * TreeGrid Freeze module
- *
- * @hidden
- */
-class Freeze$1 {
-    /**
-     * Constructor for render module
-     *
-     * @param {TreeGrid} parent - Tree Grid instance
-     */
-    constructor(parent) {
-        Grid.Inject(Freeze);
-        this.parent = parent;
-        this.addEventListener();
-    }
-    addEventListener() {
-        this.parent.on('rowExpandCollapse', this.rowExpandCollapse, this);
-        this.parent.on('dataBoundArg', this.dataBoundArg, this);
-        this.parent.grid.on('dblclick', this.dblClickHandler, this);
-    }
-    removeEventListener() {
-        if (this.parent.isDestroyed) {
-            return;
-        }
-        this.parent.off('rowExpandCollapse', this.rowExpandCollapse);
-        this.parent.off('dataBoundArg', this.dataBoundArg);
-        this.parent.grid.off('dblclick', this.dblClickHandler);
-    }
-    rowExpandCollapse(args) {
-        const movableRows = this.parent.getMovableDataRows();
-        const frozenrows = this.parent.getRows();
-        let rows;
-        let frozenRightRows;
-        const freeze = (this.parent.getFrozenLeftColumnsCount() > 0 ||
-            this.parent.getFrozenRightColumnsCount() > 0) ? true : false;
-        if (freeze) {
-            frozenRightRows = this.parent.getFrozenRightRows().filter((e) => e.querySelector('.e-gridrowindex' + args.record.index + 'level' + (args.record.level + 1)));
-        }
-        if (!args.detailrows.length) {
-            rows = movableRows.filter((e) => e.querySelector('.e-gridrowindex' + args.record.index + 'level' + (args.record.level + 1)));
-        }
-        else {
-            rows = args.detailrows;
-        }
-        for (let i = 0; i < rows.length; i++) {
-            const rData = this.parent.grid.getRowObjectFromUID(rows[i].getAttribute('data-Uid')).data;
-            rows[i].style.display = args.action;
-            if (freeze) {
-                frozenRightRows[i].style.display = args.action;
-            }
-            const queryselector = args.action === 'none' ? '.e-treecolumn-container .e-treegridcollapse'
-                : '.e-treecolumn-container .e-treegridexpand';
-            if (frozenrows[rows[i].rowIndex].querySelector(queryselector)) {
-                const cRow = [];
-                for (let i = 0; i < movableRows.length; i++) {
-                    if (movableRows[i].querySelector('.e-gridrowindex' + rData.index + 'level' + (rData.level + 1))) {
-                        cRow.push(movableRows[i]);
-                    }
-                }
-                if (cRow.length) {
-                    this.rowExpandCollapse({ detailrows: cRow, action: args.action });
-                }
-            }
-        }
-    }
-    dblClickHandler(e) {
-        if (parentsUntil(e.target, 'e-rowcell') &&
-            this.parent.grid.editSettings.allowEditOnDblClick && this.parent.editSettings.mode !== 'Cell') {
-            this.parent.grid.editModule.startEdit(parentsUntil(e.target, 'e-row'));
-        }
-    }
-    dataBoundArg() {
-        const checkboxColumn = this.parent.getColumns().filter((e) => {
-            return e.showCheckbox;
-        });
-        if (checkboxColumn.length && this.parent.freezeModule && this.parent.initialRender) {
-            addClass([this.parent.element.getElementsByClassName('e-grid')[0]], 'e-checkselection');
-        }
-    }
-    destroy() {
-        this.removeEventListener();
-    }
-    /**
-     * For internal use only - Get the module name.
-     *
-     * @private
-     * @returns {string} Returns Freeze module name
-     */
-    getModuleName() {
-        return 'freeze';
-    }
-}
-
 /**
  * TreeGrid ColumnChooser module
  *
@@ -12607,7 +12694,7 @@ class InfiniteScroll$1 {
                 if (getValue('selectedIndex', this.parent.editModule) !== -1 && this.parent.editSettings.newRowPosition !== 'Top') {
                     if (this.parent.editSettings.newRowPosition === 'Below' || this.parent.editSettings.newRowPosition === 'Child') {
                         position = 'after';
-                        newRowIndex += findChildrenRecords(currentData[newRowIndex + 1]).length;
+                        newRowIndex += findChildrenRecords(currentData[newRowIndex]).length;
                         if (this.parent.editSettings.newRowPosition === 'Child') {
                             newRowIndex -= 1; //// for child position already child record is added in childRecords so subtracting 1
                         }