@cdmx/wappler_ag_grid 2.1.4 → 2.1.5
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/package.json +4 -2
- package/tests/01-basic-render.html +106 -0
- package/tests/02-themes-locale.html +98 -0
- package/tests/03-editing.html +119 -0
- package/tests/04-selection.html +103 -0
- package/tests/05-action-buttons.html +97 -0
- package/tests/06-export.html +80 -0
- package/tests/07-import.html +80 -0
- package/tests/08-formatting.html +91 -0
- package/tests/09-grouping.html +74 -0
- package/tests/10-state-persistence.html +84 -0
- package/tests/11-layout.html +72 -0
- package/tests/12-methods.html +93 -0
- package/tests/13-flags-styles.html +374 -0
- package/tests/14-compact-view.html +112 -0
- package/tests/README.md +146 -0
- package/tests/data/sample-data.js +52 -0
- package/tests/dmxAppConnect/dmxAppConnect.js +10 -0
- package/tests/dmxAppConnect/dmxAppConnect.js.map +1 -0
- package/tests/index.html +107 -0
- package/tests/lib/common-head.html +30 -0
- package/tests/lib/page-template.js +54 -0
- package/tests/lib/run-collector.js +32 -0
- package/tests/lib/test-helpers.js +145 -0
- package/tests/lib/test-suite.css +178 -0
- package/tests/run-all-puppeteer.cjs +180 -0
- package/tests/run-all.cjs +144 -0
- package/tests/serve.cjs +66 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>07 · Import · AG Grid Test Suite</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../node_modules/papaparse/papaparse.min.js" defer></script>
|
|
16
|
+
<script src="../node_modules/read-excel-file/bundle/read-excel-file.min.js" defer></script>
|
|
17
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
18
|
+
<script src="./data/sample-data.js" defer></script>
|
|
19
|
+
</head>
|
|
20
|
+
<body is="dmx-app" id="page07">
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
24
|
+
TestPage.header({
|
|
25
|
+
title: '07 · Import',
|
|
26
|
+
summary: 'Parse uploaded CSV/XLSX into fileData via importFileData(fileInputId).'
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<main class="test-main">
|
|
32
|
+
|
|
33
|
+
<section class="feature">
|
|
34
|
+
<h2>Import CSV / Excel</h2>
|
|
35
|
+
<p class="desc">
|
|
36
|
+
Pick a file (CSV via Papa, XLSX via read-excel-file) — its parsed rows land in
|
|
37
|
+
<code>importGrid.fileData</code>. The "load into grid" button below mirrors that array into the grid's data binding.
|
|
38
|
+
</p>
|
|
39
|
+
|
|
40
|
+
<dmx-test-data id="rows" dmx-bind:data="[]"></dmx-test-data>
|
|
41
|
+
|
|
42
|
+
<div class="controls">
|
|
43
|
+
<input type="file" id="csvFile" accept=".csv,.xlsx,.xls">
|
|
44
|
+
<button class="primary" onclick="TestKit.callMethod('importGrid','importFileData','csvFile')">importFileData('csvFile')</button>
|
|
45
|
+
<button onclick="copyFileDataToGrid()">load parsed rows into grid</button>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="grid-wrap">
|
|
49
|
+
<dmx-ag-grid id="importGrid" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" dmx-bind:pagination="true" dmx-bind:pagination_page_size="10"></dmx-ag-grid>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="kv">
|
|
53
|
+
<div class="k">parsed fileData length</div>
|
|
54
|
+
<div class="v" dmx-text="importGrid.fileData.length">0</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<details style="margin-top: 12px;">
|
|
58
|
+
<summary>Sample CSV (copy/paste into a .csv file to test)</summary>
|
|
59
|
+
<pre class="log" id="sample-csv"></pre>
|
|
60
|
+
</details>
|
|
61
|
+
</section>
|
|
62
|
+
</main>
|
|
63
|
+
|
|
64
|
+
<script>
|
|
65
|
+
document.getElementById('sample-csv').textContent =
|
|
66
|
+
'id,first_name,last_name,department,salary,active\n' +
|
|
67
|
+
'1,Imported,One,Engineering,50000,true\n' +
|
|
68
|
+
'2,Imported,Two,Sales,60000,false\n' +
|
|
69
|
+
'3,Imported,Three,Marketing,55000,true\n';
|
|
70
|
+
|
|
71
|
+
function copyFileDataToGrid() {
|
|
72
|
+
const c = TestKit.grid('importGrid');
|
|
73
|
+
const rowsHost = TestKit.grid('rows');
|
|
74
|
+
if (!c || !rowsHost) return;
|
|
75
|
+
const fd = c.get('fileData') || [];
|
|
76
|
+
rowsHost.set('value', fd);
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>08 · Formatting & Types · AG Grid Test Suite</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
16
|
+
<script src="./data/sample-data.js" defer></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body is="dmx-app" id="page08">
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
22
|
+
TestPage.header({
|
|
23
|
+
title: '08 · Formatting & Types',
|
|
24
|
+
summary: 'amount_fields with precision, date_format + timezone, numeric column align, custom column types.'
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<main class="test-main">
|
|
30
|
+
<dmx-test-data id="rows" source="employees"></dmx-test-data>
|
|
31
|
+
|
|
32
|
+
<section class="feature">
|
|
33
|
+
<h2>Amount + date formatting</h2>
|
|
34
|
+
<p class="desc">
|
|
35
|
+
<code>amount_fields="salary,rating"</code> with precision <code>2</code>, <code>date_format="dd/MM/yyyy"</code>
|
|
36
|
+
applied to <code>hire_date</code>. Numeric columns right-aligned.
|
|
37
|
+
</p>
|
|
38
|
+
|
|
39
|
+
<div class="grid-wrap">
|
|
40
|
+
<dmx-ag-grid
|
|
41
|
+
id="fmtGrid"
|
|
42
|
+
dmx-bind:data="rows.value"
|
|
43
|
+
grid_theme="ag-theme-alpine"
|
|
44
|
+
amount_fields="salary,rating"
|
|
45
|
+
dmx-bind:amount_field_precision="2"
|
|
46
|
+
date_format="dd/MM/yyyy"
|
|
47
|
+
date_locale="en-GB"
|
|
48
|
+
dmx-bind:numeric_column_align="true"
|
|
49
|
+
dmx-bind:pagination="false">
|
|
50
|
+
</dmx-ag-grid>
|
|
51
|
+
</div>
|
|
52
|
+
</section>
|
|
53
|
+
|
|
54
|
+
<section class="feature">
|
|
55
|
+
<h2>Custom column types (ctypes)</h2>
|
|
56
|
+
<p class="desc">Force <code>active</code> to render as boolean badge and <code>rating</code> as currency.</p>
|
|
57
|
+
|
|
58
|
+
<div class="grid-wrap">
|
|
59
|
+
<dmx-ag-grid
|
|
60
|
+
id="ctypeGrid"
|
|
61
|
+
dmx-bind:data="rows.value"
|
|
62
|
+
grid_theme="ag-theme-alpine"
|
|
63
|
+
dmx-bind:ctypes="[{field:'active', type:'boolean'},{field:'rating', type:'number'}]"
|
|
64
|
+
dmx-bind:cnames="{first_name:'First', last_name:'Last', hire_date:'Joined'}"
|
|
65
|
+
dmx-bind:cwidths='{"first_name":{"min_width":120,"max_width":160},"last_name":{"min_width":120,"max_width":160},"department":{"min_width":140,"max_width":200}}'
|
|
66
|
+
dmx-bind:pagination="false">
|
|
67
|
+
</dmx-ag-grid>
|
|
68
|
+
</div>
|
|
69
|
+
</section>
|
|
70
|
+
|
|
71
|
+
<section class="feature">
|
|
72
|
+
<h2>Header behaviour</h2>
|
|
73
|
+
<p class="desc">Wrap header text, auto header height, suppress movable columns, wrap cell text.</p>
|
|
74
|
+
<div class="grid-wrap">
|
|
75
|
+
<dmx-ag-grid
|
|
76
|
+
id="hdrGrid"
|
|
77
|
+
dmx-bind:data="rows.value"
|
|
78
|
+
grid_theme="ag-theme-alpine"
|
|
79
|
+
dmx-bind:wrap_header_text="true"
|
|
80
|
+
dmx-bind:auto_header_height="true"
|
|
81
|
+
dmx-bind:wrap_text="true"
|
|
82
|
+
dmx-bind:auto_height="true"
|
|
83
|
+
dmx-bind:suppress_movable_columns="true"
|
|
84
|
+
dmx-bind:header_height="60"
|
|
85
|
+
dmx-bind:pagination="false">
|
|
86
|
+
</dmx-ag-grid>
|
|
87
|
+
</div>
|
|
88
|
+
</section>
|
|
89
|
+
</main>
|
|
90
|
+
</body>
|
|
91
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>09 · Grouping & Aggregation</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
16
|
+
<script src="./data/sample-data.js" defer></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body is="dmx-app" id="page09">
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
22
|
+
TestPage.header({
|
|
23
|
+
title: '09 · Grouping & Aggregation',
|
|
24
|
+
summary: 'group_config groups columns; columns_to_sum / columns_to_count drive footer aggregates.'
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<main class="test-main">
|
|
30
|
+
<dmx-test-data id="emp" source="employees"></dmx-test-data>
|
|
31
|
+
<dmx-test-data id="ord" source="orders"></dmx-test-data>
|
|
32
|
+
|
|
33
|
+
<section class="feature">
|
|
34
|
+
<h2>Grouped column headers</h2>
|
|
35
|
+
<p class="desc">
|
|
36
|
+
<code>group_config</code> bundles <code>first_name</code>+<code>last_name</code> under "Name" and
|
|
37
|
+
<code>salary</code>+<code>rating</code> under "Compensation".
|
|
38
|
+
</p>
|
|
39
|
+
<div class="grid-wrap">
|
|
40
|
+
<dmx-ag-grid
|
|
41
|
+
id="grpGrid"
|
|
42
|
+
dmx-bind:data="emp.value"
|
|
43
|
+
grid_theme="ag-theme-alpine"
|
|
44
|
+
dmx-bind:group_config="[{headerName:'Name', children:['first_name','last_name']}, {headerName:'Compensation', children:['salary','rating']}]"
|
|
45
|
+
dmx-bind:pagination="false">
|
|
46
|
+
</dmx-ag-grid>
|
|
47
|
+
</div>
|
|
48
|
+
</section>
|
|
49
|
+
|
|
50
|
+
<section class="feature">
|
|
51
|
+
<h2>Footer sum + count (orders)</h2>
|
|
52
|
+
<p class="desc">
|
|
53
|
+
<code>columns_to_sum="qty,total"</code> with precision 2; <code>columns_to_count=["customer"]</code>.
|
|
54
|
+
The grid shows a footer-row aggregation.
|
|
55
|
+
</p>
|
|
56
|
+
<div class="grid-wrap">
|
|
57
|
+
<dmx-ag-grid
|
|
58
|
+
id="aggGrid"
|
|
59
|
+
dmx-bind:data="ord.value"
|
|
60
|
+
grid_theme="ag-theme-alpine"
|
|
61
|
+
amount_fields="unit_price,total"
|
|
62
|
+
dmx-bind:amount_field_precision="2"
|
|
63
|
+
columns_to_sum="qty,total"
|
|
64
|
+
dmx-bind:footer_sum_precision="2"
|
|
65
|
+
dmx-bind:columns_to_count='[{"field":"customer","unique_values":"Acme Corp,Globex,Initech,Umbrella,Stark Ind.,Wayne Ent."}]'
|
|
66
|
+
dmx-bind:columns_to_count_nonunique="false"
|
|
67
|
+
dmx-bind:numeric_column_align="true"
|
|
68
|
+
dmx-bind:pagination="false">
|
|
69
|
+
</dmx-ag-grid>
|
|
70
|
+
</div>
|
|
71
|
+
</section>
|
|
72
|
+
</main>
|
|
73
|
+
</body>
|
|
74
|
+
</html>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>10 · State Persistence</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
16
|
+
<script src="./data/sample-data.js" defer></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body is="dmx-app" id="page10">
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
22
|
+
TestPage.header({
|
|
23
|
+
title: '10 · State Persistence',
|
|
24
|
+
summary: 'Save/reset column state in localStorage, applied filter introspection, programmatic filters.'
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<main class="test-main">
|
|
30
|
+
<dmx-test-data id="rows" source="employees"></dmx-test-data>
|
|
31
|
+
|
|
32
|
+
<section class="feature">
|
|
33
|
+
<h2>Column + filter state</h2>
|
|
34
|
+
<p class="desc">
|
|
35
|
+
Reorder/hide a column, then click "saveColumnState" — the state lands in <code>localStorage</code>
|
|
36
|
+
under <code>dmxState-<column_state_storage_key></code>. Reload the page and the state restores.
|
|
37
|
+
</p>
|
|
38
|
+
|
|
39
|
+
<div class="grid-wrap">
|
|
40
|
+
<dmx-ag-grid
|
|
41
|
+
id="stateGrid"
|
|
42
|
+
dmx-bind:data="rows.value"
|
|
43
|
+
grid_theme="ag-theme-alpine"
|
|
44
|
+
column_state_storage_key="ag-grid-test-state"
|
|
45
|
+
dmx-bind:pagination="true"
|
|
46
|
+
dmx-bind:pagination_page_size="10">
|
|
47
|
+
</dmx-ag-grid>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="controls" style="margin-top: 12px;">
|
|
51
|
+
<button class="primary" onclick="TestKit.callMethod('stateGrid','saveColumnState')">saveColumnState()</button>
|
|
52
|
+
<button onclick="TestKit.callMethod('stateGrid','resetColumnState')">resetColumnState()</button>
|
|
53
|
+
<button onclick="TestKit.callMethod('stateGrid','getAppliedFilters')">getAppliedFilters()</button>
|
|
54
|
+
<button onclick="applyDeptFilter()">apply Engineering filter</button>
|
|
55
|
+
<button onclick="TestKit.callMethod('stateGrid','clearFilters')">clearFilters()</button>
|
|
56
|
+
<button onclick="dumpLocalStorage()">log localStorage key</button>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="kv">
|
|
60
|
+
<div class="k">filterState</div>
|
|
61
|
+
<div class="v" dmx-text="stateGrid.filterState">{}</div>
|
|
62
|
+
<div class="k">columnState (length)</div>
|
|
63
|
+
<div class="v" dmx-text="stateGrid.columnState.length">0</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="log" id="ls-log"></div>
|
|
67
|
+
</section>
|
|
68
|
+
</main>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
function applyDeptFilter() {
|
|
72
|
+
TestKit.callMethod('stateGrid', 'applyFilters', {
|
|
73
|
+
department: { type: 'equals', filter: 'Engineering' }
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function dumpLocalStorage() {
|
|
77
|
+
const key = 'dmxState-ag-grid-test-state';
|
|
78
|
+
const v = localStorage.getItem(key);
|
|
79
|
+
const box = document.getElementById('ls-log');
|
|
80
|
+
box.textContent = key + ' = ' + (v || '(empty)');
|
|
81
|
+
}
|
|
82
|
+
</script>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>11 · Layout & Scroll</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
16
|
+
<script src="./data/sample-data.js" defer></script>
|
|
17
|
+
<style>
|
|
18
|
+
.topbar { background: #1f2937; color: #fff; padding: 8px 16px; }
|
|
19
|
+
.footer { background: #1f2937; color: #fff; padding: 8px 16px; text-align: center; }
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body is="dmx-app" id="page11">
|
|
23
|
+
<div class="topbar">simulated fixed topbar (height ~36px)</div>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
27
|
+
TestPage.header({
|
|
28
|
+
title: '11 · Layout & Scroll',
|
|
29
|
+
summary: 'autoHeight vs normal, fixed_header offset, fixed_footer, horizontal scroll, hide_id_field.'
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<main class="test-main">
|
|
35
|
+
<dmx-test-data id="rows" source="employees"></dmx-test-data>
|
|
36
|
+
|
|
37
|
+
<section class="feature">
|
|
38
|
+
<h2>autoHeight + hide id</h2>
|
|
39
|
+
<div class="grid-wrap">
|
|
40
|
+
<dmx-ag-grid id="autoH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
|
|
41
|
+
dom_layout="autoHeight" dmx-bind:hide_id_field="true" dmx-bind:pagination="false"></dmx-ag-grid>
|
|
42
|
+
</div>
|
|
43
|
+
</section>
|
|
44
|
+
|
|
45
|
+
<section class="feature">
|
|
46
|
+
<h2>Normal layout + fixed_header offset</h2>
|
|
47
|
+
<div class="grid-wrap" style="height: 360px;">
|
|
48
|
+
<dmx-ag-grid id="fixedH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
|
|
49
|
+
dom_layout="normal"
|
|
50
|
+
dmx-bind:fixed_header="true"
|
|
51
|
+
topbar_class="topbar"
|
|
52
|
+
dmx-bind:fixed_header_offset="36"
|
|
53
|
+
dmx-bind:fixed_top_offset="0"
|
|
54
|
+
dmx-bind:pagination="false"></dmx-ag-grid>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section class="feature">
|
|
59
|
+
<h2>Horizontal scroll forced</h2>
|
|
60
|
+
<div class="grid-wrap">
|
|
61
|
+
<dmx-ag-grid id="scrollH" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine"
|
|
62
|
+
dmx-bind:fixed_horizontal_scroll="true"
|
|
63
|
+
dmx-bind:always_show_horizontal_scroll="true"
|
|
64
|
+
dmx-bind:min_width="220"
|
|
65
|
+
dmx-bind:pagination="false"></dmx-ag-grid>
|
|
66
|
+
</div>
|
|
67
|
+
</section>
|
|
68
|
+
</main>
|
|
69
|
+
|
|
70
|
+
<div class="footer">simulated fixed footer</div>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>12 · Component Methods</title>
|
|
6
|
+
<link rel="stylesheet" href="./lib/test-suite.css">
|
|
7
|
+
<link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
|
|
8
|
+
<link rel="stylesheet" href="../ag-theme-custom.css">
|
|
9
|
+
<link rel="stylesheet" href="../switch-toggle-slider.css">
|
|
10
|
+
<script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
|
|
11
|
+
<script src="./lib/version-banner.js" defer></script>
|
|
12
|
+
<script src="./lib/test-helpers.js" defer></script>
|
|
13
|
+
<script src="./lib/page-template.js" defer></script>
|
|
14
|
+
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
|
|
15
|
+
<script src="../dmx-ag-grid.js" defer></script>
|
|
16
|
+
<script src="./data/sample-data.js" defer></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body is="dmx-app" id="page12">
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
22
|
+
TestPage.header({
|
|
23
|
+
title: '12 · Component Methods',
|
|
24
|
+
summary: 'Every imperative method exposed in components.hjson, wired to a button so agents can fuzz them.'
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<main class="test-main">
|
|
30
|
+
<dmx-test-data id="rows" source="employees"></dmx-test-data>
|
|
31
|
+
|
|
32
|
+
<section class="feature">
|
|
33
|
+
<h2>Method playground</h2>
|
|
34
|
+
<p class="desc">Each button calls a documented method. Watch the binding row + console for effects.</p>
|
|
35
|
+
|
|
36
|
+
<div class="grid-wrap">
|
|
37
|
+
<dmx-ag-grid
|
|
38
|
+
id="m"
|
|
39
|
+
dmx-bind:data="rows.value"
|
|
40
|
+
grid_theme="ag-theme-alpine"
|
|
41
|
+
quick_filter_field="qf_input"
|
|
42
|
+
dmx-bind:pagination="true"
|
|
43
|
+
dmx-bind:pagination_page_size="10">
|
|
44
|
+
</dmx-ag-grid>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="controls" style="margin-top: 12px;">
|
|
48
|
+
<button class="primary" onclick="TestKit.callMethod('m','loadGrid')">loadGrid()</button>
|
|
49
|
+
<button onclick="TestKit.callMethod('m','reloadGrid', true)">reloadGrid(true)</button>
|
|
50
|
+
<button onclick="TestKit.callMethod('m','destroyGrid')">destroyGrid()</button>
|
|
51
|
+
<button onclick="TestKit.callMethod('m','pinColumns','first_name')">pinColumns('first_name')</button>
|
|
52
|
+
<button onclick="TestKit.callMethod('m','hideColumns','email')">hideColumns('email')</button>
|
|
53
|
+
<button onclick="TestKit.callMethod('m','getSelectedRows')">getSelectedRows()</button>
|
|
54
|
+
<button onclick="TestKit.callMethod('m','getAppliedFilters')">getAppliedFilters()</button>
|
|
55
|
+
<button onclick="TestKit.callMethod('m','getFilteredData')">getFilteredData()</button>
|
|
56
|
+
<button onclick="programmaticFilter()">applyFilters({department:'Sales'})</button>
|
|
57
|
+
<button onclick="TestKit.callMethod('m','clearFilters')">clearFilters()</button>
|
|
58
|
+
<button onclick="TestKit.callMethod('m','saveColumnState')">saveColumnState()</button>
|
|
59
|
+
<button onclick="TestKit.callMethod('m','resetColumnState')">resetColumnState()</button>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="controls">
|
|
63
|
+
<input type="text" id="qf_input" placeholder="quick filter text" oninput="TestKit.callMethod('m','quickFilter')">
|
|
64
|
+
<button onclick="dump()">log component state</button>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="kv">
|
|
68
|
+
<div class="k">count</div><div class="v" dmx-text="m.count">0</div>
|
|
69
|
+
<div class="k">selectedRows.length</div><div class="v" dmx-text="m.selectedRows.length">0</div>
|
|
70
|
+
<div class="k">filterState</div><div class="v" dmx-text="m.filterState">{}</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="log" id="cli-log"></div>
|
|
74
|
+
</section>
|
|
75
|
+
</main>
|
|
76
|
+
|
|
77
|
+
<script>
|
|
78
|
+
function programmaticFilter() {
|
|
79
|
+
TestKit.callMethod('m', 'applyFilters', {
|
|
80
|
+
department: { type: 'equals', filter: 'Sales' }
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function dump() {
|
|
84
|
+
const snap = TestKit.snapshot('m');
|
|
85
|
+
const box = document.getElementById('cli-log');
|
|
86
|
+
const e = document.createElement('div');
|
|
87
|
+
e.className = 'log-entry';
|
|
88
|
+
e.textContent = new Date().toISOString().slice(11,19) + ' → ' + JSON.stringify(snap);
|
|
89
|
+
box.insertBefore(e, box.firstChild);
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
</body>
|
|
93
|
+
</html>
|