@refinitiv-ui/efx-grid 6.0.33 → 6.0.34
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.
- package/lib/core/dist/core.js +112 -36
- package/lib/core/dist/core.min.js +1 -1
- package/lib/core/es6/data/DataTable.d.ts +1 -1
- package/lib/core/es6/data/DataTable.js +9 -8
- package/lib/core/es6/data/DataView.js +1 -1
- package/lib/core/es6/data/Segment.d.ts +2 -0
- package/lib/core/es6/data/Segment.js +16 -0
- package/lib/core/es6/data/SegmentCollection.d.ts +1 -3
- package/lib/core/es6/data/SegmentCollection.js +25 -18
- package/lib/core/es6/grid/Core.js +1 -1
- package/lib/core/es6/grid/plugins/SortableTitlePlugin.js +7 -7
- package/lib/grid/index.js +1 -1
- package/lib/grid/themes/halo/dark/efx-grid.js +1 -1
- package/lib/grid/themes/halo/dark/es5/all-elements.js +1 -1
- package/lib/grid/themes/halo/efx-grid.less +2 -0
- package/lib/grid/themes/halo/light/efx-grid.js +1 -1
- package/lib/grid/themes/halo/light/es5/all-elements.js +1 -1
- package/lib/rt-grid/dist/rt-grid.js +425 -153
- package/lib/rt-grid/dist/rt-grid.min.js +1 -1
- package/lib/rt-grid/es6/ColumnDefinition.js +13 -8
- package/lib/rt-grid/es6/DataConnector.js +3 -2
- package/lib/rt-grid/es6/Grid.d.ts +3 -1
- package/lib/rt-grid/es6/Grid.js +116 -15
- package/lib/rt-grid/es6/RowDefinition.d.ts +7 -2
- package/lib/rt-grid/es6/RowDefinition.js +48 -10
- package/lib/rt-grid/es6/SnapshotFiller.d.ts +1 -0
- package/lib/rt-grid/es6/SnapshotFiller.js +1 -11
- package/lib/tr-grid-column-stack/es6/ColumnStack.js +21 -10
- package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.d.ts +12 -5
- package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js +128 -42
- package/lib/tr-grid-heat-map/es6/HeatMap.d.ts +3 -3
- package/lib/tr-grid-heat-map/es6/HeatMap.js +13 -2
- package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts +2 -1
- package/lib/tr-grid-row-dragging/es6/RowDragging.js +142 -17
- package/lib/tr-grid-textformatting/es6/TextFormatting.d.ts +20 -20
- package/lib/tr-grid-textformatting/es6/TextFormatting.js +37 -138
- package/lib/tr-grid-util/es6/CellPainter.d.ts +1 -1
- package/lib/tr-grid-util/es6/CellPainter.js +56 -55
- package/lib/tr-grid-util/es6/FieldFormatter.js +6 -2
- package/lib/tr-grid-util/es6/NumberFormatter.js +23 -11
- package/lib/tr-grid-util/es6/Util.d.ts +3 -0
- package/lib/tr-grid-util/es6/Util.js +53 -0
- package/lib/types/es6/ConditionalColoring.d.ts +12 -5
- package/lib/types/es6/Core/data/Segment.d.ts +2 -0
- package/lib/types/es6/Core/data/SegmentCollection.d.ts +1 -3
- package/lib/types/es6/Core/grid/Core.d.ts +4 -0
- package/lib/types/es6/Core/grid/plugins/SortableTitlePlugin.d.ts +1 -0
- package/lib/types/es6/HeatMap.d.ts +3 -3
- package/lib/types/es6/RealtimeGrid/Grid.d.ts +3 -1
- package/lib/types/es6/RealtimeGrid/RowDefinition.d.ts +7 -2
- package/lib/types/es6/RealtimeGrid/SnapshotFiller.d.ts +1 -0
- package/lib/types/es6/RowDragging.d.ts +2 -1
- package/lib/types/es6/TextFormatting.d.ts +20 -20
- package/lib/versions.json +6 -6
- package/package.json +1 -1
@@ -13,17 +13,17 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
|
|
13
13
|
/** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
|
14
14
|
* @description Extension column options that can be specified on each individual grid's column option:
|
15
15
|
* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
|
16
|
-
* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
|
17
|
-
* @property {(string|boolean)=} tickColor=null Alias of colorText.
|
18
|
-
* @property {(ConditionalColoringPlugin~Blinking
|
16
|
+
* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
|
17
|
+
* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText.
|
18
|
+
* @property {(string|boolean|ConditionalColoringPlugin~Blinking)=} blinking=null Blink Options. If specified, the cell will be blinked on data change.
|
19
19
|
* @property {string=} field
|
20
20
|
*/
|
21
21
|
|
22
22
|
/** @typedef {Object} ConditionalColoringPlugin~ConditionalColoringOptions
|
23
23
|
* @description Extension column options that can be specified on each individual grid's column option:
|
24
24
|
* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
|
25
|
-
* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
|
26
|
-
* @property {(string|boolean)=} tickColor=null Alias of colorText.
|
25
|
+
* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
|
26
|
+
* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText.
|
27
27
|
* @property {string=} field
|
28
28
|
*/
|
29
29
|
|
@@ -45,6 +45,15 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
|
|
45
45
|
* @property {(string|boolean)=} level CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.
|
46
46
|
*/
|
47
47
|
|
48
|
+
/** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~ColorText
|
49
|
+
* @description Available options describing `colorText` object. Additionally if specify colorText as string of field, colorText will base on the field. <br>
|
50
|
+
* If specified true, field from column definition will be used.
|
51
|
+
* @property {string=} field If not specified, field from column definition will be used
|
52
|
+
* @property {string=} upClass CSS class name.
|
53
|
+
* @property {string=} downClass CSS class name.
|
54
|
+
* @property {string=} levelClass CSS class name.
|
55
|
+
*/
|
56
|
+
|
48
57
|
var COLORING_TYPE = "coloring";
|
49
58
|
var BLINKING_TYPE = "blinking";
|
50
59
|
|
@@ -89,6 +98,10 @@ ConditionalColoringPlugin._cleanUpTimer = 0;
|
|
89
98
|
* @private
|
90
99
|
*/
|
91
100
|
ConditionalColoringPlugin._controlClass = "predefined-conditional-color";
|
101
|
+
/** @type {string}
|
102
|
+
* @private
|
103
|
+
*/
|
104
|
+
ConditionalColoringPlugin._colorTextStyles;
|
92
105
|
|
93
106
|
/** @type {boolean}
|
94
107
|
* @private
|
@@ -103,6 +116,10 @@ ConditionalColoringPlugin.prototype._pendingFields;
|
|
103
116
|
* @private
|
104
117
|
*/
|
105
118
|
ConditionalColoringPlugin.prototype._predefinedColors = null;
|
119
|
+
/** @type {string}
|
120
|
+
* @private
|
121
|
+
*/
|
122
|
+
ConditionalColoringPlugin._predefinedColorsStyles;
|
106
123
|
|
107
124
|
/** @override
|
108
125
|
* @return {string}
|
@@ -136,7 +153,12 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
|
|
136
153
|
if (extOptions) {
|
137
154
|
var predefinedColors = extOptions["predefinedColors"];
|
138
155
|
if (predefinedColors != null && typeof predefinedColors === "object") {
|
139
|
-
this.
|
156
|
+
if (!this._predefinedColors) {
|
157
|
+
this._predefinedColors = predefinedColors;
|
158
|
+
this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
|
159
|
+
}
|
160
|
+
|
161
|
+
this._injectPredefinedColors(host);
|
140
162
|
host.enableClass(ConditionalColoringPlugin._controlClass);
|
141
163
|
}
|
142
164
|
}
|
@@ -145,6 +167,7 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
|
|
145
167
|
this.config(options);
|
146
168
|
} else {
|
147
169
|
this._applyStyle(host, options);
|
170
|
+
this._injectColorTextStyles();
|
148
171
|
}
|
149
172
|
|
150
173
|
host.listen("postSectionDataBinding", this._onSectionBinding);
|
@@ -455,7 +478,7 @@ ConditionalColoringPlugin.prototype._removeDataFields = function(fieldRef, colRe
|
|
455
478
|
};
|
456
479
|
|
457
480
|
/** @private
|
458
|
-
* @param {(
|
481
|
+
* @param {(string|number)=} colRef
|
459
482
|
* @param {string} type
|
460
483
|
*/
|
461
484
|
ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type) {
|
@@ -464,8 +487,15 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
|
|
464
487
|
}
|
465
488
|
var referrer = null;
|
466
489
|
if (colRef != null) {
|
467
|
-
var
|
468
|
-
|
490
|
+
var colId = colRef;
|
491
|
+
if (typeof colRef === "number") {
|
492
|
+
var colDef = this._realTimeGrid.getColumnDefinition(colRef);
|
493
|
+
if (colDef) {
|
494
|
+
colId = colDef.getId();
|
495
|
+
}
|
496
|
+
}
|
497
|
+
|
498
|
+
referrer = colId ? colId + "_" + type : null;
|
469
499
|
this._realTimeGrid.removeFieldReferrer(referrer);
|
470
500
|
}
|
471
501
|
};
|
@@ -496,25 +526,16 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
|
|
496
526
|
* };
|
497
527
|
*/
|
498
528
|
ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
|
499
|
-
// Save column config state
|
500
|
-
var colData = this._newColumnData(colIndex);
|
501
529
|
var blinkingOptions, field;
|
502
530
|
if(columnOptions) {
|
503
|
-
|
504
|
-
|
505
|
-
colData["tickColor"] = columnOptions["tickColor"];
|
506
|
-
colData["blinking"] = blinkingOptions = columnOptions["blinking"];
|
507
|
-
colData["field"] = field = columnOptions["field"];
|
508
|
-
} else {
|
509
|
-
colData["conditions"] = null;
|
510
|
-
colData["colorText"] = null;
|
511
|
-
colData["tickColor"] = null;
|
512
|
-
colData["blinking"] = null;
|
531
|
+
blinkingOptions = columnOptions["blinking"];
|
532
|
+
field = columnOptions["field"];
|
513
533
|
}
|
514
534
|
|
515
535
|
this.setColumnBlinking(colIndex, blinkingOptions, field);
|
516
536
|
this.setConditionalColoring(colIndex, columnOptions);
|
517
537
|
|
538
|
+
var colData = this._newColumnData(colIndex);
|
518
539
|
if (colData["painter"] && !(colData["coloringFields"] || colData["blinkingField"])) { // Clear existing painter
|
519
540
|
this._clearPainter(colData);
|
520
541
|
}
|
@@ -526,6 +547,17 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
|
|
526
547
|
*/
|
527
548
|
ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex, coloringOptions) {
|
528
549
|
var colData = this._newColumnData(colIndex);
|
550
|
+
if(coloringOptions) {
|
551
|
+
// Save column config state
|
552
|
+
colData["conditions"] = coloringOptions["conditions"];
|
553
|
+
colData["colorText"] = coloringOptions["colorText"];
|
554
|
+
colData["tickColor"] = coloringOptions["tickColor"];
|
555
|
+
colData["field"] = coloringOptions["field"];
|
556
|
+
} else {
|
557
|
+
colData["conditions"] = null;
|
558
|
+
colData["colorText"] = null;
|
559
|
+
colData["tickColor"] = null;
|
560
|
+
}
|
529
561
|
var painter = colData["painter"];
|
530
562
|
var prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
|
531
563
|
var colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
|
@@ -552,7 +584,28 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
|
|
552
584
|
painter.setConditions(colorOptions.condColoring.conditions);
|
553
585
|
} else if(colorOptions.colorText) {
|
554
586
|
painter.resetColoring(); //Clear conditions before add new color
|
555
|
-
|
587
|
+
var options = colorOptions.colorText;
|
588
|
+
if (options.useThemeColors) {
|
589
|
+
if (!ConditionalColoringPlugin._colorTextStyles) {
|
590
|
+
var styles = {
|
591
|
+
positive: {
|
592
|
+
color: "var(--color-scheme-positive)"
|
593
|
+
},
|
594
|
+
negative: {
|
595
|
+
color: "var(--color-scheme-negative)"
|
596
|
+
},
|
597
|
+
neutral: {
|
598
|
+
color: "var(--color-scheme-neutral)"
|
599
|
+
}
|
600
|
+
};
|
601
|
+
|
602
|
+
ConditionalColoringPlugin._colorTextStyles = this._prepareStyles(styles);
|
603
|
+
}
|
604
|
+
this._injectColorTextStyles();
|
605
|
+
painter.addColorTextWithTheme(colorOptions.colorText.field);
|
606
|
+
} else {
|
607
|
+
painter.addColorText(options.field, options.upClass, options.downClass, options.levelClass);
|
608
|
+
}
|
556
609
|
}
|
557
610
|
|
558
611
|
var fields = Object.keys(newFieldsMap);
|
@@ -777,12 +830,19 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
|
|
777
830
|
colorOptions.hasColor = 1;
|
778
831
|
colorOptions.fields = {};
|
779
832
|
colorOptions.colorText = {};
|
780
|
-
|
833
|
+
colorOptions.colorText.useThemeColors = true;
|
781
834
|
var type = typeof colorText;
|
782
835
|
if(type === "string") {
|
783
836
|
field = colorText;
|
784
837
|
} else if(type === "object") {
|
785
838
|
field = /** @type{string} */(colorText["field"]) || field;
|
839
|
+
|
840
|
+
if (colorText["upClass"] || colorText["downClass"] || colorText["levelClass"]) {
|
841
|
+
colorOptions.colorText.useThemeColors = false;
|
842
|
+
colorOptions.colorText.upClass = colorText["upClass"];
|
843
|
+
colorOptions.colorText.downClass = colorText["downClass"];
|
844
|
+
colorOptions.colorText.levelClass = colorText["levelClass"];
|
845
|
+
}
|
786
846
|
}
|
787
847
|
colorOptions.colorText.field = field;
|
788
848
|
colorOptions.fields[field] = true;
|
@@ -856,16 +916,17 @@ ConditionalColoringPlugin._mergeUpdates = function(e) {
|
|
856
916
|
return changedRows;
|
857
917
|
};
|
858
918
|
/** @private
|
859
|
-
* @param {Object}
|
919
|
+
* @param {Object} colors Predefined color object map
|
920
|
+
* @return {string} prettified CSS string
|
860
921
|
*/
|
861
|
-
ConditionalColoringPlugin.prototype.
|
862
|
-
var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .
|
922
|
+
ConditionalColoringPlugin.prototype._prepareStyles = function(colors) {
|
923
|
+
var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .cell";
|
863
924
|
var css = [];
|
864
925
|
var ss, styles, value;
|
865
|
-
for (var className in
|
926
|
+
for (var className in colors) {
|
866
927
|
css.push(prefix + "." + className);
|
867
928
|
ss = [];
|
868
|
-
styles =
|
929
|
+
styles = colors[className];
|
869
930
|
|
870
931
|
value = styles["backgroundColor"];
|
871
932
|
if(value) {
|
@@ -880,22 +941,46 @@ ConditionalColoringPlugin.prototype._injectStyles = function(predefinedColors) {
|
|
880
941
|
css.push(ss);
|
881
942
|
}
|
882
943
|
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
944
|
+
return prettifyCss(css);
|
945
|
+
};
|
946
|
+
/** @private
|
947
|
+
*/
|
948
|
+
ConditionalColoringPlugin.prototype._injectColorTextStyles = function() {
|
949
|
+
if (ConditionalColoringPlugin._colorTextStyles) {
|
950
|
+
var hosts = this._hosts;
|
951
|
+
var len = hosts.length;
|
952
|
+
for (var i = 0; i < len; i++) {
|
953
|
+
var host = hosts[i];
|
954
|
+
host.enableClass(ConditionalColoringPlugin._controlClass);
|
955
|
+
if (!host._colorTextStyles) {
|
956
|
+
injectCss(ConditionalColoringPlugin._colorTextStyles, host.getElement());
|
957
|
+
host._colorTextStyles = true;
|
958
|
+
}
|
959
|
+
}
|
889
960
|
}
|
890
|
-
|
891
|
-
|
961
|
+
};
|
962
|
+
/** @private
|
963
|
+
* @param {Object} host
|
964
|
+
*/
|
965
|
+
ConditionalColoringPlugin.prototype._injectPredefinedColors = function(host) {
|
966
|
+
if(host._conditionalColoringStyleTag) {
|
967
|
+
host._conditionalColoringStyleTag.parentNode.removeChild(host._conditionalColoringStyleTag);
|
968
|
+
host._conditionalColoringStyleTag = null;
|
969
|
+
}
|
970
|
+
host._conditionalColoringStyleTag = injectCss(this._predefinedColorsStyles, host.getElement());
|
892
971
|
};
|
893
972
|
/** @public
|
894
973
|
* @param {Object} predefinedColors Predefined color object map
|
895
974
|
*/
|
896
975
|
ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedColors) {
|
897
|
-
if(predefinedColors != null && typeof predefinedColors === "object") {
|
898
|
-
this.
|
976
|
+
if (predefinedColors != null && typeof predefinedColors === "object") {
|
977
|
+
this._predefinedColors = predefinedColors;
|
978
|
+
this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
|
979
|
+
var hosts = this._hosts;
|
980
|
+
var len = hosts.length;
|
981
|
+
for (var i = 0; i < len; i++) {
|
982
|
+
this._injectPredefinedColors(hosts[i]);
|
983
|
+
}
|
899
984
|
}
|
900
985
|
};
|
901
986
|
/** @private
|
@@ -1073,19 +1158,20 @@ ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
|
|
1073
1158
|
this._clearPainter(colData);
|
1074
1159
|
|
1075
1160
|
// Removed column
|
1076
|
-
var
|
1077
|
-
if (
|
1161
|
+
var colId = e["colId"];
|
1162
|
+
if (colId) {
|
1078
1163
|
if (colData["coloringFields"]) {
|
1079
|
-
this._removeFieldReferrer(
|
1164
|
+
this._removeFieldReferrer(colId, COLORING_TYPE);
|
1080
1165
|
}
|
1081
1166
|
if (colData["blinkingField"]) {
|
1082
|
-
this._removeFieldReferrer(
|
1167
|
+
this._removeFieldReferrer(colId, BLINKING_TYPE);
|
1083
1168
|
}
|
1084
1169
|
}
|
1085
1170
|
|
1086
1171
|
// Another columns
|
1087
1172
|
var field = colData["field"];
|
1088
1173
|
if (field) {
|
1174
|
+
var colDef = colData["COL_DEF"];
|
1089
1175
|
var isStaticField = colDef ? !colDef.isRealTimeField() : true;
|
1090
1176
|
if (isStaticField) {
|
1091
1177
|
var colCount = this.getColumnCount();
|
@@ -7,12 +7,12 @@ declare namespace HeatMapPlugin {
|
|
7
7
|
|
8
8
|
type ColumnOptions = {
|
9
9
|
field: string,
|
10
|
-
heatMap?: HeatMapPlugin.Heatmap
|
10
|
+
heatMap?: HeatMapPlugin.Heatmap|null
|
11
11
|
};
|
12
12
|
|
13
13
|
type Heatmap = {
|
14
|
-
midPoint?: number,
|
15
|
-
mode?: string
|
14
|
+
midPoint?: number|null,
|
15
|
+
mode?: string|null
|
16
16
|
};
|
17
17
|
|
18
18
|
}
|
@@ -144,14 +144,25 @@ HeatMapPlugin.prototype.getConfigObject = function (out_obj) {
|
|
144
144
|
col = columns[i] = {};
|
145
145
|
}
|
146
146
|
|
147
|
-
var heatMap = col.heatMap = {};
|
148
147
|
|
149
148
|
var opt = this.getColumnHeatMap(i);
|
150
149
|
|
151
|
-
if (!opt) {
|
150
|
+
if (!opt) { // We are only interested in the columns that have heat map informations
|
151
|
+
continue;
|
152
|
+
}
|
153
|
+
|
154
|
+
// default value of midPoint and mode
|
155
|
+
if(opt.midPoint === 0 && opt.mode === "cell") {
|
156
|
+
col.heatMap = true;
|
157
|
+
continue;
|
158
|
+
}
|
159
|
+
|
160
|
+
var heatMap = col.heatMap = {};
|
161
|
+
|
152
162
|
if (opt.midPoint != null) {
|
153
163
|
heatMap.midPoint = opt.midPoint;
|
154
164
|
}
|
165
|
+
|
155
166
|
if (opt.mode != null) {
|
156
167
|
heatMap.mode = opt.mode;
|
157
168
|
}
|
@@ -18,7 +18,8 @@ declare namespace RowDraggingPlugin {
|
|
18
18
|
dragStart?: ((...params: any[]) => any)|null,
|
19
19
|
drag?: ((...params: any[]) => any)|null,
|
20
20
|
dragEnd?: ((...params: any[]) => any)|null,
|
21
|
-
dataMoved?: ((...params: any[]) => any)|null
|
21
|
+
dataMoved?: ((...params: any[]) => any)|null,
|
22
|
+
beforeDataMoved?: ((...params: any[]) => any)|null
|
22
23
|
};
|
23
24
|
|
24
25
|
}
|
@@ -18,6 +18,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
|
18
18
|
* @property {Function=} drag=null Function handler for drag event
|
19
19
|
* @property {Function=} dragEnd=null Function handler for dragEnd event
|
20
20
|
* @property {Function=} dataMoved=null Function handler for dataMoved event
|
21
|
+
* @property {Function=} beforeDataMoved=null Function handler for beforeDataMoved event
|
21
22
|
*/
|
22
23
|
|
23
24
|
/** @event RowDraggingPlugin#drag
|
@@ -42,8 +43,34 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
|
|
42
43
|
* @type {Object}
|
43
44
|
*/
|
44
45
|
/** @event RowDraggingPlugin#dataMoved
|
45
|
-
* @description Fired when rows or data are moved by drag operation.
|
46
|
+
* @description Fired when rows or data are moved by the drag operation.
|
46
47
|
* @type {Object}
|
48
|
+
* @property {Array.<number>} srcRowIndices row indices of the selected rows
|
49
|
+
* @property {Array.<string>} srcRowIds row ids of the selected rows
|
50
|
+
* @property {Array.<string>} srcRowTypes row types of the selected rows
|
51
|
+
* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
|
52
|
+
* @property {number} destRowIndex row index of the drop area
|
53
|
+
* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
|
54
|
+
* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
|
55
|
+
*/
|
56
|
+
/** @event RowDraggingPlugin#beforeDataMoved
|
57
|
+
* @description Fired after mouseup and before the data/row is about to be moved. You can check the current drag and drop states, cancel operation or apply custom tasks in this event.
|
58
|
+
* @type {Object}
|
59
|
+
* @property {Array.<number>} srcRowIndices row indices of the selected rows
|
60
|
+
* @property {Array.<string>} srcRowIds row ids of the selected rows
|
61
|
+
* @property {Array.<string>} srcRowTypes row types of the selected rows
|
62
|
+
* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
|
63
|
+
* @property {number} destRowIndex row index of the drop area
|
64
|
+
* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
|
65
|
+
* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
|
66
|
+
* @example
|
67
|
+
* beforeDataMoved: function(e) {
|
68
|
+
* var srcRowType = e.srcRowTypes[0];
|
69
|
+
* var destRowType = e.destRowType;
|
70
|
+
* if(srcRowType === "GROUP_MEMBER" && destRowType === "CONTENT") {
|
71
|
+
* e.cancel = true; // Prevent a group member row from moving outside of its own group
|
72
|
+
* }
|
73
|
+
* }
|
47
74
|
*/
|
48
75
|
|
49
76
|
|
@@ -55,6 +82,27 @@ var _isInContentSection = function (pos) {
|
|
55
82
|
return (pos && pos["sectionType"] === "content") ? true : false;
|
56
83
|
};
|
57
84
|
|
85
|
+
/** @private
|
86
|
+
* @param {string} rowType
|
87
|
+
* @return {boolean}
|
88
|
+
*/
|
89
|
+
var _isNormalRowType = function (rowType) {
|
90
|
+
if(rowType) {
|
91
|
+
if(rowType === "CONTENT") {
|
92
|
+
return true;
|
93
|
+
}
|
94
|
+
if(rowType === "CHAIN") {
|
95
|
+
return true;
|
96
|
+
}
|
97
|
+
if(rowType === "GROUP_HEADER") {
|
98
|
+
return true;
|
99
|
+
}
|
100
|
+
return false;
|
101
|
+
} else {
|
102
|
+
return true;
|
103
|
+
}
|
104
|
+
};
|
105
|
+
|
58
106
|
/** @constructor
|
59
107
|
* @param {RowDraggingPlugin.Options=} options
|
60
108
|
* @extends {GridPlugin}
|
@@ -397,6 +445,7 @@ RowDraggingPlugin.prototype.config = function (options) {
|
|
397
445
|
this.addListener(extOptions, "drag");
|
398
446
|
this.addListener(extOptions, "dragEnd");
|
399
447
|
this.addListener(extOptions, "dataMoved");
|
448
|
+
this.addListener(extOptions, "beforeDataMoved");
|
400
449
|
};
|
401
450
|
|
402
451
|
/** Get a current state of grid and extension config
|
@@ -795,7 +844,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
|
|
795
844
|
var destGrid = destPos["grid"] || srcGrid;
|
796
845
|
var destRowIndex = destPos["rowIndex"];
|
797
846
|
|
798
|
-
var rowSelection = srcGrid.getPlugin(
|
847
|
+
var rowSelection = srcGrid.getPlugin("RowSelectionPlugin");
|
799
848
|
var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
|
800
849
|
if (!srcRowIndices || !srcRowIndices.length) {
|
801
850
|
// case no row selection or it disabled
|
@@ -834,10 +883,9 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
|
|
834
883
|
* @return {number}
|
835
884
|
*/
|
836
885
|
RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
|
837
|
-
var destDv = destGrid.getDataSource();
|
838
|
-
|
839
886
|
var srcRowIndices = null;
|
840
887
|
var srcDv = srcGrid.getDataSource();
|
888
|
+
var destDv = destGrid.getDataSource();
|
841
889
|
if(typeof srcRowRef === "string") {
|
842
890
|
var srcRowIndex = srcDv.getRowIndex(this._startingRid);
|
843
891
|
if(srcRowIndex >= 0) {
|
@@ -851,27 +899,103 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
|
|
851
899
|
return 0;
|
852
900
|
}
|
853
901
|
|
902
|
+
// Available row types are ["CONTENT", "CHAIN", "CONSTITUENT", "GROUP_HEADER", "SUBGROUP_HEADER", "GROUP_MEMBER"]
|
903
|
+
var i, len;
|
904
|
+
var srcCount = srcRowIndices.length;
|
905
|
+
var srcRowIds = new Array(srcCount);
|
906
|
+
var srcRowTypes = [];
|
907
|
+
var conRowType = "";
|
908
|
+
var api = this.getGridApi();
|
909
|
+
for(i = 0; i < srcCount; ++i) {
|
910
|
+
var srcIndex = srcRowIndices[i];
|
911
|
+
var rowType = api.getRowType(srcIndex);
|
912
|
+
srcRowIds[i] = srcDv.getRowId(srcIndex);
|
913
|
+
srcRowTypes[i] = rowType;
|
914
|
+
if(conRowType) {
|
915
|
+
if(conRowType !== rowType) {
|
916
|
+
conRowType = "MIXED";
|
917
|
+
}
|
918
|
+
} else {
|
919
|
+
conRowType = rowType;
|
920
|
+
}
|
921
|
+
}
|
922
|
+
var destRowType = api.getRowType(destRowIndex); // TODO: this has to be get from destGrid
|
923
|
+
var destRowId = destDv.getRowId(destRowIndex);
|
924
|
+
var parentRowId, childRowIds;
|
925
|
+
|
926
|
+
if(this.hasListener("beforeDataMoved")) {
|
927
|
+
evtArg["srcRowIndices"] = srcRowIndices;
|
928
|
+
evtArg["srcRowIds"] = srcRowIds;
|
929
|
+
evtArg["srcRowTypes"] = srcRowTypes;
|
930
|
+
evtArg["consolidatedSrcRowType"] = conRowType;
|
931
|
+
evtArg["destRowIndex"] = destRowIndex;
|
932
|
+
evtArg["destRowId"] = destRowId;
|
933
|
+
evtArg["destRowType"] = destRowType;
|
934
|
+
this._dispatch("beforeDataMoved", evtArg);
|
935
|
+
if(evtArg["cancel"]) {
|
936
|
+
return 0;
|
937
|
+
}
|
938
|
+
}
|
854
939
|
|
940
|
+
var rsp = srcGrid.getPlugin("RowSegmentingPlugin");
|
855
941
|
var movedRowIds = null;
|
856
|
-
var destRowId = destDv.getRowId(destRowIndex);
|
857
942
|
if(srcGrid === destGrid) { // TODO: Support wrap mode
|
858
|
-
|
943
|
+
if(conRowType === "MIXED") {
|
944
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
945
|
+
} else if(conRowType === "CONTENT") {
|
946
|
+
if(destRowType === "GROUP_HEADER") {
|
947
|
+
childRowIds = rsp.getSegmentChildIds(destRowId);
|
948
|
+
if(childRowIds) {
|
949
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
950
|
+
} else { // Add content row as a new member only if there is no member
|
951
|
+
rsp.addSegmentChildren(destRowId, srcRowIds);
|
952
|
+
movedRowIds = srcRowIds;
|
953
|
+
}
|
954
|
+
} else if(_isNormalRowType(destRowType)) {
|
955
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
956
|
+
} else if(destRowType === "GROUP_MEMBER") {
|
957
|
+
parentRowId = rsp.getSegmentParentRowId(destRowId);
|
958
|
+
rsp.addSegmentChildren(parentRowId, srcRowIds);
|
959
|
+
|
960
|
+
srcDv.moveRow(srcRowIds, destRowId);
|
961
|
+
movedRowIds = srcRowIds;
|
962
|
+
}
|
963
|
+
} else if(conRowType === "CHAIN" || conRowType === "GROUP_HEADER") {
|
964
|
+
if(_isNormalRowType(destRowType)) {
|
965
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
966
|
+
}
|
967
|
+
} else if(conRowType === "GROUP_MEMBER") {
|
968
|
+
if(srcCount === 1) {
|
969
|
+
parentRowId = rsp.getSegmentParentRowId(srcRowIds[0]);
|
970
|
+
childRowIds = rsp.getSegmentChildIds(parentRowId);
|
971
|
+
var childCount = childRowIds ? childRowIds.length : 0;
|
972
|
+
var endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
|
973
|
+
if(destRowIndex === endOfSegment) {
|
974
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
975
|
+
} else if(destRowType === "GROUP_MEMBER") {
|
976
|
+
var destParentRowId = rsp.getSegmentParentRowId(destRowId);
|
977
|
+
if(parentRowId === destParentRowId) {
|
978
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
979
|
+
}
|
980
|
+
} else if(_isNormalRowType(destRowType)) { // move member out of existing segment
|
981
|
+
rsp.removeSegmentChild(parentRowId, srcRowIds[0]);
|
982
|
+
|
983
|
+
movedRowIds = srcDv.moveRow(srcRowIds[0], destRowId);
|
984
|
+
}
|
985
|
+
} else {
|
986
|
+
movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
|
987
|
+
}
|
988
|
+
} // else CONSTITUENT, SUBGROUP_HEADER and other types cannot be moved
|
859
989
|
} else {
|
990
|
+
// TODO: Add support moving row based on row types
|
860
991
|
// TODO: Check if we support moving to last row for multi table
|
861
|
-
|
862
|
-
// return 0;
|
863
|
-
// }
|
864
|
-
movedRowIds = [];
|
992
|
+
movedRowIds = srcRowIds;
|
865
993
|
evtArg["destGrid"] = destGrid;
|
866
994
|
|
867
995
|
var originalRows = [];
|
868
|
-
|
869
|
-
var len = srcRowIndices.length;
|
870
|
-
for(i = 0; i < len; ++i) {
|
871
|
-
var rowId = srcDv.getRowId(srcRowIndices[i]);
|
996
|
+
for(i = 0; i < srcCount; ++i) {
|
872
997
|
var rowData = srcDv.getRowData(rowId);
|
873
998
|
if(rowData) {
|
874
|
-
movedRowIds.push(rowId);
|
875
999
|
originalRows.push(rowData);
|
876
1000
|
}
|
877
1001
|
}
|
@@ -891,14 +1015,15 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
|
|
891
1015
|
}
|
892
1016
|
}
|
893
1017
|
|
894
|
-
|
1018
|
+
var moveCount = movedRowIds ? movedRowIds.length : 0;
|
1019
|
+
if(moveCount) {
|
895
1020
|
evtArg["originRowId"] = movedRowIds[0];
|
896
1021
|
evtArg["originRowIds"] = movedRowIds;
|
897
1022
|
evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
|
898
1023
|
|
899
1024
|
this._dispatch("dataMoved", evtArg);
|
900
1025
|
}
|
901
|
-
return
|
1026
|
+
return moveCount;
|
902
1027
|
};
|
903
1028
|
/** @private
|
904
1029
|
* @return {boolean}
|
@@ -7,30 +7,30 @@ import { DateTime } from '../../tr-grid-util/es6/DateTime.js';
|
|
7
7
|
declare namespace TextFormattingPlugin {
|
8
8
|
|
9
9
|
type FormatOptions = {
|
10
|
-
formatType?: string,
|
11
|
-
type?: string,
|
12
|
-
field?: string,
|
13
|
-
decimalPlaces?: number,
|
14
|
-
precisionEnabled?: boolean,
|
15
|
-
plusSign?: boolean,
|
16
|
-
separator?: boolean,
|
17
|
-
percentSign?: boolean,
|
18
|
-
scalingUnit?: string,
|
19
|
-
multiplyBy100?: boolean,
|
20
|
-
mutiplyBy100?: boolean,
|
21
|
-
dateTimeFormat?: string,
|
22
|
-
useUTCTime?: boolean,
|
23
|
-
autoTextFormatting?: boolean,
|
24
|
-
formatLogic?: ((...params: any[]) => any)
|
10
|
+
formatType?: string|null,
|
11
|
+
type?: string|null,
|
12
|
+
field?: string|null,
|
13
|
+
decimalPlaces?: number|null,
|
14
|
+
precisionEnabled?: boolean|null,
|
15
|
+
plusSign?: boolean|null,
|
16
|
+
separator?: boolean|null,
|
17
|
+
percentSign?: boolean|null,
|
18
|
+
scalingUnit?: string|null,
|
19
|
+
multiplyBy100?: boolean|null,
|
20
|
+
mutiplyBy100?: boolean|null,
|
21
|
+
dateTimeFormat?: string|null,
|
22
|
+
useUTCTime?: boolean|null,
|
23
|
+
autoTextFormatting?: boolean|null,
|
24
|
+
formatLogic?: ((...params: any[]) => any)|null
|
25
25
|
};
|
26
26
|
|
27
27
|
type ColumnOptions = {
|
28
|
-
formatType?: (string|TextFormattingPlugin.FormatOptions),
|
29
|
-
autoTextFormatting?: boolean
|
28
|
+
formatType?: (string|TextFormattingPlugin.FormatOptions)|null,
|
29
|
+
autoTextFormatting?: boolean|null
|
30
30
|
};
|
31
31
|
|
32
32
|
type GridOptions = {
|
33
|
-
autoTextFormatting?: boolean
|
33
|
+
autoTextFormatting?: boolean|null
|
34
34
|
};
|
35
35
|
|
36
36
|
type FormatLogicArguments = {
|
@@ -40,7 +40,7 @@ declare namespace TextFormattingPlugin {
|
|
40
40
|
formattedText: string,
|
41
41
|
cell: any,
|
42
42
|
rowData: any,
|
43
|
-
format: ((...params: any[]) => any)
|
43
|
+
format: ((...params: any[]) => any)|null
|
44
44
|
};
|
45
45
|
|
46
46
|
}
|
@@ -61,7 +61,7 @@ declare class TextFormattingPlugin extends GridPlugin {
|
|
61
61
|
|
62
62
|
public getConfigObject(gridOptions?: any): any;
|
63
63
|
|
64
|
-
public setColumnFormat(colIndex: number, formatOptions: TextFormattingPlugin.FormatOptions): void;
|
64
|
+
public setColumnFormat(colIndex: number, formatOptions: TextFormattingPlugin.FormatOptions|null): void;
|
65
65
|
|
66
66
|
public getColumnFormatOptions(colIndex: number, options?: any): any;
|
67
67
|
|