@syncfusion/ej2-treegrid 21.2.9 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.9
+*  version : 22.1.34
 *  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@21.2.8",
+  "_id": "@syncfusion/ej2-treegrid@20.12.0",
   "_inBundle": false,
-  "_integrity": "sha512-YiqZ/KpWwbgUoxWXdQt7oXZEaAcc+ZvW4Jf22/wOVt64lGs3Qg+LrJk0rC0Z+XT1t+L7GJjvzVrq9nd1Niwsew==",
+  "_integrity": "sha512-eI+2miH8ZLzF4QW6Xym9f8zNRxApPW4I/6o1rW2RSYk8pFZ5c2JGa1Y2KH6UHgcfvgANjE4hdUg1hfponcqBzQ==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-21.2.8.tgz",
-  "_shasum": "33c37b706fce617fed0f97a2fcf9cde1814a8dcd",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.12.0.tgz",
+  "_shasum": "68b2b0d2e867f79d44107046a375bb48405b2631",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-data": "~21.2.9",
-    "@syncfusion/ej2-grids": "~21.2.9",
-    "@syncfusion/ej2-popups": "~21.2.4"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-data": "~22.1.34",
+    "@syncfusion/ej2-grids": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -66,6 +66,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.9",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/treegrid/actions/edit.js

@@ -71,6 +71,14 @@ var Edit = /** @class */ (function () {
         if (e.target.classList.contains('e-frame') && this.parent.getCurrentViewRecords().length === 0) {
             this.doubleClickTarget = null;
         }
+        if (e.target.classList.contains('e-treegridcollapse') || e.target.classList.contains('e-treegridexpand')) {
+            var tr = parentsUntil(e.target, 'e-row');
+            var rowIndex = tr && parseInt(tr.getAttribute('data-rowindex'), 10);
+            if (!isNullOrUndefined(rowIndex) && rowIndex >= 0 && this.parent.allowPaging) {
+                /* eslint-disable-next-line */
+                this.parent.grid.getDataRows()[rowIndex].dataset.uid = this.parent.grid.contentModule.getRows()[rowIndex].uid;
+            }
+        }
     };
     Edit.prototype.getRowPosition = function (addArgs) {
         addArgs.newRowPosition = this.parent.editSettings.newRowPosition;
@@ -429,15 +437,21 @@ var Edit = /** @class */ (function () {
                 else if (isRemoteData(this.parent) ||
                     (this.parent.dataSource instanceof DataManager && this.parent.dataSource.adaptor instanceof RemoteSaveAdaptor)) {
                     var query = this.parent.grid.query;
-                    var crud = null;
-                    crud = this.parent.grid.dataSource.update(primaryKeys_1[0], args.rowData, query.fromTable, query, args.previousValue);
-                    crud.then(function (e) {
-                        if (!isNullOrUndefined(e)) {
-                            args.rowData[args.columnName] = e[args.columnName];
-                        }
-                        _this.updateCell(args, rowIndex_1);
-                        _this.afterCellSave(args, row_1, rowIndex_1);
-                    });
+                    if (this.parent['isGantt'] && !this.parent.loadChildOnDemand) {
+                        this.updateCell(args, rowIndex_1);
+                        this.afterCellSave(args, row_1, rowIndex_1);
+                    }
+                    else {
+                        var crud = null;
+                        crud = this.parent.grid.dataSource.update(primaryKeys_1[0], args.rowData, query.fromTable, query, args.previousValue);
+                        crud.then(function (e) {
+                            if (!isNullOrUndefined(e)) {
+                                args.rowData[args.columnName] = e[args.columnName];
+                            }
+                            _this.updateCell(args, rowIndex_1);
+                            _this.afterCellSave(args, row_1, rowIndex_1);
+                        });
+                    }
                 }
             }
             else {

package/src/treegrid/actions/freeze-column.js

@@ -1,4 +1,4 @@
-import { ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, FreezeRender, parentsUntil, RenderType } from '@syncfusion/ej2-grids';
+import { ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, FreezeContentRender, FreezeRender, parentsUntil, RenderType } from '@syncfusion/ej2-grids';
 import { Grid, Freeze as FreezeColumn } from '@syncfusion/ej2-grids';
 import { addClass, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ColumnVirtualTreeFreezeRenderer, VirtualTreeFreezeRenderer, VirtualTreeFreezeHdrRenderer } from '../renderer/virtual-tree-freeze-render';
@@ -48,6 +48,10 @@ var Freeze = /** @class */ (function () {
                 getValue('addRenderer', renderer)
                     .apply(renderer, [RenderType.Content, new VirtualTreeFreezeRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
             }
+            else {
+                getValue('addRenderer', renderer)
+                    .apply(renderer, [RenderType.Content, new FreezeContentRender(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
+            }
         }
         if (this.parent.getFrozenLeftColumnsCount() || this.parent.getFrozenRightColumnsCount()) {
             getValue('addRenderer', renderer)

package/src/treegrid/actions/summary.js

@@ -189,6 +189,7 @@ var Aggregate = /** @class */ (function () {
             summaryKey = types[parseInt(i.toString(), 10)];
             var key = summaryColumn.field + ' - ' + types[parseInt(i.toString(), 10)].toLowerCase();
             var val = types[parseInt(i.toString(), 10)] !== 'Custom' ? getObject('aggregates', sumData) :
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 calculateAggregate(types[parseInt(i.toString(), 10)], sumData, summaryColumn, this.parent);
             var disp = summaryColumn.columnName;
             var value_1 = types[parseInt(i.toString(), 10)] !== 'Custom' ? val["" + key] : val;

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

@@ -124,9 +124,10 @@ var VirtualScroll = /** @class */ (function () {
                 this.parent.grid.getContent().firstElementChild.scrollTop = 0;
                 this.parent.grid.notify(events.virtualActionArgs, { setTop: true });
             }
-            if (requestType === 'save') {
+            if (requestType === 'save' || (requestType === 'refresh' && this.parent['isGantt'] && this.parent['isAddedFromGantt'])) {
                 startIndex = counts.startIndex + (counts.count - counts.endIndex);
                 endIndex = counts.count;
+                this.parent['isAddedFromGantt'] = false;
             }
             //if ((this.prevendIndex !== -1 && this.prevstartIndex !== -1) &&
             //this.prevendIndex === endIndex && this.prevstartIndex === startIndex) {

package/src/treegrid/base/treegrid-model.d.ts

@@ -207,8 +207,9 @@ export interface TreeGridModel extends ComponentModel{
      * @hidden
      * It used to render pager template
      * @default null
+     * @aspType string
      */
-    pagerTemplate?: string;
+    pagerTemplate?: string | Function;
 
     /**
      * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
@@ -279,8 +280,9 @@ export interface TreeGridModel extends ComponentModel{
      * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
      * or the HTML element ID.
      *
+     * @aspType string
      */
-    detailTemplate?: string;
+    detailTemplate?: string | Function;
 
     /**
      * Configures the filter settings of the TreeGrid.
@@ -319,8 +321,9 @@ export interface TreeGridModel extends ComponentModel{
      * @hidden
      * It used to render toolbar template
      * @default null
+     * @aspType string
      */
-    toolbarTemplate?: string;
+    toolbarTemplate?: string | Function;
 
     /**
      * Defines the mode of TreeGrid lines. The available modes are,
@@ -384,8 +387,10 @@ export interface TreeGridModel extends ComponentModel{
      * > * The row template must be a table row.
      *
      * > Check the [`Row Template`](../../treegrid/row) customization.
+     *
+     * @aspType string
      */
-    rowTemplate?: string;
+    rowTemplate?: string | Function;
 
     /**
      * `copyHierarchyMode` Defines the copy clipboard types.

package/src/treegrid/base/treegrid.d.ts

@@ -83,6 +83,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private addedRecords;
     private targetElement;
     private isGantt;
+    private isAddedFromGantt;
     private isIndentEnabled;
     private indentOutdentAction;
     /**
@@ -357,8 +358,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @hidden
      * It used to render pager template
      * @default null
+     * @aspType string
      */
-    pagerTemplate: string;
+    pagerTemplate: string | Function;
     /**
      * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
      *
@@ -420,8 +422,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
      * or the HTML element ID.
      *
+     * @aspType string
      */
-    detailTemplate: string;
+    detailTemplate: string | Function;
     /**
      * Configures the filter settings of the TreeGrid.
      *
@@ -456,8 +459,9 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @hidden
      * It used to render toolbar template
      * @default null
+     * @aspType string
      */
-    toolbarTemplate: string;
+    toolbarTemplate: string | Function;
     /**
      * Defines the mode of TreeGrid lines. The available modes are,
      * ```props
@@ -517,8 +521,10 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * > * The row template must be a table row.
      *
      * > Check the [`Row Template`](../../treegrid/row) customization.
+     *
+     * @aspType string
      */
-    rowTemplate: string;
+    rowTemplate: string | Function;
     /**
      * `copyHierarchyMode` Defines the copy clipboard types.
      * <br><br>

package/src/treegrid/base/treegrid.js

@@ -715,7 +715,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.query = this.query;
         this.grid.columnQueryMode = this.columnQueryMode;
         this.grid.allowPaging = this.allowPaging;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.pageSettings = getActualProperties(this.pageSettings);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.pagerTemplate = this.pagerTemplate;
         this.grid.showColumnMenu = this.showColumnMenu;
         this.grid.allowSorting = this.allowSorting;
@@ -742,12 +744,14 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.gridLines = this.gridLines;
         this.grid.allowSelection = this.allowSelection;
         this.grid.toolbar = getActualProperties(this.getGridToolbar());
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.toolbarTemplate = this.toolbarTemplate;
         this.grid.showColumnChooser = this.showColumnChooser;
         this.grid.filterSettings = getActualProperties(this.filterSettings);
         this.grid.selectionSettings = getActualProperties(this.selectionSettings);
         this.grid.sortSettings = getActualProperties(this.sortSettings);
         this.grid.searchSettings = getActualProperties(this.searchSettings);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.aggregates = getActualProperties(this.aggregates);
         this.grid.textWrapSettings = getActualProperties(this.textWrapSettings);
         this.grid.printMode = getActualProperties(this.printMode);
@@ -756,7 +760,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.contextMenuItems = getActualProperties(this.getContextMenu());
         this.grid.columnMenuItems = getActualProperties(this.columnMenuItems);
         this.grid.editSettings = this.getGridEditSettings();
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.rowTemplate = getActualProperties(this.rowTemplate);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.grid.detailTemplate = getActualProperties(this.detailTemplate);
         this.grid.frozenRows = this.frozenRows;
         this.grid.frozenColumns = this.frozenColumns;
@@ -1086,10 +1092,8 @@ var TreeGrid = /** @class */ (function (_super) {
                         var currentData = _this.getCurrentViewRecords();
                         var rows = _this.getContentTable().rows;
                         for (var i = 0; i < rows.length; i++) {
-                            var args = {
-                                data: currentData[parseInt(i.toString(), 10)],
-                                row: rows[parseInt(i.toString(), 10)]
-                            };
+                            var args = { data: currentData[parseInt(i.toString(), 10)],
+                                row: rows[parseInt(i.toString(), 10)] };
                             _this.renderModule.RowModifier(args);
                         }
                     }
@@ -1548,6 +1552,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.allowPaging = this.allowPaging;
                     break;
                 case 'pageSettings':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.pageSettings = getActualProperties(this.pageSettings);
                     requireRefresh = true;
                     break;
@@ -1593,6 +1598,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.allowRowDragAndDrop = this.allowRowDragAndDrop;
                     break;
                 case 'aggregates':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.aggregates = getActualProperties(this.aggregates);
                     break;
                 case 'enableInfiniteScrolling':
@@ -1643,6 +1649,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.gridLines = this.gridLines;
                     break;
                 case 'rowTemplate':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.rowTemplate = getActualProperties(this.rowTemplate);
                     break;
                 case 'frozenRows':
@@ -1722,6 +1729,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.showColumnChooser = this.showColumnChooser;
                     break;
                 case 'detailTemplate':
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     this.grid.detailTemplate = getActualProperties(this.detailTemplate);
                     break;
                 case 'columnMenuItems':
@@ -2306,8 +2314,8 @@ var TreeGrid = /** @class */ (function (_super) {
                     }
                 }
                 else if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].field)) {
-                    var fieldName = this.columns[parseInt(i.toString(), 10)].field;
-                    var currentColumn = this.grid.getColumnByField(fieldName);
+                    var currentColumn = this.grid.getColumnByField(this.columns[parseInt(i.toString(), 10)]
+                        .field);
                     this.columns[parseInt(i.toString(), 10)].width = currentColumn.width;
                 }
             }

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

@@ -58,8 +58,10 @@ export declare class Column {
      * @hidden
      * Defines the commands column template as string or HTML element ID which is used to add
      * customized command buttons in each cells of the column.
+     *
+     * @aspType string
      */
-    commandsTemplate: string;
+    commandsTemplate: string | Function;
     /**
      * `commands` provides an option to display command buttons in every cell.
      * The available built-in command buttons are
@@ -108,7 +110,7 @@ export declare class Column {
      * @default null
      * @aspIgnore
      */
-    editTemplate: string;
+    editTemplate: string | Function;
     /**
      * Defines the filter template/UI that used as filter for a particular column.
      * It accepts either template string or HTML element ID.
@@ -116,7 +118,7 @@ export declare class Column {
      * @default null
      * @aspIgnore
      */
-    filterTemplate: string;
+    filterTemplate: string | Function;
     /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
      *
@@ -191,14 +193,16 @@ export declare class Column {
      * or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * You can use this property to freeze selected columns in treegrid
      *
@@ -490,8 +494,10 @@ export interface ColumnModel {
      * @hidden
      * Defines the commands column template as string or HTML element ID which is used to add
      * customized command buttons in each cells of the column.
+     *
+     * @aspType string
      */
-    commandsTemplate?: string;
+    commandsTemplate?: string | Function;
     /**
      * `commands` provides an option to display command buttons in every cell.
      * The available built-in command buttons are
@@ -529,14 +535,16 @@ export interface ColumnModel {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
     /**
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
     /**
      * You can use this property to freeze selected columns in grid.
      *
@@ -666,14 +674,14 @@ export interface ColumnModel {
      *
      * @aspIgnore
      */
-    editTemplate?: string;
+    editTemplate?: string | Function;
     /**
      * Defines the filter template/UI that is used as filter for a particular column.
      * It accepts either template string or HTML element ID.
      *
      * @aspIgnore
      */
-    filterTemplate?: string;
+    filterTemplate?: string | Function;
     /**
      * If `isIdentity` is set to true, then this column is considered as identity column.
      *

package/src/treegrid/models/edit-settings-model.d.ts

@@ -80,8 +80,9 @@ export interface EditSettingsModel {
      * Defines the custom edit elements for the dialog template.
      *
      * @default ''
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Defines the dialog params to edit.

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

@@ -72,8 +72,9 @@ export declare class EditSettings extends ChildProperty<EditSettings> {
      * Defines the custom edit elements for the dialog template.
      *
      * @default ''
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Defines the dialog params to edit.
      *

package/src/treegrid/models/page-settings-model.d.ts

@@ -53,8 +53,9 @@ export interface PageSettingsModel {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Specifies the mode of record count in a page. The options are,

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

@@ -46,8 +46,9 @@ export declare class PageSettings extends ChildProperty<PageSettings> {
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Specifies the mode of record count in a page. The options are,
      * * `All`: Count all the records.

package/src/treegrid/models/summary-model.d.ts

@@ -31,8 +31,10 @@ export interface AggregateColumnModel {
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
+     *
      */
-    footerTemplate?: string;
+    footerTemplate?: string | Function;
 
     /**
      * Defines the column name to perform aggregation.

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

@@ -33,8 +33,10 @@ export declare class AggregateColumn extends ChildProperty<AggregateColumn> {
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
+     *
      */
-    footerTemplate: string;
+    footerTemplate: string | Function;
     /**
      * Defines the column name to perform aggregation.
      *

package/src/treegrid/renderer/render.js

@@ -134,7 +134,12 @@ var Render = /** @class */ (function () {
             var iconRequired = !isNullOrUndefined(data.hasFilteredChildRecords)
                 ? data.hasFilteredChildRecords : data.hasChildRecords;
             if (iconRequired && !isNullOrUndefined(data.childRecords)) {
-                iconRequired = !(data.childRecords.length === 0);
+                if (this.parent['isFromGantt'] && !this.parent.loadChildOnDemand) {
+                    iconRequired = data.hasChildRecords;
+                }
+                else {
+                    iconRequired = !(data.childRecords.length === 0);
+                }
             }
             if (iconRequired) {
                 addClass([args.cell], 'e-treerowcell');
@@ -253,6 +258,7 @@ var Render = /** @class */ (function () {
             args.cell.setAttribute('data-colindex', colindex + '');
         }
         if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             args.column.template = treeColumn.template;
             args.column["" + templateFn] = templateCompiler(args.column.template);
             args.cell.classList.add('e-templatecell');

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

@@ -443,9 +443,8 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             }
             this.startIndex = !isLastBlock ? lastIndex - this.parent.pageSettings.pageSize : nextSetResIndex;
             this.endIndex = lastIndex;
-            if ((nextSetResIndex + this.parent.pageSettings.pageSize) > this.totalRecords &&
-                (this.endIndex - this.startIndex) < (this.parent.pageSettings.pageSize / 2) &&
-                (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {
+            if ((nextSetResIndex + this.parent.pageSettings.pageSize) > this.totalRecords && (this.endIndex - this.startIndex) <
+                (this.parent.pageSettings.pageSize / 2) && (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {
                 this.startIndex = lastIndex - (this.parent.pageSettings.pageSize / 2);
             }
             if (currentViewData.length && this.startIndex > currentViewData[0]["" + indexValue] &&
@@ -460,8 +459,8 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     this.translateY = scrollArgs.offset.top - rowHeight * 2;
                 }
                 else {
-                    if (this.totalRecords == this.endIndex) {
-                        this.translateY = scrollArgs.offset.top - (rowHeight - outBuffer);
+                    if (this.totalRecords === this.endIndex) {
+                        this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
                     }
                     else {
                         this.translateY = scrollArgs.offset.top;
@@ -653,6 +652,8 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
             if (_this["" + options].axes.indexOf(current.axis) === -1) {
                 return;
             }
+            var containerRect = 'containerRect';
+            _this["" + containerRect] = _this["" + options].container.getBoundingClientRect();
             var check = _this.check(direction);
             if (current.entered && (current.axis === 'X' || instance.enableVirtualMaskRow)) {
                 if (_this["" + movableEle] && (direction === 'right' || direction === 'left')) {