@syncfusion/ej2-treegrid 27.2.2 → 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 +576 -256
  6. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  7. package/dist/es6/ej2-treegrid.es5.js +580 -256
  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 +14 -7
  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
package/styles/treegrid/material3-dark.css CHANGED
@@ -199,6 +199,12 @@
199
199
  .e-treegrid .e-icons.e-none::before {
200
200
  content: "";
201
201
  }
202
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
203
+ border-left: 2px dashed rgba(var(--color-sf-primary));
204
+ }
205
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
206
+ height: auto;
207
+ }
202
208
  .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
203
209
  height: 20px;
204
210
  vertical-align: middle;
@@ -265,6 +271,9 @@
265
271
  .e-treegrid .e-cloneproperties .e-treecolumn-container span {
266
272
  vertical-align: text-top;
267
273
  }
274
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
275
+ display: table-row;
276
+ }
268
277
  .e-treegrid .e-hierarchycheckbox .e-frame {
269
278
  height: 14px;
270
279
  width: 14px;
@@ -349,6 +358,9 @@
349
358
  position: relative;
350
359
  z-index: 1;
351
360
  }
361
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
362
+ position: sticky;
363
+ }
352
364
  .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
353
365
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
354
366
  -webkit-box-shadow: 0 1px 0 0 rgba(var(--color-sf-primary));
@@ -385,6 +397,11 @@
385
397
  position: relative;
386
398
  z-index: 1;
387
399
  }
400
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
401
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
402
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
403
+ position: sticky;
404
+ }
388
405
  .e-treegrid .e-gridcontent td.e-droptop:first-child,
389
406
  .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
390
407
  border-top-color: rgba(var(--color-sf-primary));
@@ -473,6 +490,9 @@
473
490
  position: relative;
474
491
  z-index: 1;
475
492
  }
493
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
494
+ position: sticky;
495
+ }
476
496
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
477
497
  .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
478
498
  .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
@@ -506,23 +526,23 @@
506
526
  }
507
527
 
508
528
  /* stylelint-disable-line no-empty-source */
509
- .e-bigger .e-treegrid .e-treegridexpand,
510
- .e-bigger .e-treegrid .e-treegridcollapse {
529
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
530
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
511
531
  font-size: 22px;
512
532
  height: 20px;
513
533
  width: 20px;
514
534
  vertical-align: bottom;
515
535
  }
516
- .e-bigger .e-treegrid .e-hierarchycheckbox {
536
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
517
537
  padding-left: 2px;
518
538
  }
519
- .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
539
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
520
540
  height: 18px;
521
541
  width: 18px;
522
542
  }
523
- .e-bigger .e-treegrid .e-treecell {
543
+ .e-bigger .e-treegrid .e-grid .e-treecell {
524
544
  line-height: 20px;
525
545
  }
526
- .e-bigger .e-treegrid .e-treecolumn-container span {
546
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
527
547
  vertical-align: middle;
528
548
  }
package/styles/treegrid/material3.css CHANGED
@@ -201,6 +201,12 @@
201
201
  .e-treegrid .e-icons.e-none::before {
202
202
  content: "";
203
203
  }
204
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
205
+ border-left: 2px dashed rgba(var(--color-sf-primary));
206
+ }
207
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
208
+ height: auto;
209
+ }
204
210
  .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
205
211
  height: 20px;
206
212
  vertical-align: middle;
@@ -267,6 +273,9 @@
267
273
  .e-treegrid .e-cloneproperties .e-treecolumn-container span {
268
274
  vertical-align: text-top;
269
275
  }
276
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
277
+ display: table-row;
278
+ }
270
279
  .e-treegrid .e-hierarchycheckbox .e-frame {
271
280
  height: 14px;
272
281
  width: 14px;
@@ -351,6 +360,9 @@
351
360
  position: relative;
352
361
  z-index: 1;
353
362
  }
363
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
364
+ position: sticky;
365
+ }
354
366
  .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
355
367
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
356
368
  -webkit-box-shadow: 0 1px 0 0 rgba(var(--color-sf-primary));
@@ -387,6 +399,11 @@
387
399
  position: relative;
388
400
  z-index: 1;
389
401
  }
402
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
403
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
404
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
405
+ position: sticky;
406
+ }
390
407
  .e-treegrid .e-gridcontent td.e-droptop:first-child,
391
408
  .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
392
409
  border-top-color: rgba(var(--color-sf-primary));
@@ -475,6 +492,9 @@
475
492
  position: relative;
476
493
  z-index: 1;
477
494
  }
495
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
496
+ position: sticky;
497
+ }
478
498
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
479
499
  .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
480
500
  .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
@@ -508,23 +528,23 @@
508
528
  }
509
529
 
510
530
  /* stylelint-disable-line no-empty-source */
511
- .e-bigger .e-treegrid .e-treegridexpand,
512
- .e-bigger .e-treegrid .e-treegridcollapse {
531
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
532
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
513
533
  font-size: 22px;
514
534
  height: 20px;
515
535
  width: 20px;
516
536
  vertical-align: bottom;
517
537
  }
518
- .e-bigger .e-treegrid .e-hierarchycheckbox {
538
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
519
539
  padding-left: 2px;
520
540
  }
521
- .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
541
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
522
542
  height: 18px;
523
543
  width: 18px;
524
544
  }
525
- .e-bigger .e-treegrid .e-treecell {
545
+ .e-bigger .e-treegrid .e-grid .e-treecell {
526
546
  line-height: 20px;
527
547
  }
528
- .e-bigger .e-treegrid .e-treecolumn-container span {
548
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
529
549
  vertical-align: middle;
530
550
  }
package/styles/treegrid/tailwind-dark.css CHANGED
@@ -139,6 +139,12 @@
139
139
  .e-treegrid .e-icons.e-none::before {
140
140
  content: "";
141
141
  }
142
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
143
+ border-left: 2px solid #4f46e5;
144
+ }
145
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
146
+ height: auto;
147
+ }
142
148
  .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
143
149
  height: 20px;
144
150
  vertical-align: middle;
@@ -205,6 +211,9 @@
205
211
  .e-treegrid .e-cloneproperties .e-treecolumn-container span {
206
212
  vertical-align: text-top;
207
213
  }
214
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
215
+ display: table-row;
216
+ }
208
217
  .e-treegrid .e-hierarchycheckbox .e-frame {
209
218
  height: 16px;
210
219
  width: 16px;
@@ -289,6 +298,9 @@
289
298
  position: relative;
290
299
  z-index: 1;
291
300
  }
301
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
302
+ position: sticky;
303
+ }
292
304
  .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
293
305
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
294
306
  -webkit-box-shadow: 0 1px 0 0 #22d3ee;
@@ -325,6 +337,11 @@
325
337
  position: relative;
326
338
  z-index: 1;
327
339
  }
340
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
341
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
342
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
343
+ position: sticky;
344
+ }
328
345
  .e-treegrid .e-gridcontent td.e-droptop:first-child,
329
346
  .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
330
347
  border-top-color: #22d3ee;
@@ -413,6 +430,9 @@
413
430
  position: relative;
414
431
  z-index: 1;
415
432
  }
433
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
434
+ position: sticky;
435
+ }
416
436
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
417
437
  .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
418
438
  .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
@@ -446,23 +466,23 @@
446
466
  }
447
467
 
448
468
  /* stylelint-disable-line no-empty-source */
449
- .e-bigger .e-treegrid .e-treegridexpand,
450
- .e-bigger .e-treegrid .e-treegridcollapse {
469
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
470
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
451
471
  font-size: 22px;
452
472
  height: 22px;
453
473
  width: 22px;
454
474
  vertical-align: bottom;
455
475
  }
456
- .e-bigger .e-treegrid .e-hierarchycheckbox {
476
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
457
477
  padding-left: 2px;
458
478
  }
459
- .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
479
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
460
480
  height: 18px;
461
481
  width: 18px;
462
482
  }
463
- .e-bigger .e-treegrid .e-treecell {
483
+ .e-bigger .e-treegrid .e-grid .e-treecell {
464
484
  line-height: 22px;
465
485
  }
466
- .e-bigger .e-treegrid .e-treecolumn-container span {
486
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
467
487
  vertical-align: middle;
468
488
  }
package/styles/treegrid/tailwind.css CHANGED
@@ -139,6 +139,12 @@
139
139
  .e-treegrid .e-icons.e-none::before {
140
140
  content: "";
141
141
  }
142
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
143
+ border-left: 2px solid #4f46e5;
144
+ }
145
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
146
+ height: auto;
147
+ }
142
148
  .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
143
149
  height: 20px;
144
150
  vertical-align: middle;
@@ -205,6 +211,9 @@
205
211
  .e-treegrid .e-cloneproperties .e-treecolumn-container span {
206
212
  vertical-align: text-top;
207
213
  }
214
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
215
+ display: table-row;
216
+ }
208
217
  .e-treegrid .e-hierarchycheckbox .e-frame {
209
218
  height: 16px;
210
219
  width: 16px;
@@ -289,6 +298,9 @@
289
298
  position: relative;
290
299
  z-index: 1;
291
300
  }
301
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
302
+ position: sticky;
303
+ }
292
304
  .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
293
305
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
294
306
  -webkit-box-shadow: 0 1px 0 0 #4f46e5;
@@ -325,6 +337,11 @@
325
337
  position: relative;
326
338
  z-index: 1;
327
339
  }
340
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
341
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
342
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
343
+ position: sticky;
344
+ }
328
345
  .e-treegrid .e-gridcontent td.e-droptop:first-child,
329
346
  .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
330
347
  border-top-color: #4f46e5;
@@ -413,6 +430,9 @@
413
430
  position: relative;
414
431
  z-index: 1;
415
432
  }
433
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
434
+ position: sticky;
435
+ }
416
436
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
417
437
  .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
418
438
  .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
@@ -446,23 +466,23 @@
446
466
  }
447
467
 
448
468
  /* stylelint-disable-line no-empty-source */
449
- .e-bigger .e-treegrid .e-treegridexpand,
450
- .e-bigger .e-treegrid .e-treegridcollapse {
469
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
470
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
451
471
  font-size: 22px;
452
472
  height: 22px;
453
473
  width: 22px;
454
474
  vertical-align: bottom;
455
475
  }
456
- .e-bigger .e-treegrid .e-hierarchycheckbox {
476
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
457
477
  padding-left: 2px;
458
478
  }
459
- .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
479
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
460
480
  height: 18px;
461
481
  width: 18px;
462
482
  }
463
- .e-bigger .e-treegrid .e-treecell {
483
+ .e-bigger .e-treegrid .e-grid .e-treecell {
464
484
  line-height: 22px;
465
485
  }
466
- .e-bigger .e-treegrid .e-treecolumn-container span {
486
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
467
487
  vertical-align: middle;
468
488
  }