@syncfusion/ej2-treegrid 27.2.3 → 28.1.33

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/README.md +2 -2
  2. package/dist/ej2-treegrid.min.js +3 -3
  3. package/dist/ej2-treegrid.umd.min.js +3 -3
  4. package/dist/ej2-treegrid.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-treegrid.es2015.js +566 -251
  6. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  7. package/dist/es6/ej2-treegrid.es5.js +570 -251
  8. package/dist/es6/ej2-treegrid.es5.js.map +1 -1
  9. package/dist/global/ej2-treegrid.min.js +3 -3
  10. package/dist/global/ej2-treegrid.min.js.map +1 -1
  11. package/dist/global/index.d.ts +2 -2
  12. package/package.json +10 -10
  13. package/src/treegrid/actions/batch-edit.js +58 -56
  14. package/src/treegrid/actions/context-menu.js +3 -1
  15. package/src/treegrid/actions/reorder.d.ts +1 -1
  16. package/src/treegrid/actions/reorder.js +5 -17
  17. package/src/treegrid/actions/rowdragdrop.d.ts +286 -14
  18. package/src/treegrid/actions/rowdragdrop.js +447 -161
  19. package/src/treegrid/actions/virtual-scroll.js +5 -0
  20. package/src/treegrid/base/data.js +22 -5
  21. package/src/treegrid/base/treegrid.d.ts +1 -0
  22. package/src/treegrid/base/treegrid.js +27 -10
  23. package/src/treegrid/renderer/virtual-tree-content-render.js +4 -2
  24. package/styles/bds-lite.css +703 -0
  25. package/styles/bds-lite.scss +18 -0
  26. package/styles/bds.css +723 -0
  27. package/styles/bds.scss +19 -0
  28. package/styles/bootstrap-dark-lite.css +20 -0
  29. package/styles/bootstrap-dark.css +26 -6
  30. package/styles/bootstrap-lite.css +20 -0
  31. package/styles/bootstrap.css +26 -6
  32. package/styles/bootstrap4-lite.css +20 -0
  33. package/styles/bootstrap4.css +26 -6
  34. package/styles/bootstrap5-dark-lite.css +20 -0
  35. package/styles/bootstrap5-dark.css +26 -6
  36. package/styles/bootstrap5-lite.css +20 -0
  37. package/styles/bootstrap5.3-lite.css +20 -0
  38. package/styles/bootstrap5.3.css +26 -6
  39. package/styles/bootstrap5.css +26 -6
  40. package/styles/fabric-dark-lite.css +20 -0
  41. package/styles/fabric-dark.css +26 -6
  42. package/styles/fabric-lite.css +20 -0
  43. package/styles/fabric.css +26 -6
  44. package/styles/fluent-dark-lite.css +20 -0
  45. package/styles/fluent-dark.css +27 -7
  46. package/styles/fluent-lite.css +20 -0
  47. package/styles/fluent.css +27 -7
  48. package/styles/fluent2-lite.css +20 -0
  49. package/styles/fluent2.css +28 -8
  50. package/styles/highcontrast-light-lite.css +20 -0
  51. package/styles/highcontrast-light.css +26 -6
  52. package/styles/highcontrast-lite.css +21 -1
  53. package/styles/highcontrast.css +28 -8
  54. package/styles/material-dark-lite.css +20 -0
  55. package/styles/material-dark.css +26 -6
  56. package/styles/material-lite.css +20 -0
  57. package/styles/material.css +26 -6
  58. package/styles/material3-dark-lite.css +20 -0
  59. package/styles/material3-dark.css +26 -6
  60. package/styles/material3-lite.css +20 -0
  61. package/styles/material3.css +26 -6
  62. package/styles/tailwind-dark-lite.css +20 -0
  63. package/styles/tailwind-dark.css +26 -6
  64. package/styles/tailwind-lite.css +20 -0
  65. package/styles/tailwind.css +26 -6
  66. package/styles/tailwind3-lite.css +511 -0
  67. package/styles/tailwind3-lite.scss +18 -0
  68. package/styles/tailwind3.css +531 -0
  69. package/styles/tailwind3.scss +19 -0
  70. package/styles/treegrid/_bigger.scss +45 -41
  71. package/styles/treegrid/_layout.scss +23 -2
  72. package/styles/treegrid/_tailwind3-definition.scss +24 -0
  73. package/styles/treegrid/bds.css +723 -0
  74. package/styles/treegrid/bds.scss +19 -0
  75. package/styles/treegrid/bootstrap-dark.css +26 -6
  76. package/styles/treegrid/bootstrap.css +26 -6
  77. package/styles/treegrid/bootstrap4.css +26 -6
  78. package/styles/treegrid/bootstrap5-dark.css +26 -6
  79. package/styles/treegrid/bootstrap5.3.css +26 -6
  80. package/styles/treegrid/bootstrap5.css +26 -6
  81. package/styles/treegrid/fabric-dark.css +26 -6
  82. package/styles/treegrid/fabric.css +26 -6
  83. package/styles/treegrid/fluent-dark.css +27 -7
  84. package/styles/treegrid/fluent.css +27 -7
  85. package/styles/treegrid/fluent2.css +28 -8
  86. package/styles/treegrid/highcontrast-light.css +26 -6
  87. package/styles/treegrid/highcontrast.css +28 -8
  88. package/styles/treegrid/icons/_tailwind3.scss +37 -0
  89. package/styles/treegrid/material-dark.css +26 -6
  90. package/styles/treegrid/material.css +26 -6
  91. package/styles/treegrid/material3-dark.css +26 -6
  92. package/styles/treegrid/material3.css +26 -6
  93. package/styles/treegrid/tailwind-dark.css +26 -6
  94. package/styles/treegrid/tailwind.css +26 -6
  95. package/styles/treegrid/tailwind3.css +531 -0
  96. package/styles/treegrid/tailwind3.scss +19 -0
@@ -153,6 +153,11 @@ var VirtualScroll = /** @class */ (function () {
153
153
  (startIndex < this.parent.getRows().length && endIndex <= startIndex + this.parent.getRows().length) && translateY === 0) {
154
154
  startIndex = 0;
155
155
  }
156
+ if ((pageingDetails.actionArgs.requestType === 'save' && startIndex !== this.prevstartIndex) &&
157
+ (startIndex < this.parent.getRows().length && endIndex <= startIndex + this.parent.getRows().length) && translateY === 0) {
158
+ startIndex = 0;
159
+ endIndex = startIndex + this.parent.grid.pageSettings.pageSize;
160
+ }
156
161
  if (!isNullOrUndefined(this.expandCollapseRec)) {
157
162
  var resourceCount = this.parent.getRows();
158
163
  var sIndex = visualData.indexOf(this.expandCollapseRec);
@@ -201,6 +201,7 @@ var DataManipulation = /** @class */ (function () {
201
201
  * @returns {void}
202
202
  */
203
203
  DataManipulation.prototype.updateParentRemoteData = function (args) {
204
+ var _this = this;
204
205
  var actionArgs = 'actionArgs';
205
206
  if (isRemoteData(this.parent) && this.parent.enableVirtualization && args["" + actionArgs].requestType === 'virtualscroll') {
206
207
  this.parent.hideSpinner();
@@ -240,9 +241,15 @@ var DataManipulation = /** @class */ (function () {
240
241
  records[parseInt(rec.toString(), 10)].taskData = extend({}, records[parseInt(rec.toString(), 10)]);
241
242
  records[parseInt(rec.toString(), 10)].uniqueID = getUid(this_1.parent.element.id + '_data_');
242
243
  setValue('uniqueIDCollection.' + records[parseInt(rec.toString(), 10)].uniqueID, records[parseInt(rec.toString(), 10)], this_1.parent);
243
- records[parseInt(rec.toString(), 10)].level = 0;
244
- if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization && records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping] && records[parseInt(rec.toString(), 10)].level === 0) {
245
- records[parseInt(rec.toString(), 10)].level = records[parseInt(rec.toString(), 10)].level + 1;
244
+ if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization && records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping] && (isNullOrUndefined(records[parseInt(rec.toString(), 10)].level) || records[parseInt(rec.toString(), 10)].level === 0)) {
245
+ var parentID_1 = records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping];
246
+ var parentRec = records.find(function (record) { return record["" + _this.parent.idMapping] === parentID_1; });
247
+ if (parentRec) {
248
+ records[parseInt(rec.toString(), 10)].level = parentRec.level + 1;
249
+ }
250
+ }
251
+ else {
252
+ records[parseInt(rec.toString(), 10)].level = 0;
246
253
  }
247
254
  records[parseInt(rec.toString(), 10)].index = Math.ceil(Math.random() * 1000);
248
255
  if ((records[parseInt(rec.toString(), 10)][this_1.parent.hasChildMapping] ||
@@ -448,7 +455,7 @@ var DataManipulation = /** @class */ (function () {
448
455
  var parentData = _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)];
449
456
  delete parentData.childRecords;
450
457
  result[parseInt(r.toString(), 10)].parentItem = parentData;
451
- result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
458
+ result[parseInt(r.toString(), 10)].parentUniqueID = parentData.uniqueID;
452
459
  }
453
460
  }
454
461
  }
@@ -483,6 +490,9 @@ var DataManipulation = /** @class */ (function () {
483
490
  }
484
491
  result[parseInt(r.toString(), 10)].index = Math.ceil(Math.random() * 1000);
485
492
  result[parseInt(r.toString(), 10)].uniqueID = getUid(_this.parent.element.id + '_data_');
493
+ if (rowDetails.record["" + _this.parent.idMapping] === result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping]) {
494
+ rowDetails.record.uniqueID = result[parseInt(r.toString(), 10)].uniqueID;
495
+ }
486
496
  result[parseInt(r.toString(), 10)].checkboxState = 'uncheck';
487
497
  if (_this.parent.enableVirtualization && isNullOrUndefined(result[parseInt(r.toString(), 10)].level)) {
488
498
  for (var p = 0; p < _this.parent.grid.currentViewData.length; p++) {
@@ -671,7 +681,14 @@ var DataManipulation = /** @class */ (function () {
671
681
  this.parent.flatData.push(currentData);
672
682
  }
673
683
  else if (isNullOrUndefined(currentData["" + this.parent.parentIdMapping]) || currentData.parentItem) {
674
- this.parent.flatData.push(currentData);
684
+ if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
685
+ if (!this.parent.rowDragAndDropModule['isDuplicateData'](currentData)) {
686
+ this.parent.flatData.push(currentData);
687
+ }
688
+ }
689
+ else {
690
+ this.parent.flatData.push(currentData);
691
+ }
675
692
  this.parent['infiniteScrollData'].push(currentData);
676
693
  }
677
694
  if (!this.isSelfReference && currentData.level === 0) {
@@ -1774,6 +1774,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
1774
1774
  * @returns {void}
1775
1775
  */
1776
1776
  refreshColumns(refreshUI?: boolean): void;
1777
+ private getTreeColumn;
1777
1778
  /**
1778
1779
  * Refreshes the TreeGrid header.
1779
1780
  *
@@ -554,7 +554,7 @@ var TreeGrid = /** @class */ (function (_super) {
554
554
  TreeGrid.prototype.requiredModules = function () {
555
555
  var modules = [];
556
556
  var splitFrozenCount = 'splitFrozenCount';
557
- if (!this.isReact && isNullOrUndefined(this['changedProperties'].columns)) {
557
+ if (isNullOrUndefined(this['changedProperties'].columns)) {
558
558
  this.grid["" + splitFrozenCount](this.getColumns());
559
559
  }
560
560
  if (this.isDestroyed) {
@@ -1059,7 +1059,9 @@ var TreeGrid = /** @class */ (function (_super) {
1059
1059
  if (_this.pageSettings.pageSizeMode === 'Root') {
1060
1060
  _this.grid.selectionModule['totalRecordsCount'] = _this.grid.currentViewData.length;
1061
1061
  }
1062
- _this.trigger(events.rowSelecting, args);
1062
+ if (!args.cancel) {
1063
+ _this.trigger(events.rowSelecting, args);
1064
+ }
1063
1065
  };
1064
1066
  this.grid.rowDeselecting = function (args) {
1065
1067
  _this.IsExpandCollapseClicked(args);
@@ -1830,11 +1832,8 @@ var TreeGrid = /** @class */ (function (_super) {
1830
1832
  TreeGrid.prototype.onPropertyChanged = function (newProp) {
1831
1833
  var properties = Object.keys(newProp);
1832
1834
  var requireRefresh = false;
1833
- if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns) && this.frozenColumns === 0
1834
- && this.frozenRows === 0 && !this.columnModel.some(function (col) { return col.isFrozen || col.freeze; })) {
1835
- this.grid.columns = this.getGridColumns(newProp.columns);
1836
- this.grid['updateColumnObject']();
1837
- requireRefresh = true;
1835
+ if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
1836
+ this.refreshColumns();
1838
1837
  }
1839
1838
  for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
1840
1839
  var prop = properties_1[_i];
@@ -2887,12 +2886,28 @@ var TreeGrid = /** @class */ (function (_super) {
2887
2886
  TreeGrid.prototype.refreshColumns = function (refreshUI) {
2888
2887
  if (isNullOrUndefined(refreshUI) || refreshUI) {
2889
2888
  this.grid.columns = this.getGridColumns(this.columns);
2889
+ this.getTreeColumn();
2890
2890
  this.grid.refreshColumns();
2891
2891
  }
2892
2892
  else {
2893
2893
  this.grid.setProperties({ columns: this.getGridColumns(this.columns) }, true);
2894
2894
  }
2895
2895
  };
2896
+ TreeGrid.prototype.getTreeColumn = function () {
2897
+ var columnModel = 'columnModel';
2898
+ var treeColumn = this["" + columnModel][this.treeColumnIndex];
2899
+ var treeIndex;
2900
+ var updatedCols = this.getColumns();
2901
+ for (var f = 0; f < updatedCols.length; f++) {
2902
+ var treeColumnfield = getObject('field', treeColumn);
2903
+ var parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
2904
+ if (treeColumnfield === parentColumnfield) {
2905
+ treeIndex = f;
2906
+ break;
2907
+ }
2908
+ }
2909
+ this.setProperties({ treeColumnIndex: treeIndex }, true);
2910
+ };
2896
2911
  /**
2897
2912
  * Refreshes the TreeGrid header.
2898
2913
  *
@@ -3704,7 +3719,7 @@ var TreeGrid = /** @class */ (function (_super) {
3704
3719
  this.toggleRowVisibility(freezeRightRows[parseInt(i.toString(), 10)], displayAction);
3705
3720
  }
3706
3721
  this.notify('childRowExpand', { row: rows[parseInt(i.toString(), 10)] });
3707
- if ((!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
3722
+ if ((!isNullOrUndefined(childRecords)) && (!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
3708
3723
  isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].expanded) || childRecords[parseInt(i.toString(), 10)].expanded)) {
3709
3724
  this.expandCollapse(action, rows[parseInt(i.toString(), 10)], childRecords[parseInt(i.toString(), 10)], true);
3710
3725
  if (this.frozenColumns <= this.treeColumnIndex && !isNullOrUndefined(movableRows)) {
@@ -3726,7 +3741,7 @@ var TreeGrid = /** @class */ (function (_super) {
3726
3741
  };
3727
3742
  TreeGrid.prototype.toggleRowVisibility = function (row, displayAction) {
3728
3743
  if (row) {
3729
- row.classList.remove('e-childrow-hidden', 'e-childrow-visible');
3744
+ row.classList.remove('e-childrow-hidden', 'e-childrow-visible', 'e-hide');
3730
3745
  row.classList.add(displayAction);
3731
3746
  }
3732
3747
  };
@@ -4231,7 +4246,9 @@ var TreeGrid = /** @class */ (function (_super) {
4231
4246
  * @returns {void}
4232
4247
  */
4233
4248
  TreeGrid.prototype.reorderRows = function (fromIndexes, toIndex, position) {
4234
- this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
4249
+ if (!isNullOrUndefined(this.rowDragAndDropModule)) {
4250
+ this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
4251
+ }
4235
4252
  };
4236
4253
  /**
4237
4254
  * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
@@ -492,8 +492,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
492
492
  ((this.startIndex - currentViewData[0]["" + indexValue]) < (this.parent.pageSettings.pageSize / 2)) && this.parent.selectionModule.isRowSelected) {
493
493
  this.startIndex = currentViewData[0]["" + indexValue] + (this.parent.pageSettings.pageSize / 2);
494
494
  }
495
- var selectedIndex = this.parent.root.selectedRowIndex;
496
- this.startIndex = selectedIndex !== -1 && selectedIndex !== this.startIndex ? this.startIndex - 1 : this.startIndex;
495
+ if (this.parent.root.isSelfReference) {
496
+ var selectedIndex = this.parent.root.selectedRowIndex;
497
+ this.startIndex = selectedIndex !== -1 && selectedIndex !== this.startIndex ? this.startIndex - 1 : this.startIndex;
498
+ }
497
499
  if (scrollArgs.offset.top > (rowHeight * this.totalRecords)) {
498
500
  this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
499
501
  }