@syncfusion/ej2-treegrid 29.2.8 → 30.1.38

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

@@ -11,7 +11,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Cell, CellType } from '@syncfusion/ej2-grids';
+import { Cell, CellType, getVisiblePage } from '@syncfusion/ej2-grids';
 import { VirtualContentRenderer } from '@syncfusion/ej2-grids';
 import * as literals from '../base/constant';
 import { InterSectionObserver } from '@syncfusion/ej2-grids';
@@ -19,7 +19,7 @@ import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-gene
 import * as events from '../base/constant';
 import { isNullOrUndefined, EventHandler, getValue, setValue, Browser, debounce } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
-import { isCountRequired } from '../utils';
+import { isCountRequired, isRemoteData } from '../utils';
 /**
  * VirtualTreeContentRenderer
  *
@@ -219,6 +219,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.parent["" + action]('refresh-virtual-editform-cells', this.refreshCell, this);
             this.parent["" + action]('virtaul-cell-focus', this.cellFocus, this);
             this.parent["" + action]('virtual-scroll-edit', this.restoreEditState, this);
+            this.parent["" + action]('set-virtual-page-query', this.SetVirtualPageQury, this);
         }
         else {
             _super.prototype.eventListener.call(this, 'on');
@@ -471,6 +472,18 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var restoreEdit = 'restoreEdit';
         _super.prototype["" + restoreEdit].call(this);
     };
+    VirtualTreeContentRenderer.prototype.SetVirtualPageQury = function (args) {
+        var visiblePage = [];
+        if (this.prevInfo && this.prevInfo.blockIndexes) {
+            visiblePage = getVisiblePage(this.prevInfo.blockIndexes);
+        }
+        if ((this.requestType === 'refresh') && visiblePage.length) {
+            args.query.skip(this.parent.pageSettings.pageSize * (visiblePage[0] - 1));
+            args.query.take(this.parent.pageSettings.pageSize * visiblePage.length);
+            args.skipPage = true;
+            return;
+        }
+    };
     /**
      * Resets the edit state if certain conditions are met.
      *
@@ -611,6 +624,19 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 var xAxis = current.axis === 'X';
                 var x = _this.getColumnOffset(xAxis ? _this.vgenerator.getColumnIndexes()[0] - 1 : _this.prevInfo.columnIndexes[0]
                     - 1);
+                if (_this.parent.isFrozenGrid() && _this.parent.enableColumnVirtualization && _this.currentInfo &&
+                    _this.currentInfo.columnIndexes) {
+                    var cBlock = _this.currentInfo.columnIndexes[0] - 1;
+                    var frzLeftWidth_1 = 0;
+                    _this.parent.getColumns().filter(function (col) {
+                        if (col.visible && col.freeze === 'Left') {
+                            frzLeftWidth_1 += parseInt(col.width.toString(), 10);
+                        }
+                    });
+                    if (cBlock > _this.parent.getVisibleFrozenLeftCount()) {
+                        x = x - frzLeftWidth_1;
+                    }
+                }
                 if (xAxis) {
                     var idx = Object.keys(_this.vgenerator.cOffsets).length - _this.prevInfo.columnIndexes.length;
                     var maxLeft = _this.vgenerator.cOffsets[idx - 1];
@@ -628,6 +654,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
+                        if (_this.parent.isFrozenGrid()) {
+                            _this.parent.contentModule['resetStickyLeftPos'](x);
+                        }
                     }
                 }
             }
@@ -772,10 +801,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         if (((downScroll && scrollArgs.direction !== 'up' && (scrollArgs.offset.top < (rowHeight * this.totalRecords)))
             || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left') ||
             ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') && (downScroll || upScroll) || isCountRequired(this.parent))) {
+                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== ''))) {
             var viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
             this.previousInfo = viewInfo;
-            if (this.prevInfo && viewInfo.event !== 'refresh-virtual-block' && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
+            if (this.prevInfo && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
                 || ((info.axis === 'X' && this.prevInfo.columnIndexes.toString() === viewInfo.columnIndexes.toString())
                     || (this.parent.isFrozenGrid() && this.parent.getVisibleFrozenLeftCount() >= viewInfo.columnIndexes[0]
                         && this.prevInfo.columnIndexes.toString().includes(viewInfo.columnIndexes.toString()))))) {
@@ -797,7 +826,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 viewInfo.loadNext = false;
             }
             this.requestType = 'virtualscroll';
-            if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
+            if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left' && !isRemoteData(this.parent.root)) {
                 viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
             }
             if (this.parent.enableVirtualMaskRow) {
@@ -870,9 +899,33 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'Y') {
                 this.isExpandCollapse = false;
             }
+            var reduceWidth_1 = 0;
+            if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid()) {
+                var frzLeftWidth_2 = 0;
+                this.parent.getColumns().filter(function (col) {
+                    if (col.visible) {
+                        reduceWidth_1 += parseInt(col.width.toString(), 10);
+                        if (col.freeze === 'Left') {
+                            frzLeftWidth_2 += parseInt(col.width.toString(), 10);
+                        }
+                    }
+                });
+                var cIndex = info.columnIndexes;
+                width = this.getColumnOffset(cIndex[cIndex.length - 1]) - this.getColumnOffset(cIndex[0] - 1) + '';
+                if (cBlock > this.parent.getVisibleFrozenLeftCount()) {
+                    cOffset = cOffset - frzLeftWidth_2;
+                }
+                this.resetStickyLeftPos(cOffset, newChild);
+            }
             if (!this.isExpandCollapse || this.translateY === 0) {
                 this.translateY = this.translateY < 0 ? 0 : this.translateY;
                 getValue('virtualEle', this).adjustTable(cOffset, this.translateY);
+                if (this.parent.enableColumnVirtualization) {
+                    this.header.virtualEle.adjustTable(cOffset, 0);
+                    if (this.parent.isFrozenGrid()) {
+                        this.resetStickyLeftPos(cOffset);
+                    }
+                }
             }
             else {
                 this.isExpandCollapse = false;
@@ -991,7 +1044,12 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
         this["" + options].prevTop = this["" + options].prevLeft = 0;
         var isScrollByFocus = 'isScrollByFocus';
         return function (e) {
-            if (instance.isEdit && instance.root.editModule["" + isScrollByFocus]) {
+            var keyPress = 'keyPress';
+            var keyaction;
+            if (instance && instance.root && instance.root.editModule && instance.root.editModule["" + keyPress]) {
+                keyaction = instance.root.editModule["" + keyPress];
+            }
+            if ((instance.isEdit && instance.root.editModule["" + isScrollByFocus]) || (instance.isEdit && (keyaction === 'tab' || keyaction === 'shiftTab'))) {
                 instance.root.editModule["" + isScrollByFocus] = false;
                 return;
             }

package/styles/bds-lite.css

@@ -371,6 +371,12 @@
   content: "\e72a";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -390,6 +396,22 @@
   text-align: center;
   vertical-align: unset;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -507,6 +529,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -515,6 +538,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bds.css

@@ -371,6 +371,12 @@
   content: "\e72a";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -390,6 +396,22 @@
   text-align: center;
   vertical-align: unset;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -507,6 +529,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -515,6 +538,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap-dark-lite.css

@@ -132,6 +132,12 @@
   content: "\e22f";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -151,6 +157,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -268,6 +290,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -276,6 +299,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap-dark.css

@@ -132,6 +132,12 @@
   content: "\e22f";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -151,6 +157,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -268,6 +290,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -276,6 +299,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap-lite.css

@@ -132,6 +132,12 @@
   content: "\e22f";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -151,6 +157,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -271,6 +293,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -279,6 +302,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap.css

@@ -132,6 +132,12 @@
   content: "\e22f";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -151,6 +157,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -271,6 +293,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -279,6 +302,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap4-lite.css

@@ -168,6 +168,12 @@
   content: "\e70b";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -187,6 +193,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -304,6 +326,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -312,6 +335,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap4.css

@@ -168,6 +168,12 @@
   content: "\e70b";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -187,6 +193,22 @@
   text-align: center;
   vertical-align: middle;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -304,6 +326,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -312,6 +335,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;

package/styles/bootstrap5-dark-lite.css

@@ -171,6 +171,12 @@
   content: "\e75c";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -190,6 +196,22 @@
   text-align: center;
   vertical-align: unset;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -307,6 +329,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -315,6 +338,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;