@syncfusion/ej2-treegrid 19.3.45 → 19.3.46

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

@@ -16,7 +16,7 @@ import { VirtualContentRenderer } from '@syncfusion/ej2-grids';
 import { InterSectionObserver } from '@syncfusion/ej2-grids';
 import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-generator';
 import * as events from '../base/constant';
-import { isNullOrUndefined, EventHandler, getValue, setValue, Browser } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, EventHandler, getValue, setValue, Browser, debounce } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
 import { isCountRequired } from '../utils';
 var VirtualTreeContentRenderer = /** @class */ (function (_super) {
@@ -88,9 +88,9 @@ var VirtualTreeContentRenderer = /** @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)) {
             this.parent[action]('data-ready', this.onDataReady, this);
-            //this.parent[action]('refresh-virtual-block', this.refreshContentRows, this);
+            this.parent[action]('refresh-virtual-block', this.refreshContentRows, this);
             this.fn = function () {
-                _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); });
+                _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction());
                 _this.parent.off('content-ready', _this.fn);
             };
             this.parent.addEventListener('dataBound', this.dataBoundEvent.bind(this));
@@ -122,7 +122,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
             if (!isNullOrUndefined(e.count)) {
                 this.totalRecords = e.count;
-                getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
+                if (!this.parent.enableColumnVirtualization) {
+                    getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
+                }
             }
             if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || this.isDataSourceChanged) {
                 this.contents.scrollTop = 0;
@@ -180,6 +182,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             return;
         }
         var selectVirtualRow = 'selectVirtualRow';
+        var containerRect = 'containerRect';
+        if (isNullOrUndefined(this.observer[containerRect])) {
+            this.observer[containerRect] = this.observers[containerRect];
+        }
         _super.prototype[selectVirtualRow].call(this, args);
     };
     VirtualTreeContentRenderer.prototype.refreshCell = function (rowObj) {
@@ -286,15 +292,39 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var actionComplete = 'actionComplete';
         _super.prototype[actionComplete].call(this, args);
     };
+    VirtualTreeContentRenderer.prototype.onEnteredAction = function () {
+        var _this = this;
+        return function (element, current, direction, e, isWheel, check) {
+            var directVirtualRender = 'directVirtualRender';
+            if (!_this.parent[directVirtualRender]) { // with this property, columns are rendered without debouncing on horizontal scroll.
+                var preventEvent = 'preventEvent';
+                if (Browser.isIE && !isWheel && check && !_this[preventEvent]) {
+                    _this.parent.showSpinner();
+                }
+                var xAxis = current.axis === 'X';
+                var x = _this.getColumnOffset(xAxis ? _this.vgenerator.getColumnIndexes()[0] - 1 : _this.prevInfo.columnIndexes[0]
+                    - 1);
+                if (xAxis) {
+                    var idx = Object.keys(_this.vgenerator.cOffsets).length - _this.prevInfo.columnIndexes.length;
+                    var maxLeft = _this.vgenerator.cOffsets[idx - 1];
+                    x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
+                }
+                _this.virtualEle.adjustTable(x, _this.translateY);
+                if (_this.parent.enableColumnVirtualization) {
+                    _this.header.virtualEle.adjustTable(x, 0);
+                }
+            }
+        };
+    };
     VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
         var info = scrollArgs.sentinel;
-        var outBuffer = 10; //this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 1.5);
+        var outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
         var content = this.parent.getContent().querySelector('.e-content');
         var scrollHeight = outBuffer * this.parent.getRowHeight();
         var upScroll = (scrollArgs.offset.top - this.translateY) < 0;
         var downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) >= scrollHeight;
         var selectedRowIndex = 'selectedRowIndex';
-        if (upScroll) {
+        if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
             var vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? this.parent.height :
                 this.parent.element.getBoundingClientRect().height);
             var index = (~~(content.scrollTop / this.parent.getRowHeight())
@@ -331,7 +361,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     scrollArgs.offset.top - (outBuffer * height) + 10 : 0;
             }
         }
-        else if (downScroll) {
+        else if (downScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
             var nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
             var isLastBlock = (this[selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
             if (!isNullOrUndefined(this[selectedRowIndex]) && this[selectedRowIndex] !== -1 &&
@@ -352,14 +382,17 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 this.translateY = scrollArgs.offset.top;
             }
         }
-        if ((downScroll && (scrollArgs.offset.top < (this.parent.getRowHeight() * this.totalRecords)))
-            || (upScroll)) {
-            var viewInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
+        if (((downScroll && (scrollArgs.offset.top < (this.parent.getRowHeight() * this.totalRecords)))
+            || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left')) {
+            var viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
             this.previousInfo = viewInfo;
+            this.parent.setColumnIndexesInView(this.parent.enableColumnVirtualization ? viewInfo.columnIndexes : []);
             var page = viewInfo.loadNext && !viewInfo.loadSelf ? viewInfo.nextInfo.page : viewInfo.page;
             this.parent.setProperties({ pageSettings: { currentPage: page } }, true);
-            viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
-            this.parent.notify(viewInfo.event, { requestType: 'virtualscroll', focusElement: scrollArgs.focusElement });
+            if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
+                viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
+            }
+            this.parent.notify(viewInfo.event, { requestType: 'virtualscroll', virtualInfo: viewInfo, focusElement: scrollArgs.focusElement });
         }
     };
     VirtualTreeContentRenderer.prototype.appendContent = function (target, newChild, e) {
@@ -376,7 +409,14 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 getValue('currentInfo', this) : e.virtualInfo;
             var cBlock = (info.columnIndexes[0]) - 1;
             var cOffset = this.getColumnOffset(cBlock);
-            this.virtualEle.setWrapperWidth(null, (Browser.isIE || Browser.info.name === 'edge'));
+            var width = void 0;
+            if (this.parent.enableColumnVirtualization) {
+                this.header.virtualEle.adjustTable(cOffset, 0);
+                var cIndex = info.columnIndexes;
+                width = this.getColumnOffset(cIndex[cIndex.length - 1]) - this.getColumnOffset(cIndex[0] - 1) + '';
+                this.header.virtualEle.setWrapperWidth(width);
+            }
+            this.virtualEle.setWrapperWidth(width, (Browser.isIE || Browser.info.name === 'edge'));
             target = this.parent.createElement('tbody');
             target.appendChild(newChild);
             var replace = 'replaceWith';
@@ -388,8 +428,12 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 this.isExpandCollapse = false;
             }
             setValue('prevInfo', this.previousInfo ? this.previousInfo : info, this);
+            if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'X') {
+                this.parent.notify(events.autoCol, {});
+            }
             var focusCell = 'focusCell';
             var restoreAdd = 'restoreAdd';
+            var ensureSelectedRowPosition = 'ensureSelectedRowPosition';
             _super.prototype[focusCell].call(this, e);
             var isAdd = 'isAdd';
             if (this[isAdd] && !this.parent.getContent().querySelector('.e-content').querySelector('.e-addedrow')) {
@@ -405,6 +449,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             }
             this.restoreEditState();
             _super.prototype[restoreAdd].call(this);
+            _super.prototype[ensureSelectedRowPosition].call(this);
         }
     };
     VirtualTreeContentRenderer.prototype.removeEventListener = function () {
@@ -441,28 +486,34 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
         _this.timer = 0;
         return _this;
     }
-    TreeInterSectionObserver.prototype.observes = function (callback) {
+    TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback) {
         var containerRect = 'containerRect';
         _super.prototype[containerRect] = getValue('options', this).container.getBoundingClientRect();
-        EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback), this);
+        EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
     };
     TreeInterSectionObserver.prototype.clear = function () {
         this.lastPos = null;
     };
-    TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback) {
+    TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback, onEnterCallback) {
         var _this = this;
-        var prevTop = 0;
-        var prevLeft = 0;
+        var delay = Browser.info.name === 'chrome' ? 200 : 100;
+        var options = 'options';
+        var movableEle = 'movableEle';
+        var element = 'element';
+        var fromWheel = 'fromWheel';
+        var debounced100 = debounce(callback, delay);
+        var debounced50 = debounce(callback, 50);
+        this[options].prevTop = this[options].prevLeft = 0;
         return function (e) {
-            var scrollTop = e.target.scrollTop;
-            var scrollLeft = e.target.scrollLeft;
-            var direction = prevTop < scrollTop ? 'down' : 'up';
-            direction = prevLeft === scrollLeft ? direction : prevLeft < scrollLeft ? 'right' : 'left';
-            prevTop = scrollTop;
-            prevLeft = scrollLeft;
-            var current = getValue('sentinelInfo', _this)[direction];
+            var top = _this[options].movableContainer ? _this[options].container.scrollTop : e.target.scrollTop;
+            var left = _this[options].movableContainer ? _this[options].scrollbar.scrollLeft : e.target.scrollLeft;
+            var direction = _this[options].prevTop < top ? 'down' : 'up';
+            direction = _this[options].prevLeft === left ? direction : _this[options].prevLeft < left ? 'right' : 'left';
+            _this[options].prevTop = top;
+            _this[options].prevLeft = left;
+            var current = _this.sentinelInfo[direction];
             var delta = 0;
-            _this.newPos = scrollTop;
+            _this.newPos = top;
             if (_this.lastPos != null) { // && newPos < maxScroll
                 delta = _this.newPos - _this.lastPos;
             }
@@ -471,19 +522,35 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
                 clearTimeout(_this.timer);
             }
             _this.timer = setTimeout(_this.clear, 0);
-            /*if (this.options.axes.indexOf(current.axis) === -1) {
-            return;
-        }*/
-            /*if(delta > 45 || delta < -45){
-          this.isWheeling = true;
-        }*/
             if ((delta > 100 || delta < -100) && (e && e.preventDefault)) {
                 e.returnValue = false;
                 e.preventDefault();
             }
-            callback({ direction: direction, isWheel: _this.isWheeling,
-                sentinel: current, offset: { top: scrollTop, left: scrollLeft },
-                focusElement: document.activeElement });
+            if (_this[options].axes.indexOf(current.axis) === -1) {
+                return;
+            }
+            var check = _this.check(direction);
+            if (current.entered && current.axis === 'X') {
+                if (_this[movableEle] && (direction === 'right' || direction === 'left')) {
+                    onEnterCallback(_this[movableEle], current, direction, { top: top, left: left }, _this[fromWheel], check);
+                }
+                else {
+                    onEnterCallback(_this[element], current, direction, { top: top, left: left }, _this[fromWheel], check);
+                }
+            }
+            if (check) {
+                var fn = debounced100;
+                if (current.axis === 'X') {
+                    fn = debounced50;
+                    fn({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                        focusElement: document.activeElement });
+                }
+                else {
+                    callback({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                        focusElement: document.activeElement });
+                }
+            }
+            _this[fromWheel] = false;
         };
     };
     return TreeInterSectionObserver;

package/styles/bootstrap4.css

@@ -77,6 +77,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap5-dark.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/bootstrap5.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/treegrid/bootstrap4.css

@@ -77,6 +77,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/treegrid/bootstrap5-dark.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,

package/styles/treegrid/bootstrap5.css

@@ -65,6 +65,11 @@
   background: transparent;
 }
 
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,