@syncfusion/ej2-treegrid 19.3.45 → 19.3.53

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 (55) hide show
  1. package/CHANGELOG.md +29 -0
  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 +249 -87
  5. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  6. package/dist/es6/ej2-treegrid.es5.js +241 -79
  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 +19 -7
  13. package/src/treegrid/actions/crud-actions.js +1 -0
  14. package/src/treegrid/actions/edit.js +14 -7
  15. package/src/treegrid/actions/freeze-column.js +2 -1
  16. package/src/treegrid/actions/rowdragdrop.js +10 -4
  17. package/src/treegrid/actions/selection.js +8 -3
  18. package/src/treegrid/actions/virtual-scroll.js +13 -2
  19. package/src/treegrid/base/constant.d.ts +4 -0
  20. package/src/treegrid/base/constant.js +4 -0
  21. package/src/treegrid/base/treegrid-model.d.ts +8 -0
  22. package/src/treegrid/base/treegrid.d.ts +8 -0
  23. package/src/treegrid/base/treegrid.js +46 -17
  24. package/src/treegrid/renderer/render.js +9 -1
  25. package/src/treegrid/renderer/virtual-row-model-generator.d.ts +1 -0
  26. package/src/treegrid/renderer/virtual-row-model-generator.js +12 -0
  27. package/src/treegrid/renderer/virtual-tree-content-render.d.ts +2 -1
  28. package/src/treegrid/renderer/virtual-tree-content-render.js +102 -35
  29. package/styles/bootstrap-dark.css +1 -1
  30. package/styles/bootstrap.css +1 -1
  31. package/styles/bootstrap4.css +6 -1
  32. package/styles/bootstrap5-dark.css +6 -1
  33. package/styles/bootstrap5.css +6 -1
  34. package/styles/fabric-dark.css +1 -1
  35. package/styles/fabric.css +1 -1
  36. package/styles/highcontrast-light.css +1 -1
  37. package/styles/highcontrast.css +1 -1
  38. package/styles/material-dark.css +1 -1
  39. package/styles/material.css +1 -1
  40. package/styles/tailwind-dark.css +1 -1
  41. package/styles/tailwind.css +1 -1
  42. package/styles/treegrid/_layout.scss +1 -1
  43. package/styles/treegrid/bootstrap-dark.css +1 -1
  44. package/styles/treegrid/bootstrap.css +1 -1
  45. package/styles/treegrid/bootstrap4.css +6 -1
  46. package/styles/treegrid/bootstrap5-dark.css +6 -1
  47. package/styles/treegrid/bootstrap5.css +6 -1
  48. package/styles/treegrid/fabric-dark.css +1 -1
  49. package/styles/treegrid/fabric.css +1 -1
  50. package/styles/treegrid/highcontrast-light.css +1 -1
  51. package/styles/treegrid/highcontrast.css +1 -1
  52. package/styles/treegrid/material-dark.css +1 -1
  53. package/styles/treegrid/material.css +1 -1
  54. package/styles/treegrid/tailwind-dark.css +1 -1
  55. package/styles/treegrid/tailwind.css +1 -1
@@ -16,7 +16,7 @@ import { VirtualContentRenderer } from '@syncfusion/ej2-grids';
16
16
  import { InterSectionObserver } from '@syncfusion/ej2-grids';
17
17
  import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-generator';
18
18
  import * as events from '../base/constant';
19
- import { isNullOrUndefined, EventHandler, getValue, setValue, Browser } from '@syncfusion/ej2-base';
19
+ import { isNullOrUndefined, EventHandler, getValue, setValue, Browser, debounce } from '@syncfusion/ej2-base';
20
20
  import { DataManager } from '@syncfusion/ej2-data';
21
21
  import { isCountRequired } from '../utils';
22
22
  var VirtualTreeContentRenderer = /** @class */ (function (_super) {
@@ -88,9 +88,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
88
88
  if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
89
89
  && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
90
90
  this.parent[action]('data-ready', this.onDataReady, this);
91
- //this.parent[action]('refresh-virtual-block', this.refreshContentRows, this);
91
+ this.parent[action]('refresh-virtual-block', this.refreshContentRows, this);
92
92
  this.fn = function () {
93
- _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); });
93
+ _this.observers.observes(function (scrollArgs) { return _this.scrollListeners(scrollArgs); }, _this.onEnteredAction());
94
94
  _this.parent.off('content-ready', _this.fn);
95
95
  };
96
96
  this.parent.addEventListener('dataBound', this.dataBoundEvent.bind(this));
@@ -122,7 +122,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
122
122
  && this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || !isCountRequired(this.parent)) {
123
123
  if (!isNullOrUndefined(e.count)) {
124
124
  this.totalRecords = e.count;
125
- getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
125
+ if (!this.parent.enableColumnVirtualization) {
126
+ getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
127
+ }
126
128
  }
127
129
  if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || this.isDataSourceChanged) {
128
130
  this.contents.scrollTop = 0;
@@ -180,6 +182,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
180
182
  return;
181
183
  }
182
184
  var selectVirtualRow = 'selectVirtualRow';
185
+ var containerRect = 'containerRect';
186
+ if (isNullOrUndefined(this.observer[containerRect])) {
187
+ this.observer[containerRect] = this.observers[containerRect];
188
+ }
183
189
  _super.prototype[selectVirtualRow].call(this, args);
184
190
  };
185
191
  VirtualTreeContentRenderer.prototype.refreshCell = function (rowObj) {
@@ -286,15 +292,39 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
286
292
  var actionComplete = 'actionComplete';
287
293
  _super.prototype[actionComplete].call(this, args);
288
294
  };
295
+ VirtualTreeContentRenderer.prototype.onEnteredAction = function () {
296
+ var _this = this;
297
+ return function (element, current, direction, e, isWheel, check) {
298
+ var directVirtualRender = 'directVirtualRender';
299
+ if (!_this.parent[directVirtualRender]) { // with this property, columns are rendered without debouncing on horizontal scroll.
300
+ var preventEvent = 'preventEvent';
301
+ if (Browser.isIE && !isWheel && check && !_this[preventEvent]) {
302
+ _this.parent.showSpinner();
303
+ }
304
+ var xAxis = current.axis === 'X';
305
+ var x = _this.getColumnOffset(xAxis ? _this.vgenerator.getColumnIndexes()[0] - 1 : _this.prevInfo.columnIndexes[0]
306
+ - 1);
307
+ if (xAxis) {
308
+ var idx = Object.keys(_this.vgenerator.cOffsets).length - _this.prevInfo.columnIndexes.length;
309
+ var maxLeft = _this.vgenerator.cOffsets[idx - 1];
310
+ x = x > maxLeft ? maxLeft : x; //TODO: This fix horizontal scrollbar jumping issue in column virtualization.
311
+ }
312
+ _this.virtualEle.adjustTable(x, _this.translateY);
313
+ if (_this.parent.enableColumnVirtualization) {
314
+ _this.header.virtualEle.adjustTable(x, 0);
315
+ }
316
+ }
317
+ };
318
+ };
289
319
  VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
290
320
  var info = scrollArgs.sentinel;
291
- var outBuffer = 10; //this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 1.5);
321
+ var outBuffer = this.parent.pageSettings.pageSize - Math.ceil(this.parent.pageSettings.pageSize / 2);
292
322
  var content = this.parent.getContent().querySelector('.e-content');
293
323
  var scrollHeight = outBuffer * this.parent.getRowHeight();
294
324
  var upScroll = (scrollArgs.offset.top - this.translateY) < 0;
295
325
  var downScroll = Math.ceil(scrollArgs.offset.top - this.translateY) >= scrollHeight;
296
326
  var selectedRowIndex = 'selectedRowIndex';
297
- if (upScroll) {
327
+ if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
298
328
  var vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? this.parent.height :
299
329
  this.parent.element.getBoundingClientRect().height);
300
330
  var index = (~~(content.scrollTop / this.parent.getRowHeight())
@@ -331,7 +361,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
331
361
  scrollArgs.offset.top - (outBuffer * height) + 10 : 0;
332
362
  }
333
363
  }
334
- else if (downScroll) {
364
+ else if (downScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left')) {
335
365
  var nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
336
366
  var isLastBlock = (this[selectedRowIndex] + this.parent.pageSettings.pageSize) < this.totalRecords ? false : true;
337
367
  if (!isNullOrUndefined(this[selectedRowIndex]) && this[selectedRowIndex] !== -1 &&
@@ -352,14 +382,17 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
352
382
  this.translateY = scrollArgs.offset.top;
353
383
  }
354
384
  }
355
- if ((downScroll && (scrollArgs.offset.top < (this.parent.getRowHeight() * this.totalRecords)))
356
- || (upScroll)) {
357
- var viewInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
385
+ if (((downScroll && (scrollArgs.offset.top < (this.parent.getRowHeight() * this.totalRecords)))
386
+ || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left')) {
387
+ var viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
358
388
  this.previousInfo = viewInfo;
389
+ this.parent.setColumnIndexesInView(this.parent.enableColumnVirtualization ? viewInfo.columnIndexes : []);
359
390
  var page = viewInfo.loadNext && !viewInfo.loadSelf ? viewInfo.nextInfo.page : viewInfo.page;
360
391
  this.parent.setProperties({ pageSettings: { currentPage: page } }, true);
361
- viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
362
- this.parent.notify(viewInfo.event, { requestType: 'virtualscroll', focusElement: scrollArgs.focusElement });
392
+ if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
393
+ viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
394
+ }
395
+ this.parent.notify(viewInfo.event, { requestType: 'virtualscroll', virtualInfo: viewInfo, focusElement: scrollArgs.focusElement });
363
396
  }
364
397
  };
365
398
  VirtualTreeContentRenderer.prototype.appendContent = function (target, newChild, e) {
@@ -376,7 +409,14 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
376
409
  getValue('currentInfo', this) : e.virtualInfo;
377
410
  var cBlock = (info.columnIndexes[0]) - 1;
378
411
  var cOffset = this.getColumnOffset(cBlock);
379
- this.virtualEle.setWrapperWidth(null, (Browser.isIE || Browser.info.name === 'edge'));
412
+ var width = void 0;
413
+ if (this.parent.enableColumnVirtualization) {
414
+ this.header.virtualEle.adjustTable(cOffset, 0);
415
+ var cIndex = info.columnIndexes;
416
+ width = this.getColumnOffset(cIndex[cIndex.length - 1]) - this.getColumnOffset(cIndex[0] - 1) + '';
417
+ this.header.virtualEle.setWrapperWidth(width);
418
+ }
419
+ this.virtualEle.setWrapperWidth(width, (Browser.isIE || Browser.info.name === 'edge'));
380
420
  target = this.parent.createElement('tbody');
381
421
  target.appendChild(newChild);
382
422
  var replace = 'replaceWith';
@@ -388,8 +428,12 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
388
428
  this.isExpandCollapse = false;
389
429
  }
390
430
  setValue('prevInfo', this.previousInfo ? this.previousInfo : info, this);
431
+ if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'X') {
432
+ this.parent.notify(events.autoCol, {});
433
+ }
391
434
  var focusCell = 'focusCell';
392
435
  var restoreAdd = 'restoreAdd';
436
+ var ensureSelectedRowPosition = 'ensureSelectedRowPosition';
393
437
  _super.prototype[focusCell].call(this, e);
394
438
  var isAdd = 'isAdd';
395
439
  if (this[isAdd] && !this.parent.getContent().querySelector('.e-content').querySelector('.e-addedrow')) {
@@ -405,6 +449,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
405
449
  }
406
450
  this.restoreEditState();
407
451
  _super.prototype[restoreAdd].call(this);
452
+ _super.prototype[ensureSelectedRowPosition].call(this);
408
453
  }
409
454
  };
410
455
  VirtualTreeContentRenderer.prototype.removeEventListener = function () {
@@ -441,28 +486,34 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
441
486
  _this.timer = 0;
442
487
  return _this;
443
488
  }
444
- TreeInterSectionObserver.prototype.observes = function (callback) {
489
+ TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback) {
445
490
  var containerRect = 'containerRect';
446
491
  _super.prototype[containerRect] = getValue('options', this).container.getBoundingClientRect();
447
- EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback), this);
492
+ EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback), this);
448
493
  };
449
494
  TreeInterSectionObserver.prototype.clear = function () {
450
495
  this.lastPos = null;
451
496
  };
452
- TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback) {
497
+ TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback, onEnterCallback) {
453
498
  var _this = this;
454
- var prevTop = 0;
455
- var prevLeft = 0;
499
+ var delay = Browser.info.name === 'chrome' ? 200 : 100;
500
+ var options = 'options';
501
+ var movableEle = 'movableEle';
502
+ var element = 'element';
503
+ var fromWheel = 'fromWheel';
504
+ var debounced100 = debounce(callback, delay);
505
+ var debounced50 = debounce(callback, 50);
506
+ this[options].prevTop = this[options].prevLeft = 0;
456
507
  return function (e) {
457
- var scrollTop = e.target.scrollTop;
458
- var scrollLeft = e.target.scrollLeft;
459
- var direction = prevTop < scrollTop ? 'down' : 'up';
460
- direction = prevLeft === scrollLeft ? direction : prevLeft < scrollLeft ? 'right' : 'left';
461
- prevTop = scrollTop;
462
- prevLeft = scrollLeft;
463
- var current = getValue('sentinelInfo', _this)[direction];
508
+ var top = _this[options].movableContainer ? _this[options].container.scrollTop : e.target.scrollTop;
509
+ var left = _this[options].movableContainer ? _this[options].scrollbar.scrollLeft : e.target.scrollLeft;
510
+ var direction = _this[options].prevTop < top ? 'down' : 'up';
511
+ direction = _this[options].prevLeft === left ? direction : _this[options].prevLeft < left ? 'right' : 'left';
512
+ _this[options].prevTop = top;
513
+ _this[options].prevLeft = left;
514
+ var current = _this.sentinelInfo[direction];
464
515
  var delta = 0;
465
- _this.newPos = scrollTop;
516
+ _this.newPos = top;
466
517
  if (_this.lastPos != null) { // && newPos < maxScroll
467
518
  delta = _this.newPos - _this.lastPos;
468
519
  }
@@ -471,19 +522,35 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
471
522
  clearTimeout(_this.timer);
472
523
  }
473
524
  _this.timer = setTimeout(_this.clear, 0);
474
- /*if (this.options.axes.indexOf(current.axis) === -1) {
475
- return;
476
- }*/
477
- /*if(delta > 45 || delta < -45){
478
- this.isWheeling = true;
479
- }*/
480
525
  if ((delta > 100 || delta < -100) && (e && e.preventDefault)) {
481
526
  e.returnValue = false;
482
527
  e.preventDefault();
483
528
  }
484
- callback({ direction: direction, isWheel: _this.isWheeling,
485
- sentinel: current, offset: { top: scrollTop, left: scrollLeft },
486
- focusElement: document.activeElement });
529
+ if (_this[options].axes.indexOf(current.axis) === -1) {
530
+ return;
531
+ }
532
+ var check = _this.check(direction);
533
+ if (current.entered && current.axis === 'X') {
534
+ if (_this[movableEle] && (direction === 'right' || direction === 'left')) {
535
+ onEnterCallback(_this[movableEle], current, direction, { top: top, left: left }, _this[fromWheel], check);
536
+ }
537
+ else {
538
+ onEnterCallback(_this[element], current, direction, { top: top, left: left }, _this[fromWheel], check);
539
+ }
540
+ }
541
+ if (check) {
542
+ var fn = debounced100;
543
+ if (current.axis === 'X') {
544
+ fn = debounced50;
545
+ fn({ direction: direction, sentinel: current, offset: { top: top, left: left },
546
+ focusElement: document.activeElement });
547
+ }
548
+ else {
549
+ callback({ direction: direction, sentinel: current, offset: { top: top, left: left },
550
+ focusElement: document.activeElement });
551
+ }
552
+ }
553
+ _this[fromWheel] = false;
487
554
  };
488
555
  };
489
556
  return TreeInterSectionObserver;
@@ -270,7 +270,7 @@
270
270
 
271
271
  .e-treegrid .e-treecell {
272
272
  display: table-cell;
273
- line-height: 10px;
273
+ line-height: normal;
274
274
  }
275
275
 
276
276
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -271,7 +271,7 @@
271
271
 
272
272
  .e-treegrid .e-treecell {
273
273
  display: table-cell;
274
- line-height: 10px;
274
+ line-height: normal;
275
275
  }
276
276
 
277
277
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -77,6 +77,11 @@
77
77
  background: transparent;
78
78
  }
79
79
 
80
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
81
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
82
+ background: #e9ecef;
83
+ }
84
+
80
85
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
81
86
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
82
87
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -306,7 +311,7 @@
306
311
 
307
312
  .e-treegrid .e-treecell {
308
313
  display: table-cell;
309
- line-height: 10px;
314
+ line-height: normal;
310
315
  }
311
316
 
312
317
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -65,6 +65,11 @@
65
65
  background: transparent;
66
66
  }
67
67
 
68
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
69
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
70
+ background: #343a40;
71
+ }
72
+
68
73
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
69
74
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
70
75
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -298,7 +303,7 @@
298
303
 
299
304
  .e-treegrid .e-treecell {
300
305
  display: table-cell;
301
- line-height: 18px;
306
+ line-height: normal;
302
307
  }
303
308
 
304
309
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -65,6 +65,11 @@
65
65
  background: transparent;
66
66
  }
67
67
 
68
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
69
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
70
+ background: #e9ecef;
71
+ }
72
+
68
73
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
69
74
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
70
75
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -298,7 +303,7 @@
298
303
 
299
304
  .e-treegrid .e-treecell {
300
305
  display: table-cell;
301
- line-height: 18px;
306
+ line-height: normal;
302
307
  }
303
308
 
304
309
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -244,7 +244,7 @@
244
244
 
245
245
  .e-treegrid .e-treecell {
246
246
  display: table-cell;
247
- line-height: 10px;
247
+ line-height: normal;
248
248
  }
249
249
 
250
250
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
package/styles/fabric.css CHANGED
@@ -237,7 +237,7 @@
237
237
 
238
238
  .e-treegrid .e-treecell {
239
239
  display: table-cell;
240
- line-height: 10px;
240
+ line-height: normal;
241
241
  }
242
242
 
243
243
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -254,7 +254,7 @@
254
254
 
255
255
  .e-treegrid .e-treecell {
256
256
  display: table-cell;
257
- line-height: 10px;
257
+ line-height: normal;
258
258
  }
259
259
 
260
260
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -254,7 +254,7 @@
254
254
 
255
255
  .e-treegrid .e-treecell {
256
256
  display: table-cell;
257
- line-height: 10px;
257
+ line-height: normal;
258
258
  }
259
259
 
260
260
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -280,7 +280,7 @@
280
280
 
281
281
  .e-treegrid .e-treecell {
282
282
  display: table-cell;
283
- line-height: 10px;
283
+ line-height: normal;
284
284
  }
285
285
 
286
286
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -315,7 +315,7 @@
315
315
 
316
316
  .e-treegrid .e-treecell {
317
317
  display: table-cell;
318
- line-height: 10px;
318
+ line-height: normal;
319
319
  }
320
320
 
321
321
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -307,7 +307,7 @@
307
307
 
308
308
  .e-treegrid .e-treecell {
309
309
  display: table-cell;
310
- line-height: 18px;
310
+ line-height: normal;
311
311
  }
312
312
 
313
313
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -307,7 +307,7 @@
307
307
 
308
308
  .e-treegrid .e-treecell {
309
309
  display: table-cell;
310
- line-height: 18px;
310
+ line-height: normal;
311
311
  }
312
312
 
313
313
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -131,7 +131,7 @@
131
131
 
132
132
  .e-treecell {
133
133
  display: table-cell;
134
- line-height: $treegrid-right-arrow-icon-font-size;
134
+ line-height: normal;
135
135
  }
136
136
 
137
137
  .e-grid {
@@ -270,7 +270,7 @@
270
270
 
271
271
  .e-treegrid .e-treecell {
272
272
  display: table-cell;
273
- line-height: 10px;
273
+ line-height: normal;
274
274
  }
275
275
 
276
276
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -271,7 +271,7 @@
271
271
 
272
272
  .e-treegrid .e-treecell {
273
273
  display: table-cell;
274
- line-height: 10px;
274
+ line-height: normal;
275
275
  }
276
276
 
277
277
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -77,6 +77,11 @@
77
77
  background: transparent;
78
78
  }
79
79
 
80
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
81
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
82
+ background: #e9ecef;
83
+ }
84
+
80
85
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
81
86
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
82
87
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -306,7 +311,7 @@
306
311
 
307
312
  .e-treegrid .e-treecell {
308
313
  display: table-cell;
309
- line-height: 10px;
314
+ line-height: normal;
310
315
  }
311
316
 
312
317
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -65,6 +65,11 @@
65
65
  background: transparent;
66
66
  }
67
67
 
68
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
69
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
70
+ background: #343a40;
71
+ }
72
+
68
73
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
69
74
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
70
75
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -298,7 +303,7 @@
298
303
 
299
304
  .e-treegrid .e-treecell {
300
305
  display: table-cell;
301
- line-height: 18px;
306
+ line-height: normal;
302
307
  }
303
308
 
304
309
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -65,6 +65,11 @@
65
65
  background: transparent;
66
66
  }
67
67
 
68
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
69
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
70
+ background: #e9ecef;
71
+ }
72
+
68
73
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
69
74
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
70
75
  .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
@@ -298,7 +303,7 @@
298
303
 
299
304
  .e-treegrid .e-treecell {
300
305
  display: table-cell;
301
- line-height: 18px;
306
+ line-height: normal;
302
307
  }
303
308
 
304
309
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -244,7 +244,7 @@
244
244
 
245
245
  .e-treegrid .e-treecell {
246
246
  display: table-cell;
247
- line-height: 10px;
247
+ line-height: normal;
248
248
  }
249
249
 
250
250
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -237,7 +237,7 @@
237
237
 
238
238
  .e-treegrid .e-treecell {
239
239
  display: table-cell;
240
- line-height: 10px;
240
+ line-height: normal;
241
241
  }
242
242
 
243
243
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -254,7 +254,7 @@
254
254
 
255
255
  .e-treegrid .e-treecell {
256
256
  display: table-cell;
257
- line-height: 10px;
257
+ line-height: normal;
258
258
  }
259
259
 
260
260
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -254,7 +254,7 @@
254
254
 
255
255
  .e-treegrid .e-treecell {
256
256
  display: table-cell;
257
- line-height: 10px;
257
+ line-height: normal;
258
258
  }
259
259
 
260
260
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -280,7 +280,7 @@
280
280
 
281
281
  .e-treegrid .e-treecell {
282
282
  display: table-cell;
283
- line-height: 10px;
283
+ line-height: normal;
284
284
  }
285
285
 
286
286
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -315,7 +315,7 @@
315
315
 
316
316
  .e-treegrid .e-treecell {
317
317
  display: table-cell;
318
- line-height: 10px;
318
+ line-height: normal;
319
319
  }
320
320
 
321
321
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -307,7 +307,7 @@
307
307
 
308
308
  .e-treegrid .e-treecell {
309
309
  display: table-cell;
310
- line-height: 18px;
310
+ line-height: normal;
311
311
  }
312
312
 
313
313
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -307,7 +307,7 @@
307
307
 
308
308
  .e-treegrid .e-treecell {
309
309
  display: table-cell;
310
- line-height: 18px;
310
+ line-height: normal;
311
311
  }
312
312
 
313
313
  .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {