@syncfusion/ej2-treegrid 28.1.33 → 28.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/ej2-treegrid.min.js +1 -10
  2. package/dist/ej2-treegrid.umd.min.js +1 -10
  3. package/dist/ej2-treegrid.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-treegrid.es2015.js +47 -10
  5. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  6. package/dist/es6/ej2-treegrid.es5.js +47 -10
  7. package/dist/es6/ej2-treegrid.es5.js.map +1 -1
  8. package/dist/global/ej2-treegrid.min.js +1 -10
  9. package/dist/global/ej2-treegrid.min.js.map +1 -1
  10. package/dist/global/index.d.ts +0 -9
  11. package/package.json +6 -7
  12. package/src/treegrid/base/treegrid.js +29 -2
  13. package/src/treegrid/renderer/virtual-tree-content-render.js +18 -8
  14. package/styles/bds-lite.css +27 -12
  15. package/styles/bds.css +27 -12
  16. package/styles/bootstrap-dark-lite.css +39 -16
  17. package/styles/bootstrap-dark.css +39 -16
  18. package/styles/bootstrap-lite.css +50 -15
  19. package/styles/bootstrap.css +50 -15
  20. package/styles/bootstrap4-lite.css +39 -16
  21. package/styles/bootstrap4.css +39 -16
  22. package/styles/bootstrap5-dark-lite.css +39 -16
  23. package/styles/bootstrap5-dark.css +39 -16
  24. package/styles/bootstrap5-lite.css +39 -16
  25. package/styles/bootstrap5.3-lite.css +39 -16
  26. package/styles/bootstrap5.3.css +39 -16
  27. package/styles/bootstrap5.css +39 -16
  28. package/styles/fabric-dark-lite.css +39 -16
  29. package/styles/fabric-dark.css +39 -16
  30. package/styles/fabric-lite.css +39 -16
  31. package/styles/fabric.css +39 -16
  32. package/styles/fluent-dark-lite.css +39 -16
  33. package/styles/fluent-dark.css +39 -16
  34. package/styles/fluent-lite.css +39 -16
  35. package/styles/fluent.css +39 -16
  36. package/styles/fluent2-lite.css +39 -16
  37. package/styles/fluent2.css +39 -16
  38. package/styles/highcontrast-light-lite.css +39 -16
  39. package/styles/highcontrast-light.css +39 -16
  40. package/styles/highcontrast-lite.css +39 -16
  41. package/styles/highcontrast.css +39 -16
  42. package/styles/material-dark-lite.css +39 -16
  43. package/styles/material-dark.css +39 -16
  44. package/styles/material-lite.css +39 -16
  45. package/styles/material.css +39 -16
  46. package/styles/material3-dark-lite.css +39 -16
  47. package/styles/material3-dark.css +39 -16
  48. package/styles/material3-lite.css +39 -16
  49. package/styles/material3.css +39 -16
  50. package/styles/tailwind-dark-lite.css +39 -16
  51. package/styles/tailwind-dark.css +39 -16
  52. package/styles/tailwind-lite.css +39 -16
  53. package/styles/tailwind.css +39 -16
  54. package/styles/tailwind3-lite.css +39 -16
  55. package/styles/tailwind3.css +39 -16
  56. package/styles/treegrid/_icons.scss +15 -5
  57. package/styles/treegrid/_layout.scss +33 -13
  58. package/styles/treegrid/bds.css +27 -12
  59. package/styles/treegrid/bootstrap-dark.css +39 -16
  60. package/styles/treegrid/bootstrap.css +50 -15
  61. package/styles/treegrid/bootstrap4.css +39 -16
  62. package/styles/treegrid/bootstrap5-dark.css +39 -16
  63. package/styles/treegrid/bootstrap5.3.css +39 -16
  64. package/styles/treegrid/bootstrap5.css +39 -16
  65. package/styles/treegrid/fabric-dark.css +39 -16
  66. package/styles/treegrid/fabric.css +39 -16
  67. package/styles/treegrid/fluent-dark.css +39 -16
  68. package/styles/treegrid/fluent.css +39 -16
  69. package/styles/treegrid/fluent2.css +39 -16
  70. package/styles/treegrid/highcontrast-light.css +39 -16
  71. package/styles/treegrid/highcontrast.css +39 -16
  72. package/styles/treegrid/icons/_bootstrap-dark.scss +15 -5
  73. package/styles/treegrid/icons/_bootstrap.scss +31 -4
  74. package/styles/treegrid/icons/_bootstrap4.scss +15 -5
  75. package/styles/treegrid/icons/_bootstrap5.3.scss +15 -5
  76. package/styles/treegrid/icons/_bootstrap5.scss +15 -5
  77. package/styles/treegrid/icons/_fabric-dark.scss +15 -5
  78. package/styles/treegrid/icons/_fabric.scss +15 -5
  79. package/styles/treegrid/icons/_fluent.scss +15 -5
  80. package/styles/treegrid/icons/_fluent2.scss +15 -5
  81. package/styles/treegrid/icons/_fusionnew.scss +8 -5
  82. package/styles/treegrid/icons/_highcontrast-light.scss +15 -5
  83. package/styles/treegrid/icons/_highcontrast.scss +15 -5
  84. package/styles/treegrid/icons/_material-dark.scss +15 -5
  85. package/styles/treegrid/icons/_material.scss +15 -5
  86. package/styles/treegrid/icons/_material3.scss +15 -5
  87. package/styles/treegrid/icons/_tailwind-dark.scss +15 -5
  88. package/styles/treegrid/icons/_tailwind.scss +15 -5
  89. package/styles/treegrid/icons/_tailwind3.scss +15 -5
  90. package/styles/treegrid/material-dark.css +39 -16
  91. package/styles/treegrid/material.css +39 -16
  92. package/styles/treegrid/material3-dark.css +39 -16
  93. package/styles/treegrid/material3.css +39 -16
  94. package/styles/treegrid/tailwind-dark.css +39 -16
  95. package/styles/treegrid/tailwind.css +39 -16
  96. package/styles/treegrid/tailwind3.css +39 -16
@@ -4301,8 +4301,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
4301
4301
  var freezePresent = this.injectedModules.filter(function (e) {
4302
4302
  return e.prototype.getModuleName() === 'freeze';
4303
4303
  });
4304
+ var hasFreezeProp = Array.isArray(this.columns) &&
4305
+ this.columns.some(function (col) { return !!col.freeze; });
4304
4306
  if ((this.frozenColumns || this.frozenRows || this.getFrozenColumns() ||
4305
- this.grid.getFrozenLeftColumnsCount() || this.grid.getFrozenRightColumnsCount()) && freezePresent.length > 0) {
4307
+ hasFreezeProp) && freezePresent.length > 0) {
4306
4308
  modules.push({
4307
4309
  member: 'freeze', args: [this],
4308
4310
  name: 'Freeze'
@@ -4474,7 +4476,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
4474
4476
  this.grid.rowDropSettings.targetID += '_gridcontrol';
4475
4477
  }
4476
4478
  this.addListener();
4477
- var gridContainer = createElement('div', { id: this.element.id + '_gridcontrol' });
4479
+ var gridContainer = createElement('div', { id: this.element.id + '_gridcontrol', className: 'e-treelistgrid' });
4478
4480
  addClass([this.element], 'e-treegrid');
4479
4481
  if (!isNullOrUndefined(this.height) && typeof (this.height) === 'string' && this.height.indexOf('%') !== -1) {
4480
4482
  this.element.style.height = this.height;
@@ -6706,6 +6708,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6706
6708
  };
6707
6709
  // Internal method to handle the rows expand
6708
6710
  TreeGrid.prototype.expandRows = function (row, record, parentRec) {
6711
+ var initialTotalRecordsCount = this.grid.totalDataRecordsCount;
6709
6712
  this.expandCollapse('expand', row, record);
6710
6713
  var children = 'Children';
6711
6714
  if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record["" + children]))) {
@@ -6726,6 +6729,18 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6726
6729
  this.trigger(expanded, expandArgs);
6727
6730
  }
6728
6731
  }
6732
+ if (this.enableVirtualization) {
6733
+ var index = this.grid.currentViewData.indexOf(record);
6734
+ var expandedRow = isNullOrUndefined(row) ? this.getRows()[parseInt(index.toString(), 10)] : row;
6735
+ if (!isNullOrUndefined(expandedRow)) {
6736
+ var rowIndex = +expandedRow.getAttribute('data-rowindex');
6737
+ var outBuffer = this.grid.pageSettings.pageSize - Math.ceil(this.grid.pageSettings.pageSize / 2);
6738
+ var lastBlockIdx = initialTotalRecordsCount - outBuffer;
6739
+ if (rowIndex > lastBlockIdx) {
6740
+ this.grid.getContent().firstElementChild.scrollTop = rowIndex * this.grid.getRowHeight();
6741
+ }
6742
+ }
6743
+ }
6729
6744
  };
6730
6745
  TreeGrid.prototype.expandCollapseAllChildren = function (record, action, key, level) {
6731
6746
  if ((!isNullOrUndefined(key) && record[this.getPrimaryKeyFieldNames()[0]] !== key) ||
@@ -6841,6 +6856,18 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6841
6856
  this.grid.getContent().firstElementChild.scrollBy(0, this.grid.getRowHeight());
6842
6857
  }
6843
6858
  }
6859
+ if (this.enableVirtualization) {
6860
+ var index = this.grid.currentViewData.indexOf(record);
6861
+ var collapsedRow = isNullOrUndefined(row) ? this.getRows()[parseInt(index.toString(), 10)] : row;
6862
+ if (!isNullOrUndefined(collapsedRow)) {
6863
+ var rowIndex = +collapsedRow.getAttribute('data-rowindex');
6864
+ var outBuffer = this.grid.pageSettings.pageSize - Math.ceil(this.grid.pageSettings.pageSize / 2);
6865
+ var lastBlockIdx = this.grid.totalDataRecordsCount - outBuffer;
6866
+ if (rowIndex > lastBlockIdx) {
6867
+ this.grid.getContent().firstElementChild.scrollBy(0, (rowIndex - lastBlockIdx) * this.grid.getRowHeight());
6868
+ }
6869
+ }
6870
+ }
6844
6871
  }
6845
6872
  };
6846
6873
  TreeGrid.prototype.updateExpandStateMapping = function (record, state) {
@@ -13837,13 +13864,13 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
13837
13864
  VirtualTreeContentRenderer.prototype.dataBoundEvent = function () {
13838
13865
  var dataBoundEve = 'dataBound';
13839
13866
  var initialRowTop = 'initialRowTop';
13840
- if (this.parent.getRows().length && !isNullOrUndefined(this.parent.getRowByIndex(0)) && !this["" + initialRowTop]) {
13867
+ if (!isNullOrUndefined(this.parent.getRows()) && this.parent.getRows().length && !isNullOrUndefined(this.parent.getRowByIndex(0)) && !this["" + initialRowTop]) {
13841
13868
  var rowTop = this.parent.getRowByIndex(0).getBoundingClientRect().top;
13842
13869
  var gridTop = this.parent.element.getBoundingClientRect().top;
13843
13870
  if (rowTop > 0) {
13844
13871
  this["" + initialRowTop] = this.parent.getRowByIndex(0).getBoundingClientRect().top - gridTop;
13845
13872
  }
13846
- else {
13873
+ else if (this.parent.selectedRowIndex === -1) {
13847
13874
  this["" + initialRowTop] = this.content.getBoundingClientRect().top -
13848
13875
  this.parent.getRowByIndex(0).getBoundingClientRect().height;
13849
13876
  }
@@ -14029,7 +14056,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14029
14056
  content = this.parent.getContent().querySelector('.e-content');
14030
14057
  }
14031
14058
  var scrollHeight = outBuffer * rowHeight;
14032
- var upScroll = (scrollArgs.offset.top - this.translateY) < 0;
14059
+ var upScroll = (scrollArgs.offset.top - this.translateY) < 0 && this.activeKey !== 'downArrow';
14033
14060
  var downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) + rowHeight >= scrollHeight;
14034
14061
  var selectedRowIndex = 'selectedRowIndex';
14035
14062
  var currentViewData = this.parent.currentViewData;
@@ -14042,7 +14069,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14042
14069
  - this.parent.pageSettings.pageSize;
14043
14070
  index = (index > 0) ? index : 0;
14044
14071
  if (!isNullOrUndefined(this["" + selectedRowIndex]) && this["" + selectedRowIndex] !== -1 && index !== this["" + selectedRowIndex] &&
14045
- ((this.parent.rowHeight * this.parent.pageSettings.pageSize) < content.scrollTop)) {
14072
+ ((this.parent.rowHeight * this.parent.pageSettings.pageSize) < content.scrollTop) && !this.parent.allowRowDragAndDrop) {
14046
14073
  index = this["" + selectedRowIndex];
14047
14074
  }
14048
14075
  this.startIndex = index;
@@ -14054,7 +14081,8 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14054
14081
  this.startIndex = (this.startIndex - remains) < 0 ? 0 : (this.startIndex - remains);
14055
14082
  }
14056
14083
  if (currentViewData.length && (currentViewData[0]["" + indexValue] >= this.parent.pageSettings.pageSize / 2) &&
14057
- ((currentViewData[0]["" + indexValue] - this.startIndex) < (this.parent.pageSettings.pageSize / 2)) && this.parent.selectionModule.isRowSelected) {
14084
+ ((currentViewData[0]["" + indexValue] - this.startIndex) < (this.parent.pageSettings.pageSize / 2)) &&
14085
+ this.parent.selectionModule && this.parent.selectionModule.isRowSelected) {
14058
14086
  this.startIndex = currentViewData[0]["" + indexValue] - (this.parent.pageSettings.pageSize / 2);
14059
14087
  this.endIndex = this.startIndex + this.parent.pageSettings.pageSize;
14060
14088
  }
@@ -14074,6 +14102,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14074
14102
  (this.endIndex - this.parent.pageSettings.pageSize) * (this.parent.rowHeight ?
14075
14103
  this.parent.rowHeight : this.parent.getRowHeight()) : 0;
14076
14104
  }
14105
+ else if (this.startIndex === this["" + selectedRowIndex]) {
14106
+ this.translateY = scrollArgs.offset.top;
14107
+ }
14077
14108
  else {
14078
14109
  this.translateY = (scrollArgs.offset.top - (outBuffer * rowHeight) > 0) ?
14079
14110
  scrollArgs.offset.top - (outBuffer * rowHeight) + rowHeight : 0;
@@ -14093,7 +14124,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14093
14124
  var nextSetResIndex = ~~(content.scrollTop / rowHeight);
14094
14125
  var isLastBlock = (this["" + selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
14095
14126
  if (!isNullOrUndefined(this["" + selectedRowIndex]) && this["" + selectedRowIndex] !== -1 &&
14096
- nextSetResIndex !== this["" + selectedRowIndex] && !isLastBlock) {
14127
+ nextSetResIndex !== this["" + selectedRowIndex] && !isLastBlock && !this.parent.allowRowDragAndDrop) {
14097
14128
  nextSetResIndex = this["" + selectedRowIndex];
14098
14129
  }
14099
14130
  var lastIndex = nextSetResIndex + this.parent.pageSettings.pageSize;
@@ -14108,7 +14139,8 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14108
14139
  this.startIndex = lastIndex - (this.parent.pageSettings.pageSize / 2);
14109
14140
  }
14110
14141
  if (currentViewData.length && this.startIndex > currentViewData[0]["" + indexValue] &&
14111
- ((this.startIndex - currentViewData[0]["" + indexValue]) < (this.parent.pageSettings.pageSize / 2)) && this.parent.selectionModule.isRowSelected) {
14142
+ ((this.startIndex - currentViewData[0]["" + indexValue]) < (this.parent.pageSettings.pageSize / 2)) &&
14143
+ this.parent.selectionModule && this.parent.selectionModule.isRowSelected) {
14112
14144
  this.startIndex = currentViewData[0]["" + indexValue] + (this.parent.pageSettings.pageSize / 2);
14113
14145
  }
14114
14146
  if (this.parent.root.isSelfReference) {
@@ -14120,7 +14152,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
14120
14152
  }
14121
14153
  else {
14122
14154
  if (this.totalRecords === this.endIndex) {
14123
- this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
14155
+ if (isLastBlock) {
14156
+ this.translateY = (this.totalRecords * rowHeight) - (this.parent.pageSettings.pageSize * rowHeight);
14157
+ }
14158
+ else {
14159
+ this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
14160
+ }
14124
14161
  }
14125
14162
  else {
14126
14163
  if (this.parent.getFrozenColumns() > 0) {