@syncfusion/ej2-treegrid 27.1.51 → 27.1.55

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 (76) hide show
  1. package/dist/ej2-treegrid.min.js +2 -2
  2. package/dist/ej2-treegrid.umd.min.js +2 -2
  3. package/dist/ej2-treegrid.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-treegrid.es2015.js +56 -28
  5. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  6. package/dist/es6/ej2-treegrid.es5.js +56 -28
  7. package/dist/es6/ej2-treegrid.es5.js.map +1 -1
  8. package/dist/global/ej2-treegrid.min.js +2 -2
  9. package/dist/global/ej2-treegrid.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +9 -9
  12. package/src/treegrid/actions/detail-row.js +1 -1
  13. package/src/treegrid/actions/freeze-column.js +3 -3
  14. package/src/treegrid/base/data.js +1 -1
  15. package/src/treegrid/base/treegrid.d.ts +1 -0
  16. package/src/treegrid/base/treegrid.js +32 -19
  17. package/src/treegrid/renderer/render.js +4 -4
  18. package/src/treegrid/renderer/virtual-tree-content-render.js +15 -0
  19. package/styles/bootstrap-dark-lite.css +10 -1
  20. package/styles/bootstrap-dark.css +10 -1
  21. package/styles/bootstrap-lite.css +10 -1
  22. package/styles/bootstrap.css +10 -1
  23. package/styles/bootstrap4-lite.css +10 -1
  24. package/styles/bootstrap4.css +10 -1
  25. package/styles/bootstrap5-dark-lite.css +10 -1
  26. package/styles/bootstrap5-dark.css +10 -1
  27. package/styles/bootstrap5-lite.css +10 -1
  28. package/styles/bootstrap5.3-lite.css +10 -1
  29. package/styles/bootstrap5.3.css +10 -1
  30. package/styles/bootstrap5.css +10 -1
  31. package/styles/fabric-dark-lite.css +10 -1
  32. package/styles/fabric-dark.css +10 -1
  33. package/styles/fabric-lite.css +10 -1
  34. package/styles/fabric.css +10 -1
  35. package/styles/fluent-dark-lite.css +10 -1
  36. package/styles/fluent-dark.css +10 -1
  37. package/styles/fluent-lite.css +10 -1
  38. package/styles/fluent.css +10 -1
  39. package/styles/fluent2-lite.css +10 -1
  40. package/styles/fluent2.css +10 -1
  41. package/styles/highcontrast-light-lite.css +10 -1
  42. package/styles/highcontrast-light.css +10 -1
  43. package/styles/highcontrast-lite.css +10 -1
  44. package/styles/highcontrast.css +10 -1
  45. package/styles/material-dark-lite.css +10 -1
  46. package/styles/material-dark.css +10 -1
  47. package/styles/material-lite.css +10 -1
  48. package/styles/material.css +10 -1
  49. package/styles/material3-dark-lite.css +10 -1
  50. package/styles/material3-dark.css +10 -1
  51. package/styles/material3-lite.css +10 -1
  52. package/styles/material3.css +10 -1
  53. package/styles/tailwind-dark-lite.css +10 -1
  54. package/styles/tailwind-dark.css +10 -1
  55. package/styles/tailwind-lite.css +10 -1
  56. package/styles/tailwind.css +10 -1
  57. package/styles/treegrid/_layout.scss +11 -1
  58. package/styles/treegrid/bootstrap-dark.css +10 -1
  59. package/styles/treegrid/bootstrap.css +10 -1
  60. package/styles/treegrid/bootstrap4.css +10 -1
  61. package/styles/treegrid/bootstrap5-dark.css +10 -1
  62. package/styles/treegrid/bootstrap5.3.css +10 -1
  63. package/styles/treegrid/bootstrap5.css +10 -1
  64. package/styles/treegrid/fabric-dark.css +10 -1
  65. package/styles/treegrid/fabric.css +10 -1
  66. package/styles/treegrid/fluent-dark.css +10 -1
  67. package/styles/treegrid/fluent.css +10 -1
  68. package/styles/treegrid/fluent2.css +10 -1
  69. package/styles/treegrid/highcontrast-light.css +10 -1
  70. package/styles/treegrid/highcontrast.css +10 -1
  71. package/styles/treegrid/material-dark.css +10 -1
  72. package/styles/treegrid/material.css +10 -1
  73. package/styles/treegrid/material3-dark.css +10 -1
  74. package/styles/treegrid/material3.css +10 -1
  75. package/styles/treegrid/tailwind-dark.css +10 -1
  76. package/styles/treegrid/tailwind.css +10 -1
@@ -1693,7 +1693,7 @@ var Render = /** @__PURE__ @class */ (function () {
1693
1693
  parentData[this.parent.expandStateMapping]) || this.parent.enableCollapseAll)) ||
1694
1694
  !getExpandStatus(this.parent, args.data, this.parent.grid.getCurrentViewRecords());
1695
1695
  if (collapsed && !isNullOrUndefined(args.row)) {
1696
- args.row.style.display = 'none';
1696
+ this.parent['toggleRowVisibility'](args.row, 'e-childrow-hidden');
1697
1697
  var rowsObj = this.parent.grid.getRowsObject();
1698
1698
  if (!this.parent.grid.isFrozenGrid() && !isNullOrUndefined(args.row.getAttribute('data-uid'))) {
1699
1699
  rowsObj.filter(function (e) { return e.uid === args.row.getAttribute('data-uid'); })[0].visible = false;
@@ -1706,8 +1706,8 @@ var Render = /** @__PURE__ @class */ (function () {
1706
1706
  return getValue(proxy_1.idMapping, rec) === getValue(proxy_1.parentIdMapping, data);
1707
1707
  });
1708
1708
  if (parentrec.length > 0 && !parentrec[0].isSummaryRow && !isNullOrUndefined(args.row)) {
1709
- var display = parentrec[0].expanded ? 'table-row' : 'none';
1710
- args.row.setAttribute('style', 'display: ' + display + ';');
1709
+ var display = parentrec[0].expanded ? 'e-childrow-visible' : 'e-childrow-hidden';
1710
+ this.parent['toggleRowVisibility'](args.row, display);
1711
1711
  }
1712
1712
  }
1713
1713
  //addClass([args.row], 'e-gridrowindex' + index + 'level' + (<ITreeData>args.data).level);
@@ -1724,7 +1724,7 @@ var Render = /** @__PURE__ @class */ (function () {
1724
1724
  }
1725
1725
  if (this.parent.enableCollapseAll && this.parent.initialRender) {
1726
1726
  if (!isNullOrUndefined(data.parentItem)) {
1727
- args.row.style.display = 'none';
1727
+ this.parent['toggleRowVisibility'](args.row, 'e-childrow-hidden');
1728
1728
  }
1729
1729
  }
1730
1730
  }
@@ -2346,7 +2346,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
2346
2346
  rowDetails.record.expanded = true;
2347
2347
  }
2348
2348
  for (var i = 0; i < rowDetails.rows.length; i++) {
2349
- rowDetails.rows[parseInt(i.toString(), 10)].style.display = 'table-row';
2349
+ this.parent['toggleRowVisibility'](rowDetails.rows[parseInt(i.toString(), 10)], 'e-childrow-visible');
2350
2350
  if (!this.parent.loadChildOnDemand) {
2351
2351
  var targetEle = rowDetails.rows[parseInt(i.toString(), 10)].getElementsByClassName('e-treegridcollapse')[0];
2352
2352
  childRecord = this.parent.rowTemplate ?
@@ -4155,7 +4155,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
4155
4155
  TreeGrid.prototype.findnextRowElement = function (summaryRowElement) {
4156
4156
  var rowElement = summaryRowElement.nextElementSibling;
4157
4157
  if (rowElement !== null && (rowElement.className.indexOf('e-summaryrow') !== -1 ||
4158
- rowElement.style.display === 'none')) {
4158
+ rowElement.classList.contains('e-childrow-hidden'))) {
4159
4159
  rowElement = this.findnextRowElement(rowElement);
4160
4160
  }
4161
4161
  return rowElement;
@@ -4164,7 +4164,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
4164
4164
  TreeGrid.prototype.findPreviousRowElement = function (summaryRowElement) {
4165
4165
  var rowElement = summaryRowElement.previousElementSibling;
4166
4166
  if (rowElement !== null && (rowElement.className.indexOf('e-summaryrow') !== -1 ||
4167
- rowElement.style.display === 'none')) {
4167
+ rowElement.classList.contains('e-childrow-hidden'))) {
4168
4168
  rowElement = this.findPreviousRowElement(rowElement);
4169
4169
  }
4170
4170
  return rowElement;
@@ -5783,12 +5783,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
5783
5783
  */
5784
5784
  TreeGrid.prototype.getPersistData = function () {
5785
5785
  var keyEntity = ['pageSettings', 'sortSettings',
5786
- 'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex'];
5786
+ 'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex', 'scrollPosition'];
5787
5787
  var ignoreOnPersist = {
5788
5788
  pageSettings: ['template', 'pageSizes', 'pageSizeMode', 'enableQueryString', 'totalRecordsCount', 'pageCount'],
5789
5789
  filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent', 'hierarchyMode'],
5790
5790
  searchSettings: ['fields', 'operator', 'ignoreCase'],
5791
- sortSettings: [], columns: [], selectedRowIndex: []
5791
+ sortSettings: [], columns: [], selectedRowIndex: [], scrollPosition: []
5792
5792
  };
5793
5793
  var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',
5794
5794
  'commandTemplate', 'commands', 'dataSource'];
@@ -6638,6 +6638,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6638
6638
  });
6639
6639
  }
6640
6640
  record = this.getCollapseExpandRecords(row, record);
6641
+ if (isNullOrUndefined(row) && isNullOrUndefined(record)) {
6642
+ return;
6643
+ }
6641
6644
  if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
6642
6645
  this.lastRowBorder(row, false);
6643
6646
  }
@@ -6719,7 +6722,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6719
6722
  return e.hasChildRecords;
6720
6723
  });
6721
6724
  }
6722
- else if (isNullOrUndefined(record)) {
6725
+ else if (isNullOrUndefined(record) && !isNullOrUndefined(row)) {
6723
6726
  if (this.detailTemplate) {
6724
6727
  record = this.grid.getCurrentViewRecords()[row.getAttribute('data-rowindex')];
6725
6728
  }
@@ -6760,6 +6763,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6760
6763
  });
6761
6764
  }
6762
6765
  record = this.getCollapseExpandRecords(row, record);
6766
+ if (isNullOrUndefined(row) && isNullOrUndefined(record)) {
6767
+ return;
6768
+ }
6763
6769
  if (this.isCollapseAll && !isRemoteData(this)) {
6764
6770
  var args = { data: parentRec, row: row, cancel: false };
6765
6771
  if (!this.isCollapsingEventTriggered) {
@@ -6781,7 +6787,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
6781
6787
  else if (!this.isCollapseAll || (this.isCollapseAll && isRemoteData(this))) {
6782
6788
  var args = { data: record, row: row, cancel: false };
6783
6789
  this.trigger(collapsing, args, function (collapsingArgs) {
6784
- if (!collapsingArgs.cancel && !isNullOrUndefined(record)) {
6790
+ if (!collapsingArgs.cancel) {
6785
6791
  _this.collapseRows(row, record, parentRec);
6786
6792
  }
6787
6793
  });
@@ -7088,7 +7094,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7088
7094
  else {
7089
7095
  var displayAction = void 0;
7090
7096
  if (action === 'expand') {
7091
- displayAction = 'table-row';
7097
+ displayAction = 'e-childrow-visible';
7092
7098
  if (!isChild) {
7093
7099
  record.expanded = true;
7094
7100
  this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
@@ -7109,7 +7115,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7109
7115
  removeClass([targetEle], 'e-treegridcollapse');
7110
7116
  }
7111
7117
  else {
7112
- displayAction = 'none';
7118
+ displayAction = 'e-childrow-hidden';
7113
7119
  if (!isChild || isCountRequired(this)) {
7114
7120
  record.expanded = false;
7115
7121
  this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
@@ -7310,7 +7316,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7310
7316
  var rows_2 = this.getContentTable().rows;
7311
7317
  gridRows = [].slice.call(rows_2);
7312
7318
  }
7313
- var displayAction = (action === 'expand') ? 'table-row' : 'none';
7319
+ var displayAction = (action === 'expand') ? 'e-childrow-visible' : 'e-childrow-hidden';
7314
7320
  var primaryKeyField = this.getPrimaryKeyFieldNames()[0];
7315
7321
  if (this.enableImmutableMode && !this.allowPaging) {
7316
7322
  rows = [];
@@ -7350,11 +7356,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7350
7356
  });
7351
7357
  for (var i = 0; i < rows.length; i++) {
7352
7358
  if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)])) {
7353
- rows[parseInt(i.toString(), 10)].style.display = displayAction;
7359
+ this.toggleRowVisibility(rows[parseInt(i.toString(), 10)], displayAction);
7354
7360
  }
7355
7361
  if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
7356
7362
  || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
7357
- gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
7363
+ gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'e-childrow-hidden' ? true : false;
7358
7364
  var parentRecord = currentViewData.filter(function (e) {
7359
7365
  return e.uniqueID === currentRecord[0].parentUniqueID;
7360
7366
  });
@@ -7363,10 +7369,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7363
7369
  }
7364
7370
  }
7365
7371
  if (!isNullOrUndefined(movableRows)) {
7366
- movableRows[parseInt(i.toString(), 10)].style.display = displayAction;
7372
+ this.toggleRowVisibility(movableRows[parseInt(i.toString(), 10)], displayAction);
7367
7373
  }
7368
7374
  if (!isNullOrUndefined(freezeRightRows)) {
7369
- freezeRightRows[parseInt(i.toString(), 10)].style.display = displayAction;
7375
+ this.toggleRowVisibility(freezeRightRows[parseInt(i.toString(), 10)], displayAction);
7370
7376
  }
7371
7377
  this.notify('childRowExpand', { row: rows[parseInt(i.toString(), 10)] });
7372
7378
  if ((!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
@@ -7380,8 +7386,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7380
7386
  for (var i = 0; i < detailrows.length; i++) {
7381
7387
  if (!isNullOrUndefined(detailrows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization ||
7382
7388
  this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
7383
- gridRowsObject[detailrows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'none' ? true : false;
7384
- detailrows[parseInt(i.toString(), 10)].style.display = displayAction;
7389
+ gridRowsObject[detailrows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'e-childrow-hidden' ? true : false;
7390
+ this.toggleRowVisibility(detailrows[parseInt(i.toString(), 10)], displayAction);
7385
7391
  }
7386
7392
  }
7387
7393
  if (!this.allowPaging && !(this.enableVirtualization || this.enableInfiniteScrolling || isRemoteData(this)
@@ -7389,12 +7395,18 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7389
7395
  this.grid.notify('refresh-Expand-and-Collapse', { rows: this.grid.getRowsObject() });
7390
7396
  }
7391
7397
  };
7398
+ TreeGrid.prototype.toggleRowVisibility = function (row, displayAction) {
7399
+ if (row) {
7400
+ row.classList.remove('e-childrow-hidden', 'e-childrow-visible');
7401
+ row.classList.add(displayAction);
7402
+ }
7403
+ };
7392
7404
  TreeGrid.prototype.updateAltRow = function (rows) {
7393
7405
  if (this.enableAltRow && !this.rowTemplate) {
7394
7406
  var visibleRowCount = 0;
7395
7407
  for (var i = 0; rows && i < rows.length; i++) {
7396
7408
  var gridRow = rows[parseInt(i.toString(), 10)];
7397
- if (gridRow.style.display !== 'none') {
7409
+ if (!gridRow.classList.contains('e-childrow-hidden')) {
7398
7410
  if (gridRow.classList.contains('e-altrow')) {
7399
7411
  removeClass([gridRow], 'e-altrow');
7400
7412
  }
@@ -7440,15 +7452,15 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7440
7452
  });
7441
7453
  }
7442
7454
  for (var i = 0; i < rows.length; i++) {
7443
- rows[parseInt(i.toString(), 10)].style.display = 'none';
7455
+ this.toggleRowVisibility(rows[parseInt(i.toString(), 10)], 'e-childrow-hidden');
7444
7456
  row = rows[parseInt(i.toString(), 10)];
7445
7457
  var collapsingTd = rows[parseInt(i.toString(), 10)].querySelector('.e-detailrowexpand');
7446
7458
  if (!isNullOrUndefined(collapsingTd)) {
7447
7459
  this.grid.detailRowModule.collapse(collapsingTd);
7448
7460
  }
7449
7461
  if (freeze) {
7450
- movablerows[parseInt(i.toString(), 10)].style.display = 'none';
7451
- rightrows[parseInt(i.toString(), 10)].style.display = 'none';
7462
+ this.toggleRowVisibility(movablerows[parseInt(i.toString(), 10)], 'e-childrow-hidden');
7463
+ this.toggleRowVisibility(rightrows[parseInt(i.toString(), 10)], 'e-childrow-hidden');
7452
7464
  if (!rows[parseInt(i.toString(), 10)].querySelector('.e-treecolumn-container .e-treegridexpand')) {
7453
7465
  if (movablerows[parseInt(i.toString(), 10)].querySelector('.e-treecolumn-container .e-treegridexpand')) {
7454
7466
  row = movablerows[parseInt(i.toString(), 10)];
@@ -7599,6 +7611,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
7599
7611
  * @returns {void}
7600
7612
  */
7601
7613
  TreeGrid.prototype.clearSelection = function () {
7614
+ this.grid.selectionModule['actualTarget'] = null;
7602
7615
  this.grid.clearSelection();
7603
7616
  };
7604
7617
  /**
@@ -13248,7 +13261,7 @@ var DetailRow = /** @__PURE__ @class */ (function () {
13248
13261
  return;
13249
13262
  }
13250
13263
  for (var i = 0; i < args.detailrows.length; i++) {
13251
- args.detailrows[parseInt(i.toString(), 10)].style.display = args.action;
13264
+ this.parent['toggleRowVisibility'](args.detailrows[parseInt(i.toString(), 10)], args.action);
13252
13265
  }
13253
13266
  };
13254
13267
  DetailRow.prototype.detaildataBound = function (args) {
@@ -13409,6 +13422,18 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
13409
13422
  this.parent["" + action]('refresh-virtual-block', this.refreshContentRows, this);
13410
13423
  this.fn = function () {
13411
13424
  _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction(), _this.parent);
13425
+ var gObj = _this.parent;
13426
+ if (gObj.root.enablePersistence && gObj.root.scrollPosition) {
13427
+ _this.content.scrollTop = gObj.root.scrollPosition.top;
13428
+ if (gObj.root.enableColumnVirtualization) {
13429
+ _this.content.scrollLeft = gObj.root.scrollPosition.left;
13430
+ }
13431
+ var scrollValues = {
13432
+ direction: 'down', sentinel: _this.observer.sentinelInfo.down,
13433
+ offset: gObj.root.scrollPosition, focusElement: gObj.element
13434
+ };
13435
+ _this.scrollListeners(scrollValues);
13436
+ }
13412
13437
  _this.parent.off('content-ready', _this.fn);
13413
13438
  };
13414
13439
  this.parent.addEventListener('dataBound', this.dataBoundEvent.bind(this));
@@ -13667,6 +13692,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
13667
13692
  };
13668
13693
  VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
13669
13694
  this['scrollAfterEdit']();
13695
+ if (this.parent.root.enablePersistence) {
13696
+ this.parent.root.scrollPosition = scrollArgs.offset;
13697
+ }
13670
13698
  var info = scrollArgs.sentinel;
13671
13699
  var rowHeight = this.parent.getRowHeight();
13672
13700
  var outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
@@ -14278,11 +14306,11 @@ var Freeze = /** @__PURE__ @class */ (function () {
14278
14306
  if (!isNullOrUndefined(movableRows) && row.parentElement.firstElementChild.clientHeight > 0) {
14279
14307
  row.style.height = row.parentElement.firstElementChild.clientHeight + 'px';
14280
14308
  }
14281
- row.style.display = args.action;
14309
+ this.parent['toggleRowVisibility'](row, args.action);
14282
14310
  if (freeze && frozenRightRows.length) {
14283
- frozenRightRows[parseInt(i.toString(), 10)].style.display = args.action;
14311
+ this.parent['toggleRowVisibility'](frozenRightRows[parseInt(i.toString(), 10)], args.action);
14284
14312
  }
14285
- var queryselector = args.action === 'none' ? '.e-treecolumn-container .e-treegridcollapse'
14313
+ var queryselector = args.action === 'e-childrow-hidden' ? '.e-treecolumn-container .e-treegridcollapse'
14286
14314
  : '.e-treecolumn-container .e-treegridexpand';
14287
14315
  if (frozenrows[row.rowIndex].querySelector(queryselector)) {
14288
14316
  var cRow = [];