@syncfusion/ej2-treegrid 32.2.7 → 33.1.44

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

@@ -188,7 +188,11 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
             this.parent["" + action]('data-ready', this.onDataReady, this);
             this.parent["" + action]('refresh-virtual-block', this.refreshContentRows, this);
+            this.parent.on(events.destroy, this.destroy, this);
             this.fn = function () {
+                if (_this.parent.root.enableSeamlessScrolling) {
+                    window.addEventListener('resize', _this.updateScrollbar.bind(_this));
+                }
                 _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction(), _this.parent);
                 var gObj = _this.parent;
                 if (gObj.root.enablePersistence && gObj.root.scrollPosition) {
@@ -238,6 +242,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var virtualCellFocus = 'virtualCellFocus';
         _super.prototype["" + virtualCellFocus].call(this, e);
     };
+    VirtualTreeContentRenderer.prototype.updateScrollbar = function () {
+        var updateScrollbarOnResize = 'updateScrollbarOnResize';
+        _super.prototype["" + updateScrollbarOnResize].call(this);
+    };
     /**
      * Handles the data ready event for the virtual tree grid content renderer.
      *
@@ -278,9 +286,6 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         _super.prototype.renderTable.call(this);
         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)) {
-            if (this.observers) {
-                this.observers.disconnect();
-            }
             getValue('observer', this).options.debounceEvent = false;
             this.observers = new TreeInterSectionObserver(getValue('observer', this).element, getValue('observer', this).options);
             this.contents = this.getPanel().firstChild;
@@ -361,7 +366,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         }
         var treeGridParent = this.parent.clipboardModule['treeGridParent'];
         if (isNullOrUndefined(treeGridParent.editModule) ||
-            isNullOrUndefined(treeGridParent.editModule['addRowIndex']) || args.selectedIndex !== 0) {
+            isNullOrUndefined(treeGridParent.editModule['addRowIndex']) || args.selectedIndex !== -1) {
             if (!isNullOrUndefined(treeGridParent.grid.sortModule) && treeGridParent.grid.sortModule['sortedColumns'].length > 0) {
                 var sortedData = treeGridParent.dataModule['sortedData'];
                 if (!isNullOrUndefined(sortedData) && sortedData.length > 0) {
@@ -661,16 +666,28 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     var maxLeft = _this.vgenerator.cOffsets[idx - 1];
                     x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
                 }
-                var y = _this.getTranslateY(e.top, height, xAxis && top_1 === e.top ? _this.prevInfo : undefined, true);
+                var isRowScrollAction = _this.prevInfo && _this.prevInfo.page === 1 &&
+                    (direction !== _this.prevInfo.direction || direction !== _this.prevInfo.direction);
+                var translateY = _this.getTranslateY(e.top, height, xAxis && top_1 === e.top ? _this.prevInfo : undefined, isRowScrollAction ? false : true);
                 if (!_this.parent.isFrozenGrid() || _this.parent.enableVirtualMaskRow) {
                     if (_this.parent.enableVirtualMaskRow) {
                         var upScroll = (e.top - _this.translateY) < 0;
-                        y = (Math.round(_this.translateY) > y && !upScroll) ? Math.round(_this.translateY) : y;
-                        _this.virtualEle.adjustTable(x, y);
+                        translateY = (Math.round(_this.translateY) > translateY && !upScroll) ? Math.round(_this.translateY) : translateY;
+                        _this.virtualEle.adjustTable(x, translateY);
                     }
                     else {
                         _this.virtualEle.adjustTable(x, _this.translateY);
                     }
+                    var wrapperBottom = _this.virtualEle.wrapper.getBoundingClientRect().bottom;
+                    var contentBottom = _this.virtualEle.content.getBoundingClientRect().bottom;
+                    if (direction === 'up' && _this.prevInfo.page === Math.ceil(_this.getTotalBlocks() / 2) &&
+                        Math.round(wrapperBottom) < Math.round(contentBottom)) {
+                        var bottomGap = Math.round(contentBottom) - Math.round(wrapperBottom);
+                        var adjustedTranslateY = Math.min(translateY + bottomGap, _this.offsets[_this['maxBlock']]);
+                        if (adjustedTranslateY !== translateY) {
+                            _this.virtualEle.adjustTable(x, adjustedTranslateY);
+                        }
+                    }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
                         if (_this.parent.isFrozenGrid()) {
@@ -787,6 +804,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 (this.parent.pageSettings.pageSize / 2) && (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {
                 this.startIndex = lastIndex - (this.parent.pageSettings.pageSize / 2);
             }
+            if (this.totalRecords < this.parent.pageSettings.pageSize) {
+                this.startIndex = 0;
+            }
             if (scrollArgs.offset.top > (rowHeight * this.totalRecords)) {
                 this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
             }
@@ -996,10 +1016,17 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         this.parent.off('refresh-virtual-editform-cells', this.refreshCell);
         this.parent.off('virtaul-cell-focus', this.cellFocus);
         this.parent.off('virtual-scroll-edit', this.restoreEditState);
-        if (this.observers) {
-            this.observers.disconnect();
+        this.parent.off(events.destroy, this.destroy);
+        if (this.parent.root.enableSeamlessScrolling) {
+            window.removeEventListener('resize', this.updateScrollbar);
         }
     };
+    VirtualTreeContentRenderer.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeEventListener();
+    };
     return VirtualTreeContentRenderer;
 }(VirtualContentRenderer));
 export { VirtualTreeContentRenderer };
@@ -1013,6 +1040,9 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
         _this.timer = 0;
         return _this;
     }
+    TreeInterSectionObserver.prototype.onWheelEvent = function () {
+        this.isWheeling = true;
+    };
     /**
      * Sets up observers to monitor scroll events on a given container
      * and its movable companion within a virtual grid setup.
@@ -1025,28 +1055,28 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
     TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback, instance) {
         var containerRect = 'containerRect';
         _super.prototype["" + containerRect] = getValue('options', this).container.getBoundingClientRect();
-        this.containerEl = getValue('options', this).container;
-        this.containerScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
-        EventHandler.add(this.containerEl, 'scroll', this.containerScrollHandler, this);
-        if (getValue('options', this).movableContainer) {
-            var movableContainerRect = 'movableContainerRect';
-            _super.prototype["" + movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
-            this.movableContainerEl = getValue('options', this).movableContainer;
-            this.movableScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
-            EventHandler.add(this.movableContainerEl, 'scroll', this.movableScrollHandler, this);
+        var options = getValue('options', this);
+        EventHandler.add(options.container, 'wheel', this.onWheelEvent, this);
+        if (!isNullOrUndefined(options.horizontalScrollbar)) {
+            EventHandler.add(options.horizontalScrollbar, 'wheel', this.onWheelEvent, this);
+            EventHandler.add(options.horizontalScrollbar, 'scroll', this.onVirtualContentScrolling(), this);
         }
-    };
-    TreeInterSectionObserver.prototype.disconnect = function () {
-        if (this.containerEl && this.containerScrollHandler) {
-            EventHandler.remove(this.containerEl, 'scroll', this.containerScrollHandler);
-            this.containerScrollHandler = null;
-        }
-        if (this.movableContainerEl && this.movableScrollHandler) {
-            EventHandler.remove(this.movableContainerEl, 'scroll', this.movableScrollHandler);
-            this.movableScrollHandler = null;
+        if (!isNullOrUndefined(options.verticalScrollbar)) {
+            EventHandler.add(options.verticalScrollbar, 'wheel', this.onWheelEvent, this);
+            EventHandler.add(options.verticalScrollbar, 'scroll', this.onVirtualContentScrolling(), this);
         }
-        this.containerEl = null;
-        this.movableContainerEl = null;
+        EventHandler.add(options.container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
+    };
+    TreeInterSectionObserver.prototype.onVirtualContentScrolling = function () {
+        var _this = this;
+        return function (e) {
+            if (e.target.classList.contains('e-virtual-vertical-scrollbar')) {
+                getValue('options', _this).container.scrollTop = e.target.scrollTop;
+            }
+            if (e.target.classList.contains('e-virtual-horizontal-scrollbar')) {
+                getValue('options', _this).container.scrollLeft = e.target.scrollLeft;
+            }
+        };
     };
     /**
      * Clears the last known position.
@@ -1092,6 +1122,12 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
             direction = _this["" + options].prevLeft === left ? direction : _this["" + options].prevLeft < left ? 'right' : 'left';
             _this["" + options].prevTop = top;
             _this["" + options].prevLeft = left;
+            if (!isNullOrUndefined(_this["" + options].verticalScrollbar)) {
+                _this["" + options].verticalScrollbar.scrollTop = _this["" + options].container.scrollTop;
+            }
+            if (!isNullOrUndefined(_this["" + options].horizontalScrollbar)) {
+                _this["" + options].horizontalScrollbar.scrollLeft = _this["" + options].container.scrollLeft;
+            }
             var current = _this.sentinelInfo["" + direction];
             var delta = 0;
             _this.newPos = top;

package/styles/fluent2.css

@@ -1148,6 +1148,7 @@
 }
 .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
   padding-left: 2px;
+  line-height: 0px;
 }
 .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
   height: 20px;

package/styles/material3-dark-lite.css

@@ -311,11 +311,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {

package/styles/material3-dark.css

@@ -311,11 +311,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {

package/styles/material3-lite.css

@@ -313,11 +313,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {

package/styles/material3.css

@@ -313,11 +313,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {

package/styles/treegrid/_bigger.scss

@@ -21,6 +21,9 @@
 
         .e-hierarchycheckbox {
           padding-left: 2px;
+          @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
+            line-height: 0px;
+          }
         }
 
         .e-hierarchycheckbox .e-frame {

package/styles/treegrid/fluent2.css

@@ -1148,6 +1148,7 @@
 }
 .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
   padding-left: 2px;
+  line-height: 0px;
 }
 .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
   height: 20px;

package/styles/treegrid/icons/_material3.scss

@@ -3,11 +3,11 @@
   #{&}.e-treegrid,
   .e-grid-menu {
     .e-indent::before {
-      content: '\e33f';
+      content: '\e810';
     }
 
     .e-outdent::before {
-      content: '\e35d';
+      content: '\e72a';
     }
   }
 

package/styles/treegrid/material3-dark.css

@@ -311,11 +311,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {

package/styles/treegrid/material3.css

@@ -313,11 +313,11 @@
 /* stylelint-disable */
 .e-treegrid .e-indent::before,
 .e-grid-menu .e-indent::before {
-  content: "\e33f";
+  content: "\e810";
 }
 .e-treegrid .e-outdent::before,
 .e-grid-menu .e-outdent::before {
-  content: "\e35d";
+  content: "\e72a";
 }
 
 .e-treegrid .e-toolbar-item .e-expand::before {