@syncfusion/ej2-treegrid 20.1.55 → 20.1.56-97113

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,21 +72,21 @@ 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);
         for (var i = 0; i < keys.length; i++) {
-            this[keys[i]] = column[keys[i]];
+            this[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]];
             //Refresh the react columnTemplates on state change
-            if (this.parent && this.parent['isReact'] && keys[i] === 'template') {
+            if (this.parent && this.parent['isReact'] && keys[parseInt(i.toString(), 10)] === 'template') {
                 var refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
-                this.parent.clipboardModule['treeGridParent'].renderModule[refreshReactColumnTemplateByUid](this.uid);
+                this.parent.clipboardModule['treeGridParent'].renderModule["" + refreshReactColumnTemplateByUid](this.uid);
             }
         }
     };

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

@@ -20,3 +20,5 @@ export * from './rowdrop-settings';
 export * from './rowdrop-settings-model';
 export * from './infinite-scroll-settings';
 export * from './infinite-scroll-settings-model';
+export * from './loading-indicator';
+export * from './loading-indicator-model';

package/src/treegrid/models/index.js

@@ -11,3 +11,4 @@ export * from './summary';
 export * from './sort-settings';
 export * from './rowdrop-settings';
 export * from './infinite-scroll-settings';
+export * from './loading-indicator';

package/src/treegrid/models/loading-indicator-model.d.ts

@@ -0,0 +1,20 @@
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class LoadingIndicator
+ */
+export interface LoadingIndicatorModel {
+
+    /**
+     * Defines the loading indicator. The available loading indicator are:
+     * * Spinner
+     * * Shimmer
+     *
+     * @default Syncfusion.EJ2.Grids.IndicatorType.Spinner
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Grids.IndicatorType
+     */
+
+    indicatorType?: IndicatorType;
+
+}

package/src/treegrid/models/loading-indicator.d.ts

@@ -0,0 +1,17 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { IndicatorType } from '@syncfusion/ej2-grids';
+/**
+ * Configures the Loading Indicator of the Tree Grid.
+ */
+export declare class LoadingIndicator extends ChildProperty<LoadingIndicator> {
+    /**
+     * Defines the loading indicator. The available loading indicator are:
+     * * Spinner
+     * * Shimmer
+     *
+     * @default Syncfusion.EJ2.Grids.IndicatorType.Spinner
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Grids.IndicatorType
+     */
+    indicatorType: IndicatorType;
+}

package/src/treegrid/models/loading-indicator.js

@@ -0,0 +1,34 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Configures the Loading Indicator of the Tree Grid.
+ */
+var LoadingIndicator = /** @class */ (function (_super) {
+    __extends(LoadingIndicator, _super);
+    function LoadingIndicator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Spinner')
+    ], LoadingIndicator.prototype, "indicatorType", void 0);
+    return LoadingIndicator;
+}(ChildProperty));
+export { LoadingIndicator };

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

@@ -47,7 +47,7 @@ var Render = /** @class */ (function () {
             var parentrec = this.parent.getCurrentViewRecords().filter(function (rec) {
                 return getValue(proxy_1.idMapping, rec) === getValue(proxy_1.parentIdMapping, data);
             });
-            if (parentrec.length > 0) {
+            if (parentrec.length > 0 && !parentrec[0].isSummaryRow) {
                 var display = parentrec[0].expanded ? 'table-row' : 'none';
                 args.row.setAttribute('style', 'display: ' + display + ';');
             }
@@ -99,7 +99,7 @@ var Render = /** @class */ (function () {
         var columnIndex;
         var getVirtualColIndexByUid = 'getVirtualColIndexByUid';
         if (this.parent.enableColumnVirtualization && !this.parent.initialRender) {
-            columnIndex = this.parent[getVirtualColIndexByUid](args.column.uid);
+            columnIndex = this.parent["" + getVirtualColIndexByUid](args.column.uid);
         }
         else {
             columnIndex = grid.getColumnIndexByUid(args.column.uid);
@@ -122,6 +122,7 @@ var Render = /** @class */ (function () {
             }
             if (iconRequired) {
                 addClass([args.cell], 'e-treerowcell');
+                args.cell.setAttribute('aria-expanded', data.expanded ? 'true' : 'false');
                 var expandIcon = createElement('span', { className: 'e-icons' });
                 var expand = void 0;
                 if (this.parent.initialRender) {
@@ -214,7 +215,12 @@ var Render = /** @class */ (function () {
                 args.cell.querySelector('.e-treecell').innerHTML = summaryData;
             }
             else {
-                args.cell.innerHTML = summaryData;
+                if (args.column.template) {
+                    args.cell.innerHTML = null;
+                }
+                else {
+                    args.cell.innerHTML = summaryData;
+                }
             }
         }
         if (isNullOrUndefined(this.parent.rowTemplate)) {
@@ -227,11 +233,11 @@ var Render = /** @class */ (function () {
         var templateFn = 'templateFn';
         var colindex = args.column.index;
         if (isNullOrUndefined(treeColumn.field)) {
-            args.cell.setAttribute('aria-colindex', colindex + '');
+            args.cell.setAttribute('data-colindex', colindex + '');
         }
         if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
             args.column.template = treeColumn.template;
-            args.column[templateFn] = templateCompiler(args.column.template);
+            args.column["" + templateFn] = templateCompiler(args.column.template);
             args.cell.classList.add('e-templatecell');
         }
         var textContent = args.cell.querySelector('.e-treecell') != null ?
@@ -248,25 +254,25 @@ var Render = /** @class */ (function () {
                 var portals = 'portals';
                 var renderReactTemplates = 'renderReactTemplates';
                 if (this.parent.isReact && typeof (args.column.template) !== 'string') {
-                    args.column[templateFn](args.data, this.parent, 'template', tempID, null, null, cellElement);
-                    if (isNullOrUndefined(this.parent.grid[portals])) {
-                        this.parent.grid[portals] = this.parent[portals];
+                    args.column["" + templateFn](args.data, this.parent, 'columnTemplate', tempID, null, null, cellElement);
+                    if (isNullOrUndefined(this.parent.grid["" + portals])) {
+                        this.parent.grid["" + portals] = this.parent["" + portals];
                     }
-                    this.parent.notify('renderReactTemplate', this.parent[portals]);
-                    this.parent[renderReactTemplates]();
+                    this.parent.notify('renderReactTemplate', this.parent["" + portals]);
+                    this.parent["" + renderReactTemplates]();
                 }
                 else {
                     var str = 'isStringTemplate';
-                    var result = args.column[templateFn](extend({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent[str]);
+                    var result = args.column["" + templateFn](extend({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent["" + str]);
                     appendChildren(cellElement, result);
                 }
                 delete args.column.template;
-                delete args.column[templateFn];
+                delete args.column["" + templateFn];
                 args.cell.innerHTML = '';
             }
             else {
                 for (var i = 0; i < len; len = args.cell.children.length) {
-                    cellElement.appendChild(args.cell.children[i]);
+                    cellElement.appendChild(args.cell.children[parseInt(i.toString(), 10)]);
                 }
             }
         }
@@ -276,10 +282,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) {
@@ -291,11 +297,14 @@ var Render = /** @class */ (function () {
                 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];
+                    if (rowsObj[parseInt(j.toString(), 10)].isDataRow && !isNullOrUndefined(rowsObj[parseInt(j.toString(), 10)].index)) {
+                        var cell = rowsObj[parseInt(j.toString(), 10)]["" + cells][parseInt(cellIndex.toString(), 10)];
                         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 td = _this.parent.getCellFromIndex(rowsObj[parseInt(j.toString(), 10)].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[parseInt(j.toString(), 10)].data, { index: rowsObj[parseInt(j.toString(), 10)]["" + rowIdx] });
+                        var treecell = _this.parent.getRows()[parseInt(j.toString(), 10)]
+                            .cells[parseInt(cellIndex.toString(), 10)];
+                        _this.cellRender({ data: rowsObj[parseInt(j.toString(), 10)].data, cell: treecell, column: cell.column });
                     }
                 }
             });
@@ -307,9 +316,9 @@ var Render = /** @class */ (function () {
     Render.prototype.reactTemplateRender = function (args) {
         var renderReactTemplates = 'renderReactTemplates';
         var portals = 'portals';
-        this.parent[portals] = args;
-        this.parent.notify('renderReactTemplate', this.parent[portals]);
-        this.parent[renderReactTemplates]();
+        this.parent["" + portals] = args;
+        this.parent.notify('renderReactTemplate', this.parent["" + portals]);
+        this.parent["" + renderReactTemplates]();
     };
     Render.prototype.destroy = function () {
         this.parent.grid.off('template-result', this.columnTemplateResult);

package/src/treegrid/renderer/virtual-row-model-generator.js

@@ -49,7 +49,11 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
         var info = this.getDataInfo();
         if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
             if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
-                notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
+                if (!((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
+                    && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent))
+                    || notifyArgs.virtualInfo.blockIndexes.length === 1) {
+                    notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
+                }
             }
             else {
                 notifyArgs.virtualInfo.blockIndexes = this.getBlockIndexes(notifyArgs.virtualInfo.page);
@@ -65,7 +69,7 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
             }
             var rows = _super.prototype.generateRows.call(this, data, notifyArgs);
             for (var r = 0; r < rows.length; r++) {
-                rows[r].index = (this.visualData).indexOf(rows[r].data);
+                rows[parseInt(r.toString(), 10)].index = (this.visualData).indexOf(rows[parseInt(r.toString(), 10)].data);
             }
             return rows;
         }
@@ -76,15 +80,18 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
         if ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
             && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent)) {
             var model = 'model';
-            var currentPage = this[model].currentPage;
+            var currentPage = this["" + model].currentPage;
             if (clear) {
                 this.cache = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
                 this.data = {};
                 this.groups = {};
             }
-            else if (action === 'virtualscroll' && this.cache[currentPage] &&
-                this.cache[currentPage].length > (this.parent.contentModule).getBlockSize()) {
-                delete this.cache[currentPage];
+            else if (action === 'virtualscroll' && this.cache[parseInt(currentPage.toString(), 10)] &&
+                this.cache[parseInt(currentPage.toString(), 10)].length >
+                    (this.parent.contentModule).getBlockSize()) {
+                delete this.cache[parseInt(currentPage.toString(), 10)];
             }
         }
         else {
@@ -92,6 +99,8 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
                 this.cache = {};
                 this.data = {};
                 this.groups = {};
+                this.movableCache = {};
+                this.frozenRightCache = {};
             }
         }
         return clear;

package/src/treegrid/renderer/virtual-tree-content-render.d.ts

@@ -11,7 +11,7 @@ export declare class VirtualTreeContentRenderer extends VirtualContentRenderer {
     private maxiPage;
     private rowPosition;
     private addRowIndex;
-    private ariaRowIndex;
+    private dataRowIndex;
     private recordAdded;
     /** @hidden */
     startIndex: number;
@@ -25,6 +25,9 @@ export declare class VirtualTreeContentRenderer extends VirtualContentRenderer {
     /** @hidden */
     isDataSourceChanged: boolean;
     getRowByIndex(index: number): Element;
+    getMovableVirtualRowByIndex(index: number): Element;
+    getFrozenRightVirtualRowByIndex(index: number): Element;
+    getRowCollection(index: number, isMovable: boolean, isRowObject?: boolean, isFrozenRight?: boolean): Element | Object;
     addEventListener(): void;
     private virtualOtherAction;
     private indexModifier;
@@ -59,7 +62,7 @@ export declare class TreeInterSectionObserver extends InterSectionObserver {
     private newPos;
     private lastPos;
     private timer;
-    observes(callback: Function, onEnterCallback: Function): void;
+    observes(callback: Function, onEnterCallback: Function, instance: IGrid): void;
     private clear;
     private virtualScrollHandlers;
 }