@cdmx/wappler_ag_grid 1.6.2 → 1.6.4
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/README.md +85 -42
- package/app_connect/components.hjson +176 -17
- package/dmx-ag-grid.js +124 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,55 +33,52 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
|
|
|
33
33
|
4. **Case-Insensitive Sort**: Specifies if the columns are sorted in case-insensitive manner. (Default: false)
|
|
34
34
|
5. **Filter**: Specifies if the column has a filter. (Default: true)
|
|
35
35
|
6. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
|
|
36
|
-
7. **
|
|
37
|
-
8. **
|
|
38
|
-
9. **
|
|
39
|
-
10. **
|
|
40
|
-
11. **
|
|
41
|
-
12. **
|
|
42
|
-
13. **
|
|
43
|
-
14. **
|
|
44
|
-
15. **
|
|
45
|
-
16. **
|
|
46
|
-
17. **Page Limit**: Number of rows to show per page. (Default: 20)
|
|
47
|
-
18. **Row Selection**: Row Selection (single or multiple).
|
|
36
|
+
7. **Exclude Hidden Fields**: Specifies if Hidden fields are to be excluded in CSV export. (Default: false)
|
|
37
|
+
8. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
|
|
38
|
+
9. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
|
|
39
|
+
10. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
|
|
40
|
+
11. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
|
|
41
|
+
12. **Pagination**: Enables pagination. (Default: true)
|
|
42
|
+
13. **Auto Pagination**: Enables automatic pagination. (Default: false)
|
|
43
|
+
14. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
|
|
44
|
+
15. **Page Limit**: Number of rows to show per page. (Default: 20)
|
|
45
|
+
16. **Row Selection**: Row Selection (single or multiple).
|
|
48
46
|
- "Single"
|
|
49
47
|
- "Multiple" (Default)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
17. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
|
|
49
|
+
18. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
|
|
50
|
+
19. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
|
|
51
|
+
20. **Loading Overlay**: This enables loading overlay. (Default: false)
|
|
52
|
+
21. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
|
|
53
|
+
22. **Sticky Header and Horizontal Scrollbar**: Optionally specify the header offset and topbar class.
|
|
56
54
|
- Fixed Header: Enables sticky header. (Default: false)
|
|
57
55
|
- Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)
|
|
58
56
|
- Topbar Class: Specify class, e.g., "topbar", to measure the offset from (Optional). (Default: "topbar")
|
|
59
57
|
- Topbar Offset: Specify topbar offset (Default: 80)
|
|
60
58
|
- Fixed Horizontal Scroll: Enables Hovering horizontal scrollbar which stays at the bottom all the time. (Default: false)
|
|
61
59
|
- Fixed Horizontal Scroll Width: Fixed horizontal scroll width percentage. (Default: 80%)
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
47. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
|
|
60
|
+
23. **Row Height**: Height of each row in pixels. (Default: Auto)
|
|
61
|
+
24. **Header Height**: Height of the header row in pixels. (Default: Auto)
|
|
62
|
+
25. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
|
|
63
|
+
26. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
|
|
64
|
+
27. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
|
|
65
|
+
28. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
|
|
66
|
+
29. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
|
|
67
|
+
30. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
|
|
68
|
+
31. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
|
|
69
|
+
32. **Suppress Movable Columns**: Disables moving columns. (Default: false)
|
|
70
|
+
33. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
|
|
71
|
+
34. **Animate Rows**: Enables row animation on data changes. (Default: false)
|
|
72
|
+
35. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
|
|
73
|
+
36. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
|
|
74
|
+
37. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
|
|
75
|
+
38. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
|
|
76
|
+
39. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
|
|
77
|
+
40. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
|
|
78
|
+
41. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
|
|
79
|
+
42. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
|
|
80
|
+
43. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
|
|
81
|
+
44. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
|
|
85
82
|
|
|
86
83
|
# Data Type Overrides
|
|
87
84
|
|
|
@@ -95,16 +92,40 @@ This grid allows you to define custom type overrides for specific fields in the
|
|
|
95
92
|
|
|
96
93
|
# Style Formatting
|
|
97
94
|
|
|
95
|
+
## Text and Cell Colors
|
|
96
|
+
|
|
98
97
|
The Style Formatting feature allows you to configure custom colors and fonts for column data based on certain conditions.
|
|
99
98
|
This grid allows you to define custom color and font settings based on specific conditions. The grid has the following columns:
|
|
100
99
|
|
|
101
100
|
1. **Field**: The field name for which you want to apply the custom color and font settings. (eg. first_name or status)
|
|
102
|
-
2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den)
|
|
101
|
+
2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den).
|
|
102
|
+
You can also supply a function here to return true or false based on the input.
|
|
103
|
+
eg: input jsTest() in the condition field and define it as below:
|
|
104
|
+
```javascript
|
|
105
|
+
<script>
|
|
106
|
+
function jsTest(data) {
|
|
107
|
+
return (data.status == 'success');
|
|
108
|
+
}
|
|
109
|
+
</script>
|
|
103
110
|
3. **Color**: The custom color to apply when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red").
|
|
104
111
|
4. **Area**: Choose where to apply the color: "text" (cell text) or "cell" (cell background).
|
|
105
112
|
5. **Font**: Choose the font style: "normal," "italic," or "bold."
|
|
106
113
|
---
|
|
107
114
|
|
|
115
|
+
## Configure Row Colors
|
|
116
|
+
|
|
117
|
+
1. **Condition**: The condition to check for applying the custom color to rows. (eg. status=false or name=K den).
|
|
118
|
+
You can also supply a function here to return true or false based on the input.
|
|
119
|
+
eg: input jsTest() in the condition field and define it as below:
|
|
120
|
+
```javascript
|
|
121
|
+
<script>
|
|
122
|
+
function jsTest(data) {
|
|
123
|
+
return (data.status == 'success');
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
126
|
+
</script>
|
|
127
|
+
2. **Color**: The custom color to apply to row when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red").
|
|
128
|
+
|
|
108
129
|
# Tooltip Settings
|
|
109
130
|
|
|
110
131
|
The Tooltip Settings feature allows you to configure custom tooltips for specific fields in the data.
|
|
@@ -194,6 +215,28 @@ This grid allows you to define custom column widths for specific columns. The gr
|
|
|
194
215
|
2. **Min Width**: The minimum width for the column.
|
|
195
216
|
3. **Max Width**: The maximum width for the column.
|
|
196
217
|
|
|
218
|
+
# Inline Editing
|
|
219
|
+
|
|
220
|
+
**Editable Fields**
|
|
221
|
+
Makes specific cells editable. Values should be comma-separated fields.
|
|
222
|
+
|
|
223
|
+
**Editable Cells**
|
|
224
|
+
Makes All cells editable. (Default: false)
|
|
225
|
+
|
|
226
|
+
**Editable Rows**
|
|
227
|
+
Makes Entire rows editable. (Default: false)
|
|
228
|
+
|
|
229
|
+
**Configure Selector Editors**
|
|
230
|
+
This enables Static and Dynamic Field selector options.
|
|
231
|
+
|
|
232
|
+
**Static Selectors**
|
|
233
|
+
1. **Field**: The field name for which you want to apply selector/dropdown for.
|
|
234
|
+
2. **Options**: JSON input of options for the select dropdown. e.g. {"1": "Angie", "2": "Radar"}
|
|
235
|
+
|
|
236
|
+
**Dynamic Selectors**
|
|
237
|
+
1. **Field**: The field name for which you want to apply selector/dropdown for.
|
|
238
|
+
2. **Options Field**: The field name which contains the options for the field data. e.g. {"1": "Angie", "2": "Radar"} supplied in a seperate field. This allows different options for every field.
|
|
239
|
+
|
|
197
240
|
# Hide Fields and Filters
|
|
198
241
|
|
|
199
242
|
The Hide Fields and Filters feature allows you to hide components such as filters and fields.
|
|
@@ -176,22 +176,6 @@
|
|
|
176
176
|
"defaultValue": true,
|
|
177
177
|
"help": "Specifies if the column has a floating filter"
|
|
178
178
|
},
|
|
179
|
-
{
|
|
180
|
-
"name": "cellEditable",
|
|
181
|
-
"attribute": "dmx-bind:cell_editable",
|
|
182
|
-
"title": "Editable Cells",
|
|
183
|
-
"type": "boolean",
|
|
184
|
-
"defaultValue": false,
|
|
185
|
-
"help": "Makes cells editable."
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "rowEditable",
|
|
189
|
-
"attribute": "dmx-bind:row_editable",
|
|
190
|
-
"title": "Row Editable",
|
|
191
|
-
"type": "boolean",
|
|
192
|
-
"defaultValue": false,
|
|
193
|
-
"help": "Makes entire row editable."
|
|
194
|
-
},
|
|
195
179
|
{
|
|
196
180
|
"name": "exportExcludeHidden",
|
|
197
181
|
"attribute": "dmx-bind:export_exclude_hidden_fields",
|
|
@@ -697,7 +681,7 @@
|
|
|
697
681
|
{
|
|
698
682
|
"name": "listColors",
|
|
699
683
|
"attribute": "dmx-bind:cstyles",
|
|
700
|
-
"title": "Colors",
|
|
684
|
+
"title": "Text and Cell Colors",
|
|
701
685
|
"type": "grid",
|
|
702
686
|
"dataBindings": true,
|
|
703
687
|
"jsonFormat": true,
|
|
@@ -760,6 +744,64 @@
|
|
|
760
744
|
}
|
|
761
745
|
}
|
|
762
746
|
]
|
|
747
|
+
},
|
|
748
|
+
{
|
|
749
|
+
"name": "rstyles",
|
|
750
|
+
"title": "Configure Row Colors",
|
|
751
|
+
"attributeStartsWith": "dmx-bind",
|
|
752
|
+
"attribute": "rstyles",
|
|
753
|
+
"type": "boolean",
|
|
754
|
+
"defaultValue": false,
|
|
755
|
+
"display": "fieldset",
|
|
756
|
+
"show": [
|
|
757
|
+
"listRowColors"
|
|
758
|
+
],
|
|
759
|
+
"noChangeOnHide": true,
|
|
760
|
+
"groupEnabler": true,
|
|
761
|
+
"help": "Add custom Colors function that will return true or false. Add the fucntion name in the Function column."
|
|
762
|
+
"children": [
|
|
763
|
+
{
|
|
764
|
+
"name": "listRowColors",
|
|
765
|
+
"attribute": "dmx-bind:rstyles",
|
|
766
|
+
"title": "Row Colors",
|
|
767
|
+
"type": "grid",
|
|
768
|
+
"key": "field",
|
|
769
|
+
"dataBindings": true,
|
|
770
|
+
"jsonFormat": true,
|
|
771
|
+
"encloseBT": true,
|
|
772
|
+
"jsonBT": true,
|
|
773
|
+
"initDisplay": "none",
|
|
774
|
+
"columns": [
|
|
775
|
+
{
|
|
776
|
+
"field": "field",
|
|
777
|
+
"caption": "Field",
|
|
778
|
+
"editable": {
|
|
779
|
+
"type": "text"
|
|
780
|
+
}
|
|
781
|
+
},
|
|
782
|
+
{
|
|
783
|
+
"field": "condition",
|
|
784
|
+
"caption": "Function",
|
|
785
|
+
"editable": {
|
|
786
|
+
"type": "text"
|
|
787
|
+
}
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"field": "customColor",
|
|
791
|
+
"caption": "Color",
|
|
792
|
+
"editable": {
|
|
793
|
+
"type": "text"
|
|
794
|
+
},
|
|
795
|
+
help: "Example: '#FF0000' or 'red'"
|
|
796
|
+
}
|
|
797
|
+
],
|
|
798
|
+
"newRecord": {
|
|
799
|
+
"field": "",
|
|
800
|
+
"condition": "",
|
|
801
|
+
"customColor": ""
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
]
|
|
763
805
|
}
|
|
764
806
|
]
|
|
765
807
|
},
|
|
@@ -1220,6 +1262,123 @@
|
|
|
1220
1262
|
}
|
|
1221
1263
|
]
|
|
1222
1264
|
},
|
|
1265
|
+
{
|
|
1266
|
+
"group": "📒 Inling Editing",
|
|
1267
|
+
"variables": [
|
|
1268
|
+
{
|
|
1269
|
+
"name": "cellsEditable",
|
|
1270
|
+
"attribute": "editable_fields",
|
|
1271
|
+
"title": "Editable Cells",
|
|
1272
|
+
"type": "text",
|
|
1273
|
+
"defaultValue": "",
|
|
1274
|
+
"help": "Makes Specific cells editable. Values should be comma separated fields."
|
|
1275
|
+
},
|
|
1276
|
+
{
|
|
1277
|
+
"name": "allCellsEditable",
|
|
1278
|
+
"attribute": "dmx-bind:cell_editable",
|
|
1279
|
+
"title": "Editable Cells",
|
|
1280
|
+
"type": "boolean",
|
|
1281
|
+
"defaultValue": false,
|
|
1282
|
+
"help": "Makes All cells editable."
|
|
1283
|
+
},
|
|
1284
|
+
{
|
|
1285
|
+
"name": "rowEditable",
|
|
1286
|
+
"attribute": "dmx-bind:row_editable",
|
|
1287
|
+
"title": "Row Editable",
|
|
1288
|
+
"type": "boolean",
|
|
1289
|
+
"defaultValue": false,
|
|
1290
|
+
"help": "Makes entire row editable."
|
|
1291
|
+
},
|
|
1292
|
+
{
|
|
1293
|
+
"name": "inlineEditorOptions",
|
|
1294
|
+
"title": "Configure Selector Editors",
|
|
1295
|
+
"attribute": "selector_options",
|
|
1296
|
+
"type": "boolean",
|
|
1297
|
+
"defaultValue": false,
|
|
1298
|
+
"display": "fieldset",
|
|
1299
|
+
"show": [
|
|
1300
|
+
"StaticSelectorEditors",
|
|
1301
|
+
"DynamicSelectorEditors"
|
|
1302
|
+
],
|
|
1303
|
+
"noChangeOnHide": true,
|
|
1304
|
+
"groupEnabler": true,
|
|
1305
|
+
"help": "Enables Dropdown Selectors"
|
|
1306
|
+
"children": [
|
|
1307
|
+
{
|
|
1308
|
+
"name": "StaticSelectorEditors",
|
|
1309
|
+
"attribute": "dmx-bind:cstatic_select_editors",
|
|
1310
|
+
"title": "Static Selectors",
|
|
1311
|
+
"type": "grid",
|
|
1312
|
+
"key": "field",
|
|
1313
|
+
"jsonFormat": true,
|
|
1314
|
+
"dataBindings": true,
|
|
1315
|
+
"encloseBT": true,
|
|
1316
|
+
"jsonBT": true,
|
|
1317
|
+
"initDisplay": "none",
|
|
1318
|
+
"columns": [
|
|
1319
|
+
{
|
|
1320
|
+
"field": "field",
|
|
1321
|
+
"caption": "Field",
|
|
1322
|
+
"size": "20%",
|
|
1323
|
+
"editable": {
|
|
1324
|
+
"type": "text"
|
|
1325
|
+
}
|
|
1326
|
+
},
|
|
1327
|
+
{
|
|
1328
|
+
field: "options",
|
|
1329
|
+
caption: "Options",
|
|
1330
|
+
size: "20%",
|
|
1331
|
+
dataBindings: true,
|
|
1332
|
+
editable: {
|
|
1333
|
+
type: "datapicker"
|
|
1334
|
+
},
|
|
1335
|
+
help: "Static Options."
|
|
1336
|
+
}
|
|
1337
|
+
],
|
|
1338
|
+
"newRecord": {
|
|
1339
|
+
"field": "",
|
|
1340
|
+
"options": ""
|
|
1341
|
+
}
|
|
1342
|
+
},
|
|
1343
|
+
{
|
|
1344
|
+
"name": "DynamicSelectorEditors",
|
|
1345
|
+
"attribute": "dmx-bind:cdynamic_select_editors",
|
|
1346
|
+
"title": "Dynamic Selectors",
|
|
1347
|
+
"type": "grid",
|
|
1348
|
+
"key": "field",
|
|
1349
|
+
"jsonFormat": true,
|
|
1350
|
+
"dataBindings": true,
|
|
1351
|
+
"encloseBT": true,
|
|
1352
|
+
"jsonBT": true,
|
|
1353
|
+
"initDisplay": "none",
|
|
1354
|
+
"columns": [
|
|
1355
|
+
{
|
|
1356
|
+
"field": "field",
|
|
1357
|
+
"caption": "Field",
|
|
1358
|
+
"size": "20%",
|
|
1359
|
+
"editable": {
|
|
1360
|
+
"type": "text"
|
|
1361
|
+
}
|
|
1362
|
+
},
|
|
1363
|
+
{
|
|
1364
|
+
field: "options_field",
|
|
1365
|
+
caption: "Options Field",
|
|
1366
|
+
size: "20%",
|
|
1367
|
+
"editable": {
|
|
1368
|
+
"type": "text"
|
|
1369
|
+
}
|
|
1370
|
+
help: "Dynamic Options using field data."
|
|
1371
|
+
}
|
|
1372
|
+
],
|
|
1373
|
+
"newRecord": {
|
|
1374
|
+
"field": "",
|
|
1375
|
+
"options_field": ""
|
|
1376
|
+
}
|
|
1377
|
+
}
|
|
1378
|
+
]
|
|
1379
|
+
}
|
|
1380
|
+
]
|
|
1381
|
+
},
|
|
1223
1382
|
{
|
|
1224
1383
|
"group": "📒 Hide Fields and Filters",
|
|
1225
1384
|
"variables": [
|
package/dmx-ag-grid.js
CHANGED
|
@@ -22,10 +22,14 @@ dmx.Component('ag-grid', {
|
|
|
22
22
|
tooltip_config: { type: Array, default: [] },
|
|
23
23
|
custom_tooltip: { type: String, default: null },
|
|
24
24
|
cstyles: { type: Array, default: [] },
|
|
25
|
+
rstyles: { type: Array, default: {} },
|
|
25
26
|
cnames: { type: Object, default: {} },
|
|
26
27
|
cwidths: { type: Object, default: {} },
|
|
27
28
|
ctypes: { type: Array, default: [] },
|
|
28
29
|
cfilters: { type: Array, default: [] },
|
|
30
|
+
cstatic_select_editors: { type: Object, default: {} },
|
|
31
|
+
cdynamic_select_editors: { type: Object, default: {} },
|
|
32
|
+
cselect_placeholder: { type: String, default: "-" },
|
|
29
33
|
wrap_header_text: { type: Boolean, default: true },
|
|
30
34
|
auto_header_height: { type: Boolean, default: true },
|
|
31
35
|
wrap_text: { type: Boolean, default: false },
|
|
@@ -69,6 +73,7 @@ dmx.Component('ag-grid', {
|
|
|
69
73
|
min_width: { type: Number, default: 150 },
|
|
70
74
|
sortable: { type: Boolean, default: true },
|
|
71
75
|
cell_editable: { type: Boolean, default: false },
|
|
76
|
+
editable_fields: { type: String, default: null },
|
|
72
77
|
row_editable: { type: Boolean, default: false },
|
|
73
78
|
ci_sort: { type: Boolean, default: false },
|
|
74
79
|
resizable: { type: Boolean, default: true },
|
|
@@ -728,7 +733,6 @@ dmx.Component('ag-grid', {
|
|
|
728
733
|
const options = {
|
|
729
734
|
timeZone: timezone,
|
|
730
735
|
};
|
|
731
|
-
|
|
732
736
|
const convertedTimestamp = date.toLocaleString(options.date_locale, options);
|
|
733
737
|
const [datePart, timePart] = convertedTimestamp.split(', ');
|
|
734
738
|
const [day, month, year] = datePart.split('/');
|
|
@@ -755,6 +759,32 @@ dmx.Component('ag-grid', {
|
|
|
755
759
|
|
|
756
760
|
return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
|
|
757
761
|
};
|
|
762
|
+
//Custom Row Styles
|
|
763
|
+
function createRowStyleFunction(rstyles) {
|
|
764
|
+
return function(params) {
|
|
765
|
+
if (!rstyles || !Array.isArray(rstyles) || rstyles.length === 0) {
|
|
766
|
+
return; // No styles to apply
|
|
767
|
+
}
|
|
768
|
+
const rowStyle = {};
|
|
769
|
+
for (const style of rstyles) {
|
|
770
|
+
const condition = style.condition.replace(/\(\)$/, ''); // Remove () if present at the end
|
|
771
|
+
const customColor = style.customColor;
|
|
772
|
+
let conditionResult;
|
|
773
|
+
if (typeof window[condition] === 'function') {
|
|
774
|
+
const result = window[condition](params.data);
|
|
775
|
+
if (typeof result !== 'boolean') {
|
|
776
|
+
console.error('Row condition function must return a boolean value.');
|
|
777
|
+
return;
|
|
778
|
+
}
|
|
779
|
+
conditionResult = result;
|
|
780
|
+
}
|
|
781
|
+
if (conditionResult) {
|
|
782
|
+
rowStyle.background = customColor;
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
return rowStyle;
|
|
786
|
+
};
|
|
787
|
+
}
|
|
758
788
|
dateFilterParams = {
|
|
759
789
|
comparator: function (filterLocalDateAtMidnight, cellValue) {
|
|
760
790
|
var cellDate = new Date(cellValue);
|
|
@@ -843,7 +873,6 @@ dmx.Component('ag-grid', {
|
|
|
843
873
|
if (matchingChange && matchingChange.area === 'cell' ) {
|
|
844
874
|
return matchingChange.new_value;
|
|
845
875
|
}
|
|
846
|
-
|
|
847
876
|
// Check if there's a matching change in dataBindedChanges
|
|
848
877
|
const matchingKeyData = keyLookup[key];
|
|
849
878
|
if (matchingKeyData) {
|
|
@@ -883,14 +912,11 @@ dmx.Component('ag-grid', {
|
|
|
883
912
|
|
|
884
913
|
return function (params) {
|
|
885
914
|
const value = params.data[key];
|
|
886
|
-
|
|
887
|
-
|
|
888
915
|
// Check if there's a matching change in dataChanges
|
|
889
916
|
const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
|
|
890
917
|
if (matchingChange && matchingChange.area === 'tooltip' ) {
|
|
891
918
|
return matchingChange.new_value;
|
|
892
919
|
}
|
|
893
|
-
|
|
894
920
|
// Check if there's a matching change in dataBindedChanges
|
|
895
921
|
const matchingKeyData = keyLookup[key];
|
|
896
922
|
if (matchingKeyData) {
|
|
@@ -933,7 +959,6 @@ dmx.Component('ag-grid', {
|
|
|
933
959
|
|
|
934
960
|
return function (params) {
|
|
935
961
|
const value = params.data[key];
|
|
936
|
-
|
|
937
962
|
// Check if there's a matching change in dataChanges
|
|
938
963
|
const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
|
|
939
964
|
if (matchingChange) {
|
|
@@ -978,8 +1003,11 @@ dmx.Component('ag-grid', {
|
|
|
978
1003
|
let minWidth;
|
|
979
1004
|
let hide;
|
|
980
1005
|
let type;
|
|
981
|
-
let colId;
|
|
982
1006
|
let sortable;
|
|
1007
|
+
let cellEditor;
|
|
1008
|
+
let cellEditorParams;
|
|
1009
|
+
let valueParser;
|
|
1010
|
+
let editable;
|
|
983
1011
|
|
|
984
1012
|
if (dataType === 'number') {
|
|
985
1013
|
filter = 'agNumberColumnFilter';
|
|
@@ -1036,22 +1064,43 @@ dmx.Component('ag-grid', {
|
|
|
1036
1064
|
function applyCellStyle(params) {
|
|
1037
1065
|
const field = params.colDef.field.toString();
|
|
1038
1066
|
const styles = cstyles.filter((cs) => cs.field === field);
|
|
1039
|
-
const whiteSpace = options.wrap_text ? 'normal' : 'nowrap'
|
|
1067
|
+
const whiteSpace = options.wrap_text ? 'normal' : 'nowrap';
|
|
1040
1068
|
|
|
1041
1069
|
for (const style of styles) {
|
|
1042
1070
|
const condition = style.condition;
|
|
1043
1071
|
const customColor = style.customColor;
|
|
1044
1072
|
const font = style.font || 'normal';
|
|
1045
|
-
const area = style.area || 'text';
|
|
1046
|
-
|
|
1047
|
-
if (
|
|
1048
|
-
params.data
|
|
1049
|
-
(
|
|
1050
|
-
|
|
1073
|
+
const area = style.area || 'text';
|
|
1074
|
+
let conditionResult = false;
|
|
1075
|
+
if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
|
|
1076
|
+
const result = window[condition.replace(/\(\)$/, '')](params.data);
|
|
1077
|
+
if (typeof result !== 'boolean') {
|
|
1078
|
+
console.error('Custom condition function must return a boolean value.');
|
|
1079
|
+
return;
|
|
1080
|
+
}
|
|
1081
|
+
conditionResult = result;
|
|
1082
|
+
} else {
|
|
1083
|
+
const [left, operator, right] = extractConditionParts(condition);
|
|
1084
|
+
if (params.data.hasOwnProperty(left) &&
|
|
1085
|
+
(params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
|
|
1086
|
+
) {
|
|
1087
|
+
conditionResult = true;
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
if (conditionResult) {
|
|
1051
1091
|
if (area === 'text') {
|
|
1052
|
-
return {
|
|
1092
|
+
return {
|
|
1093
|
+
color: customColor,
|
|
1094
|
+
fontStyle: font,
|
|
1095
|
+
fontWeight: (font === 'bold' ? 'bold' : null),
|
|
1096
|
+
whiteSpace: whiteSpace
|
|
1097
|
+
};
|
|
1053
1098
|
} else if (area === 'cell') {
|
|
1054
|
-
return {
|
|
1099
|
+
return {
|
|
1100
|
+
backgroundColor: customColor,
|
|
1101
|
+
fontStyle: font,
|
|
1102
|
+
whiteSpace: whiteSpace
|
|
1103
|
+
};
|
|
1055
1104
|
}
|
|
1056
1105
|
}
|
|
1057
1106
|
}
|
|
@@ -1060,7 +1109,6 @@ dmx.Component('ag-grid', {
|
|
|
1060
1109
|
}
|
|
1061
1110
|
return null;
|
|
1062
1111
|
}
|
|
1063
|
-
|
|
1064
1112
|
if (cnames.hasOwnProperty(key)) {
|
|
1065
1113
|
const cname = cnames[key]
|
|
1066
1114
|
headerName = cname ? cname.custom_name : humanize(key);
|
|
@@ -1125,6 +1173,59 @@ dmx.Component('ag-grid', {
|
|
|
1125
1173
|
else {
|
|
1126
1174
|
hide = undefined;
|
|
1127
1175
|
}
|
|
1176
|
+
if (options.editable_fields) {
|
|
1177
|
+
const editableCellsArray = options.editable_fields.split(',');
|
|
1178
|
+
if (editableCellsArray.includes(key)) {
|
|
1179
|
+
editable = true;
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
function lookupKey(mappings, name) {
|
|
1183
|
+
const keys = Object.keys(mappings);
|
|
1184
|
+
for (let i = 0; i < keys.length; i++) {
|
|
1185
|
+
const key = keys[i];
|
|
1186
|
+
if (mappings[key] === name) {
|
|
1187
|
+
return key;
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
function lookupValue(mappings, key) {
|
|
1192
|
+
if (key==''||key === undefined){
|
|
1193
|
+
return options.cselect_placeholder
|
|
1194
|
+
}
|
|
1195
|
+
return mappings[key];
|
|
1196
|
+
}
|
|
1197
|
+
if (options.cdynamic_select_editors.hasOwnProperty(key) || options.cstatic_select_editors.hasOwnProperty(key)) {
|
|
1198
|
+
editable = true;
|
|
1199
|
+
cellEditor = 'agSelectCellEditor';
|
|
1200
|
+
valueFormatter = (params) => {
|
|
1201
|
+
const selectedNode = params.api.getSelectedNodes()[0];
|
|
1202
|
+
const dynamicOptions = options.cdynamic_select_editors[key];
|
|
1203
|
+
const staticOptions = options.cstatic_select_editors[key];
|
|
1204
|
+
let selectOptions;
|
|
1205
|
+
if (dynamicOptions && params.data) {
|
|
1206
|
+
selectOptions = params.data[dynamicOptions.options_field];
|
|
1207
|
+
} else if (staticOptions) {
|
|
1208
|
+
if (!staticOptions.parsedOptions) {
|
|
1209
|
+
staticOptions.parsedOptions = JSON.parse(staticOptions.options);
|
|
1210
|
+
}
|
|
1211
|
+
selectOptions = staticOptions.parsedOptions;
|
|
1212
|
+
} else {
|
|
1213
|
+
selectOptions = selectedNode?.data[dynamicOptions.options_field];
|
|
1214
|
+
}
|
|
1215
|
+
return lookupValue(selectOptions, params.value);
|
|
1216
|
+
};
|
|
1217
|
+
valueParser = (params) => {
|
|
1218
|
+
return lookupKey(selectOptions, params.newValue);
|
|
1219
|
+
}
|
|
1220
|
+
cellEditorParams = (params) => {
|
|
1221
|
+
const editorOptions = options.cdynamic_select_editors[key] ?
|
|
1222
|
+
params.data[options.cdynamic_select_editors[key].options_field] :
|
|
1223
|
+
JSON.parse(options.cstatic_select_editors[key].options);
|
|
1224
|
+
return {
|
|
1225
|
+
values: Object.keys(editorOptions)
|
|
1226
|
+
};
|
|
1227
|
+
};
|
|
1228
|
+
}
|
|
1128
1229
|
return {
|
|
1129
1230
|
headerName: headerName,
|
|
1130
1231
|
field: key,
|
|
@@ -1134,6 +1235,7 @@ dmx.Component('ag-grid', {
|
|
|
1134
1235
|
minWidth: minWidth,
|
|
1135
1236
|
hide: hide,
|
|
1136
1237
|
type: type,
|
|
1238
|
+
editable: editable,
|
|
1137
1239
|
sortable: sortable,
|
|
1138
1240
|
filterValueGetter: filterValueGetter,
|
|
1139
1241
|
filterParams: filterParams,
|
|
@@ -1144,7 +1246,10 @@ dmx.Component('ag-grid', {
|
|
|
1144
1246
|
minWidth: parseInt(cwidths[key].min_width),
|
|
1145
1247
|
maxWidth: parseInt(cwidths[key].max_width),
|
|
1146
1248
|
}),
|
|
1147
|
-
cellRenderer: cellRenderer
|
|
1249
|
+
cellRenderer: cellRenderer,
|
|
1250
|
+
cellEditor: cellEditor,
|
|
1251
|
+
cellEditorParams: cellEditorParams,
|
|
1252
|
+
valueParser: valueParser
|
|
1148
1253
|
};
|
|
1149
1254
|
});
|
|
1150
1255
|
if (options.group_config && options.group_config.length > 0) {
|
|
@@ -1302,6 +1407,7 @@ dmx.Component('ag-grid', {
|
|
|
1302
1407
|
const gridOptions = {
|
|
1303
1408
|
...(idFieldPresent ? { getRowId: params => params.data.id } : {}),
|
|
1304
1409
|
columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
|
|
1410
|
+
getRowStyle: options.rstyles ? createRowStyleFunction(options.rstyles): undefined,
|
|
1305
1411
|
localeText: localeText,
|
|
1306
1412
|
enableRtl: options.enable_rtl,
|
|
1307
1413
|
onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
|