-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-125.html
87 lines (84 loc) · 4.1 KB
/
template-125.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<h1 id="row-grouping">Row Grouping</h1>
<blockquote>
<p><strong>Note:</strong> Built-in row grouping is deprecated in favor of the <a href="#/extensions/readme">Row Grouping Extension</a>. In terms of both functionalities and UIs, the extension provides more control and flexibility over the current APIs.</p>
</blockquote>
<p>Row grouping can be done by using the <a href="#/extensions/tr-grid-row-grouping">Row Grouping Extension</a>. To do the grouping, you will need to provide grouping criteria to the <code>groupBy</code> property of the <code>rowGrouping</code> option in the grid configuration object.</p>
<pre><code class="language-js">var configObj = {
...
rowGrouping: {
groupBy: ["field1", "criteria"],
},
...
}
</code></pre>
<h2 id="example">Example</h2>
<code-sandbox hash="193f7a04"><pre><code class="language-css">efx-grid {
height: 320px;
}
</code></pre>
<pre><code class="language-html"><big>Group By:</big>
<button id="g1_btn">Market</button>
<button id="g2_btn">Industry</button>
<button id="g23_btn">Market and Industry</button>
<button id="clear_btn">Reset Grouping</button>
<br><br>
<big>Expand:</big>
<button id="expand_btn">Expand All Groups</button>
<button id="collapse_btn">Collapse All Groups</button>
<br><br>
<efx-grid id="grid"></efx-grid>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
var rowGroupingExt = new RowGrouping();
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 100 });
var configObj = {
rowGrouping: {
groupBy: ["market", "industry"],
headerBinding: function(e) {
e.cell.setContent(e.groupId + " (" + e.dataSource.getAllRowIds().length + ")");
},
groupSortLogic: function(a, b) { // Optional
return (a < b ? -1 : ( a > b ? 1 : 0));
},
headerSpanning: true // Optional
},
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1], width: 100},
{name: "Last", field: fields[2], width: 80},
{name: "Net. Chng", field: fields[3], width: 80},
{name: "Industry", field: fields[4]}
],
staticDataRows: records,
extensions: [rowGroupingExt]
};
var grid = document.getElementById("grid");
grid.config = configObj;
g1_btn.addEventListener("click", function(e) {
rowGroupingExt.groupBy(fields[1]);
});
g2_btn.addEventListener("click", function(e) {
rowGroupingExt.groupBy(fields[4]);
});
g23_btn.addEventListener("click", function(e) {
rowGroupingExt.groupBy([fields[1], fields[4]]);
});
clear_btn.addEventListener("click", function(e) {
rowGroupingExt.groupBy(null);
});
expand_btn.addEventListener("click", function(e) {
rowGroupingExt.expandAll();
});
collapse_btn.addEventListener("click", function(e) {
rowGroupingExt.collapseAll();
});
</code></pre>
</code-sandbox>