@refinitiv-ui/efx-grid 6.0.33 → 6.0.34
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|