@syncfusion/ej2-treegrid 20.1.55 → 20.1.60

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.55
+*  version : 20.1.60
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@20.1.52",
+  "_id": "@syncfusion/ej2-treegrid@20.1.59",
   "_inBundle": false,
-  "_integrity": "sha512-YN6uR63NYY2AMQf0v1YosSbea/+ZxrGmsWZovV2FqShGumMbDXHzh94cYc0zrMEW4Un3ChCObIZLdi0FVGmxxA==",
+  "_integrity": "sha512-LOslqFTo0Gua6HY+2oUsYWRa9AABCh+9DilQp1ewuMxw1mu3rrlTUQk52FGE6VGi78oOUmGbZcAAeMz6lc/XYQ==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.1.52.tgz",
-  "_shasum": "8c82053c644986cdb461e9381c0c5c77c6b8f58d",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.1.59.tgz",
+  "_shasum": "5723cf35775fc07a90823da3f4dae1200ea0b243",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.55",
+    "@syncfusion/ej2-base": "~20.1.60",
     "@syncfusion/ej2-data": "~20.1.55",
-    "@syncfusion/ej2-grids": "~20.1.55",
-    "@syncfusion/ej2-popups": "~20.1.55"
+    "@syncfusion/ej2-grids": "~20.1.60",
+    "@syncfusion/ej2-popups": "~20.1.58"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -60,6 +60,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.55",
+  "version": "20.1.60",
   "sideEffects": false
 }

package/src/treegrid/actions/context-menu.js

@@ -33,6 +33,8 @@ var ContextMenu = /** @class */ (function () {
     ContextMenu.prototype.contextMenuOpen = function (args) {
         var addRow = select('#' + this.parent.element.id + '_gridcontrol_cmenu_AddRow', args.element);
         var editRecord = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Edit', args.element);
+        var indent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Indent', args.element);
+        var outdent = select('#' + this.parent.element.id + '_gridcontrol_cmenu_Outdent', args.element);
         if (addRow) {
             if (this.parent.grid.editSettings.allowAdding === false) {
                 addRow.style.display = 'none';
@@ -45,6 +47,47 @@ var ContextMenu = /** @class */ (function () {
             && !(isNullOrUndefined(editRecord)) && !(editRecord.classList.contains('e-menu-hide'))) {
             editRecord.style.display = 'none';
         }
+        if (indent || outdent) {
+            var tObj = this.parent;
+            var selectedrow = tObj.getSelectedRows()[0];
+            var 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)) {
+                    var 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';
+                    }
+                }
+            }
+        }
     };
     ContextMenu.prototype.contextMenuClick = function (args) {
         if (args.item.id === 'Above' || args.item.id === 'Below' || args.item.id === 'Child') {
@@ -52,6 +95,13 @@ var ContextMenu = /** @class */ (function () {
             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)) {
+                var indentOutdentAction = 'indentOutdentAction';
+                var 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.

package/src/treegrid/actions/edit.js

@@ -540,11 +540,13 @@ var Edit = /** @class */ (function () {
     Edit.prototype.updateIndex = function (data, rows, records) {
         for (var j = 0; j < this.parent.getDataRows().length; j++) {
             var data1 = records[j];
-            var index = getValue('uniqueIDCollection.' + data1.uniqueID + '.index', this.parent);
-            data1.index = index;
-            if (!isNullOrUndefined(data1.parentItem)) {
-                var parentIndex = getValue('uniqueIDCollection.' + data1.parentItem.uniqueID + '.index', this.parent);
-                data1.parentItem.index = parentIndex;
+            if (!isNullOrUndefined(data1)) {
+                var index = getValue('uniqueIDCollection.' + data1.uniqueID + '.index', this.parent);
+                data1.index = index;
+                if (!isNullOrUndefined(data1.parentItem)) {
+                    var parentIndex = getValue('uniqueIDCollection.' + data1.parentItem.uniqueID + '.index', this.parent);
+                    data1.parentItem.index = parentIndex;
+                }
             }
         }
         var count = -1;
@@ -563,32 +565,34 @@ var Edit = /** @class */ (function () {
                 count++;
             }
             var data2 = records[count];
-            var index = data2.index;
-            var level = data2.level;
-            var row = rows[k];
-            if (!isNullOrUndefined(data2.parentItem)) {
-                index = getValue('uniqueIDCollection.' + data2.parentItem.uniqueID + '.index', this.parent);
-            }
-            var treecell = row.cells[treeColIndex];
-            if (!isNullOrUndefined(treecell)) {
-                for (var l = 0; l < treecell.classList.length; l++) {
-                    var value = treecell.classList[l];
-                    var remove = /e-gridrowindex/i;
-                    var removed = /e-griddetailrowindex/i;
-                    var result = value.match(remove);
-                    var results = value.match(removed);
-                    if (result != null) {
-                        removeClass([treecell], value);
+            if (!isNullOrUndefined(data2)) {
+                var index = data2.index;
+                var level = data2.level;
+                var row = rows[k];
+                if (!isNullOrUndefined(data2.parentItem)) {
+                    index = getValue('uniqueIDCollection.' + data2.parentItem.uniqueID + '.index', this.parent);
+                }
+                var treecell = row.cells[treeColIndex];
+                if (!isNullOrUndefined(treecell)) {
+                    for (var l = 0; l < treecell.classList.length; l++) {
+                        var value = treecell.classList[l];
+                        var remove = /e-gridrowindex/i;
+                        var removed = /e-griddetailrowindex/i;
+                        var result = value.match(remove);
+                        var results = value.match(removed);
+                        if (result != null) {
+                            removeClass([treecell], value);
+                        }
+                        if (results != 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 (!rows[k].classList.contains('e-detailrow')) {
-                    addClass([treecell], 'e-gridrowindex' + index + 'level' + level);
-                }
-                else {
-                    addClass([treecell], 'e-griddetailrowindex' + index + 'level' + level);
                 }
             }
         }

package/src/treegrid/actions/infinite-scroll.js

@@ -294,7 +294,7 @@ var InfiniteScroll = /** @class */ (function () {
                 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
                         }

package/src/treegrid/actions/page.d.ts

@@ -62,5 +62,6 @@ export declare class Page {
      */
     private collapseExpandPagedchilds;
     private pageRoot;
+    private updatePageSize;
     private pageAction;
 }

package/src/treegrid/actions/page.js

@@ -144,6 +144,16 @@ var Page = /** @class */ (function () {
         }
         return newResults;
     };
+    Page.prototype.updatePageSize = function (pageingDetails) {
+        var updateSize = pageingDetails.result.length;
+        var 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;
+            }
+        }
+    };
     Page.prototype.pageAction = function (pageingDetails) {
         var _this = this;
         var dm = new DataManager(pageingDetails.result);
@@ -180,6 +190,7 @@ var Page = /** @class */ (function () {
             pageingDetails.count = visualData.length;
             var query = new Query();
             var size = this.parent.grid.pageSettings.pageSize;
+            this.updatePageSize(pageingDetails);
             var current = this.parent.grid.pageSettings.currentPage;
             if (visualData.length < (current * size)) {
                 current = (Math.floor(visualData.length / size)) + ((visualData.length % size) ? 1 : 0);

package/src/treegrid/actions/rowdragdrop.js

@@ -847,8 +847,8 @@ var RowDD = /** @class */ (function () {
         if (this.dropPosition === 'bottomSegment') {
             var primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
             var 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];
             var selectedRecord = this.parent.getCurrentViewRecords()[rowIndex];
             this.droppedRecord = getParentData(this.parent, selectedRecord.parentItem.uniqueID);
         }

package/src/treegrid/actions/selection.js

@@ -85,7 +85,7 @@ var Selection = /** @class */ (function () {
     Selection.prototype.getCheckboxcolumnIndex = function () {
         var mappingUid;
         var columnIndex;
-        var stackedHeader = "stackedHeader";
+        var stackedHeader = 'stackedHeader';
         var columnModel = 'columnModel';
         var columns = this.parent[stackedHeader] ? this.parent[columnModel] : (this.parent.columns);
         for (var col = 0; col < columns.length; col++) {

package/src/treegrid/base/treegrid.js

@@ -27,6 +27,7 @@ import { TextWrapSettings } from '../models/textwrap-settings';
 import { Logger as TreeLogger } from '../actions/logger';
 import { TreeClipboard } from '../actions/clipboard';
 import { Selection as TreeGridSelection } from '../actions/selection';
+import { Freeze } from '../actions/freeze-column';
 import { Print } from '../actions/print';
 import * as events from '../base/constant';
 import { SearchSettings } from '../models/search-settings';
@@ -398,6 +399,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.requiredModules = function () {
         var modules = [];
         var splitFrozenCount = 'splitFrozenCount';
+        this.freezeModule = new Freeze(this);
         this.grid[splitFrozenCount](this.getGridColumns(this.columns));
         if (this.isDestroyed) {
             return modules;
@@ -449,7 +451,7 @@ var TreeGrid = /** @class */ (function (_super) {
             });
         }
         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]
             });
@@ -479,7 +481,7 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.extendRequiredModules = function (modules) {
         var IsRowDDInjected = this.injectedModules.filter(function (e) {
-            return e.name === 'RowDD';
+            return e.prototype.getModuleName() === 'rowDragAndDrop';
         });
         if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
             if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
@@ -1292,6 +1294,16 @@ var TreeGrid = /** @class */ (function (_super) {
                             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]);
                 }
@@ -1310,6 +1322,7 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.getGridToolbar = function () {
         if (this.toolbar) {
+            this.l10n = new L10n('treegrid', this.defaultLocale, this.locale);
             var items = [];
             var tooltipText = void 0;
             for (var i = 0; i < this.toolbar.length; i++) {
@@ -1391,6 +1404,9 @@ var TreeGrid = /** @class */ (function (_super) {
                         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];
                     }
@@ -1555,6 +1571,9 @@ var TreeGrid = /** @class */ (function (_super) {
                     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;

package/src/treegrid/enum.d.ts

@@ -112,7 +112,11 @@ export declare type ContextMenuItem =
 /** `NextPage` - Go to the next page. */
 'NextPage' | 
 /** AddRow to the TreeGrid */
-'AddRow';
+'AddRow' | 
+/** `Indent` - Indents the record to one level of hierarchy */
+'Indent' | 
+/** `Outdent` - Outdent the record to one level of hierarchy */
+'Outdent';
 /**
  * Defines predefined contextmenu items.
  *
@@ -134,7 +138,9 @@ export declare enum ContextMenuItems {
     PrevPage = 12,
     LastPage = 13,
     NextPage = 14,
-    AddRow = 15
+    AddRow = 15,
+    RowIndent = 16,
+    RowOutdent = 17
 }
 /**
  * Defines modes of editing.

package/src/treegrid/enum.js

@@ -43,4 +43,6 @@ export 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 = {}));

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

@@ -329,12 +329,12 @@ export declare class Column {
     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
-    */
+     * Update the State changes reflected for TreeGrid columndirective in react platform.
+     *
+     * @param {Column} column - specifies the column
+     * @returns {void}
+     * @hidden
+     */
     private setProperties;
 }
 /**

package/src/treegrid/models/column.js

@@ -72,12 +72,12 @@ var Column = /** @class */ (function () {
         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
+     */
     Column.prototype.setProperties = function (column) {
         //Angular two way binding
         var keys = Object.keys(column);

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

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

package/src/treegrid/renderer/render.js

@@ -276,10 +276,10 @@ var Render = /** @class */ (function () {
         }
     };
     /**
-    * @param {string} columnUid - Defines column uid
-    * @returns {void}
-    * @hidden
-    */
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
     Render.prototype.refreshReactColumnTemplateByUid = function (columnUid) {
         var _this = this;
         if (this.parent.isReact) {
@@ -296,6 +296,8 @@ var Render = /** @class */ (function () {
                         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] });
+                        var treecell = _this.parent.getRows()[j].cells[cellIndex];
+                        _this.cellRender({ data: rowsObj[j].data, cell: treecell, column: cell.column });
                     }
                 }
             });