@syncfusion/ej2-treegrid 19.4.56 → 20.1.51

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 (80) hide show
  1. package/CHANGELOG.md +11 -57
  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 +446 -156
  5. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  6. package/dist/es6/ej2-treegrid.es5.js +451 -164
  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/batch-edit.js +21 -4
  13. package/src/treegrid/actions/crud-actions.js +9 -2
  14. package/src/treegrid/actions/edit.js +16 -1
  15. package/src/treegrid/actions/filter.js +3 -0
  16. package/src/treegrid/actions/rowdragdrop.d.ts +15 -0
  17. package/src/treegrid/actions/rowdragdrop.js +181 -30
  18. package/src/treegrid/actions/toolbar.d.ts +0 -1
  19. package/src/treegrid/actions/toolbar.js +50 -79
  20. package/src/treegrid/actions/virtual-scroll.js +1 -1
  21. package/src/treegrid/base/treegrid-model.d.ts +1 -1
  22. package/src/treegrid/base/treegrid.d.ts +33 -6
  23. package/src/treegrid/base/treegrid.js +136 -39
  24. package/src/treegrid/models/column.d.ts +6 -6
  25. package/src/treegrid/models/column.js +7 -7
  26. package/src/treegrid/models/rowdrop-settings.d.ts +9 -1
  27. package/src/treegrid/renderer/render.d.ts +6 -0
  28. package/src/treegrid/renderer/render.js +27 -1
  29. package/src/treegrid/renderer/virtual-tree-content-render.js +1 -1
  30. package/styles/bootstrap-dark.css +27 -12
  31. package/styles/bootstrap.css +27 -12
  32. package/styles/bootstrap4.css +21 -12
  33. package/styles/bootstrap5-dark.css +43 -27
  34. package/styles/bootstrap5.css +43 -27
  35. package/styles/fabric-dark.css +27 -12
  36. package/styles/fabric.css +27 -12
  37. package/styles/fluent-dark.css +556 -0
  38. package/styles/fluent-dark.scss +1 -0
  39. package/styles/fluent.css +556 -0
  40. package/styles/fluent.scss +1 -0
  41. package/styles/highcontrast-light.css +27 -12
  42. package/styles/highcontrast.css +27 -12
  43. package/styles/material-dark.css +19 -10
  44. package/styles/material.css +19 -10
  45. package/styles/tailwind-dark.css +41 -88
  46. package/styles/tailwind.css +26 -73
  47. package/styles/treegrid/_bootstrap-dark-definition.scss +0 -2
  48. package/styles/treegrid/_bootstrap-definition.scss +0 -2
  49. package/styles/treegrid/_bootstrap4-definition.scss +0 -2
  50. package/styles/treegrid/_bootstrap5-definition.scss +3 -5
  51. package/styles/treegrid/_fabric-dark-definition.scss +0 -2
  52. package/styles/treegrid/_fabric-definition.scss +0 -2
  53. package/styles/treegrid/_fluent-dark-definition.scss +1 -0
  54. package/styles/treegrid/_fluent-definition.scss +3 -4
  55. package/styles/treegrid/_highcontrast-definition.scss +0 -2
  56. package/styles/treegrid/_highcontrast-light-definition.scss +0 -2
  57. package/styles/treegrid/_layout.scss +66 -13
  58. package/styles/treegrid/_material-dark-definition.scss +0 -2
  59. package/styles/treegrid/_material-definition.scss +0 -2
  60. package/styles/treegrid/_tailwind-definition.scss +3 -5
  61. package/styles/treegrid/bootstrap-dark.css +27 -12
  62. package/styles/treegrid/bootstrap.css +27 -12
  63. package/styles/treegrid/bootstrap4.css +21 -12
  64. package/styles/treegrid/bootstrap5-dark.css +43 -27
  65. package/styles/treegrid/bootstrap5.css +43 -27
  66. package/styles/treegrid/fabric-dark.css +27 -12
  67. package/styles/treegrid/fabric.css +27 -12
  68. package/styles/treegrid/fluent-dark.css +556 -0
  69. package/styles/treegrid/fluent-dark.scss +18 -0
  70. package/styles/treegrid/fluent.css +556 -0
  71. package/styles/treegrid/fluent.scss +18 -0
  72. package/styles/treegrid/highcontrast-light.css +27 -12
  73. package/styles/treegrid/highcontrast.css +27 -12
  74. package/styles/treegrid/icons/_fluent-dark.scss +1 -0
  75. package/styles/treegrid/icons/_tailwind-dark.scss +5 -5
  76. package/styles/treegrid/icons/_tailwind.scss +5 -5
  77. package/styles/treegrid/material-dark.css +19 -10
  78. package/styles/treegrid/material.css +19 -10
  79. package/styles/treegrid/tailwind-dark.css +41 -88
  80. package/styles/treegrid/tailwind.css +26 -73
@@ -90,6 +90,13 @@
90
90
  color: #6c757d;
91
91
  }
92
92
 
93
+ .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
94
+ .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
95
+ .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
96
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
97
+ background: #e9ecef;
98
+ }
99
+
93
100
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
94
101
  .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
95
102
  .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -193,10 +200,6 @@
193
200
  width: 22px;
194
201
  }
195
202
 
196
- .e-bigger .e-treegrid .e-rowcell.e-treerowcell {
197
- padding-left: 7px;
198
- }
199
-
200
203
  .e-bigger .e-treegrid .e-hierarchycheckbox {
201
204
  padding-left: 2px;
202
205
  }
@@ -206,6 +209,11 @@
206
209
  width: 18px;
207
210
  }
208
211
 
212
+ .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
213
+ height: 18px;
214
+ width: 18px;
215
+ }
216
+
209
217
  .e-bigger .e-treegrid .e-treecell {
210
218
  line-height: 22px;
211
219
  }
@@ -242,10 +250,6 @@
242
250
  color: #343a40;
243
251
  }
244
252
 
245
- .e-treegrid .e-rowcell.e-treerowcell {
246
- padding-left: 12px;
247
- }
248
-
249
253
  .e-treegrid .e-rtl .e-treegridcollapse {
250
254
  transform: scale(-1);
251
255
  }
@@ -309,7 +313,7 @@
309
313
 
310
314
  .e-treegrid .e-treecell {
311
315
  display: table-cell;
312
- line-height: normal;
316
+ line-height: 26px;
313
317
  }
314
318
 
315
319
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -361,22 +365,22 @@
361
365
  }
362
366
 
363
367
  .e-treegrid .e-errorelem::before {
364
- color: #4f46e5;
368
+ color: #dc3545;
365
369
  content: "";
366
370
  transform: rotate(180deg);
367
371
  }
368
372
 
369
373
  .e-treegrid .e-gridcontent td.e-childborder {
370
- border-color: #4f46e5;
374
+ border-color: #0d6efd;
371
375
  border-width: 2px 0 0;
372
- box-shadow: 0 1px 0 0 #4f46e5;
376
+ box-shadow: 0 1px 0 0 #0d6efd;
373
377
  position: relative;
374
378
  z-index: 1;
375
379
  }
376
380
 
377
381
  .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
378
382
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
379
- box-shadow: 0 1px 0 0 #4f46e5;
383
+ box-shadow: 0 1px 0 0 #0d6efd;
380
384
  }
381
385
 
382
386
  .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -387,7 +391,7 @@
387
391
 
388
392
  .e-treegrid .e-gridcontent td.e-childborder:first-child {
389
393
  border-left: 2px solid #4f46e5;
390
- box-shadow: 0 1px 0 0 #4f46e5;
394
+ box-shadow: 0 1px 0 0 #0d6efd;
391
395
  position: relative;
392
396
  z-index: 1;
393
397
  }
@@ -411,19 +415,19 @@
411
415
  .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
412
416
  .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
413
417
  .e-treegrid .e-gridcontent td.e-dropbottom {
414
- box-shadow: 0 1px 0 0 #4f46e5;
418
+ box-shadow: 0 1px 0 0 #0d6efd;
415
419
  position: relative;
416
420
  z-index: 1;
417
421
  }
418
422
 
419
423
  .e-treegrid .e-gridcontent td.e-droptop:first-child,
420
424
  .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
421
- border-top-color: #4f46e5;
425
+ border-top-color: #0d6efd;
422
426
  border-width: 2px 0 0;
423
427
  }
424
428
 
425
429
  .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
426
- border-bottom-color: #4f46e5;
430
+ border-bottom-color: #0d6efd;
427
431
  }
428
432
 
429
433
  .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -456,7 +460,7 @@
456
460
 
457
461
  .e-treegrid .e-gridheader .e-firstrow-border,
458
462
  .e-treegrid .e-gridcontent .e-lastrow-border {
459
- background-color: #4f46e5;
463
+ background-color: #0d6efd;
460
464
  bottom: 0;
461
465
  display: none;
462
466
  height: 1px;
@@ -468,7 +472,7 @@
468
472
  .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
469
473
  border-bottom: 2px solid #4f46e5;
470
474
  border-top: 2px solid #4f46e5;
471
- box-shadow: 0 0 0 0 #4f46e5;
475
+ box-shadow: 0 0 0 0 #0d6efd;
472
476
  }
473
477
 
474
478
  .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
@@ -476,14 +480,26 @@
476
480
  border-top: 2px solid #4f46e5;
477
481
  }
478
482
 
479
- .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
483
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
484
+ border-bottom: 2px solid #4f46e5;
485
+ border-top: 2px solid #4f46e5;
486
+ box-shadow: 0 0 0 0 #0d6efd;
487
+ }
488
+
489
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
490
+ border-bottom: 2px solid #4f46e5;
491
+ border-top: 2px solid #4f46e5;
492
+ box-shadow: 0 0 0 0 #0d6efd;
493
+ }
494
+
495
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
480
496
  border-bottom: 2px solid #4f46e5;
481
- box-shadow: 0 0 0 0 #4f46e5;
497
+ box-shadow: 0 0 0 0 #0d6efd;
482
498
  }
483
499
 
484
- .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
500
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
485
501
  border-bottom: 2px solid #4f46e5;
486
- box-shadow: 0 0 0 0 #4f46e5;
502
+ box-shadow: 0 0 0 0 #0d6efd;
487
503
  }
488
504
 
489
505
  .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder {
@@ -491,7 +507,7 @@
491
507
  }
492
508
 
493
509
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
494
- border-color: #4f46e5;
510
+ border-color: #0d6efd;
495
511
  border-width: 2px 0 2px 0;
496
512
  position: relative;
497
513
  z-index: 1;
@@ -505,7 +521,7 @@
505
521
 
506
522
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
507
523
  border-right: 2px solid #4f46e5;
508
- box-shadow: 0 1px 0 0 #4f46e5;
524
+ box-shadow: 0 1px 0 0 #0d6efd;
509
525
  position: relative;
510
526
  z-index: 1;
511
527
  }
@@ -528,12 +544,12 @@
528
544
 
529
545
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
530
546
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
531
- border-top-color: #4f46e5;
547
+ border-top-color: #0d6efd;
532
548
  border-width: 2px 0 0;
533
549
  }
534
550
 
535
551
  .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
536
- border-bottom-color: #4f46e5;
552
+ border-bottom-color: #0d6efd;
537
553
  }
538
554
 
539
555
  .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {
@@ -133,10 +133,6 @@
133
133
  width: 18px;
134
134
  }
135
135
 
136
- .e-bigger .e-treegrid .e-rowcell.e-treerowcell {
137
- padding-left: 9px;
138
- }
139
-
140
136
  .e-bigger .e-treegrid .e-hierarchycheckbox {
141
137
  padding-left: 2px;
142
138
  }
@@ -146,6 +142,14 @@
146
142
  width: 20px;
147
143
  }
148
144
 
145
+ .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
146
+ font-size: 12px;
147
+ line-height: 12px;
148
+ padding: 2px 0;
149
+ height: 20px;
150
+ width: 20px;
151
+ }
152
+
149
153
  .e-bigger .e-treegrid .e-treecell {
150
154
  line-height: 18px;
151
155
  }
@@ -182,10 +186,6 @@
182
186
  color: #dadada;
183
187
  }
184
188
 
185
- .e-treegrid .e-rowcell.e-treerowcell {
186
- padding-left: 5px;
187
- }
188
-
189
189
  .e-treegrid .e-rtl .e-treegridcollapse {
190
190
  transform: scale(-1);
191
191
  }
@@ -224,8 +224,11 @@
224
224
  }
225
225
 
226
226
  .e-treegrid .e-hierarchycheckbox .e-frame {
227
- height: 20px;
228
- width: 20px;
227
+ font-size: 10px;
228
+ height: 16px;
229
+ line-height: 11px;
230
+ padding: 2px 0;
231
+ width: 16px;
229
232
  }
230
233
 
231
234
  .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -416,12 +419,24 @@
416
419
  border-top: 1px solid #0074cc;
417
420
  }
418
421
 
419
- .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
422
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
423
+ border-bottom: 1px solid #0074cc;
424
+ border-top: 1px solid #0074cc;
425
+ box-shadow: 0 0 0 0 #0074cc;
426
+ }
427
+
428
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
429
+ border-bottom: 1px solid #0074cc;
430
+ border-top: 1px solid #0074cc;
431
+ box-shadow: 0 0 0 0 #0074cc;
432
+ }
433
+
434
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
420
435
  border-bottom: 1px solid #0074cc;
421
436
  box-shadow: 0 0 0 0 #0074cc;
422
437
  }
423
438
 
424
- .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
439
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
425
440
  border-bottom: 1px solid #0074cc;
426
441
  box-shadow: 0 0 0 0 #0074cc;
427
442
  }
package/styles/fabric.css CHANGED
@@ -126,10 +126,6 @@
126
126
  width: 18px;
127
127
  }
128
128
 
129
- .e-bigger .e-treegrid .e-rowcell.e-treerowcell {
130
- padding-left: 9px;
131
- }
132
-
133
129
  .e-bigger .e-treegrid .e-hierarchycheckbox {
134
130
  padding-left: 2px;
135
131
  }
@@ -139,6 +135,14 @@
139
135
  width: 20px;
140
136
  }
141
137
 
138
+ .e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
139
+ font-size: 12px;
140
+ line-height: 12px;
141
+ padding: 2px 0;
142
+ height: 20px;
143
+ width: 20px;
144
+ }
145
+
142
146
  .e-bigger .e-treegrid .e-treecell {
143
147
  line-height: 18px;
144
148
  }
@@ -175,10 +179,6 @@
175
179
  color: #333;
176
180
  }
177
181
 
178
- .e-treegrid .e-rowcell.e-treerowcell {
179
- padding-left: 5px;
180
- }
181
-
182
182
  .e-treegrid .e-rtl .e-treegridcollapse {
183
183
  transform: scale(-1);
184
184
  }
@@ -217,8 +217,11 @@
217
217
  }
218
218
 
219
219
  .e-treegrid .e-hierarchycheckbox .e-frame {
220
- height: 20px;
221
- width: 20px;
220
+ font-size: 10px;
221
+ height: 16px;
222
+ line-height: 11px;
223
+ padding: 2px 0;
224
+ width: 16px;
222
225
  }
223
226
 
224
227
  .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -409,12 +412,24 @@
409
412
  border-top: 1px solid #0078d6;
410
413
  }
411
414
 
412
- .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
415
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
416
+ border-bottom: 1px solid #0078d6;
417
+ border-top: 1px solid #0078d6;
418
+ box-shadow: 0 0 0 0 #0078d6;
419
+ }
420
+
421
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
422
+ border-bottom: 1px solid #0078d6;
423
+ border-top: 1px solid #0078d6;
424
+ box-shadow: 0 0 0 0 #0078d6;
425
+ }
426
+
427
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
413
428
  border-bottom: 1px solid #0078d6;
414
429
  box-shadow: 0 0 0 0 #0078d6;
415
430
  }
416
431
 
417
- .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
432
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
418
433
  border-bottom: 1px solid #0078d6;
419
434
  box-shadow: 0 0 0 0 #0078d6;
420
435
  }