-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-123.html
61 lines (57 loc) · 3.03 KB
/
template-123.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
<h1 id="adding-header-and-footer-sections">Adding Header and Footer Sections</h1>
<p>Additional header and footer sections can be added, and are automatically frozen. Both methods (header and footer) return the new section (with the row count of one), which can then be populated programmatically.</p>
<h2 id="example">Example</h2>
<code-sandbox hash="93d28d17"><pre><code class="language-css">html hr {
margin: 5px;
}
efx-grid {
height: 200px;
}
</code></pre>
<pre><code class="language-html"><button id="header_btn">Add Header Section</button>
<button id="footer_btn">Add Footer Section</button>
<hr>
<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 fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 6 });
var configObj = {
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
};
var grid = document.getElementById("grid");
grid.config = configObj;
document.getElementById("header_btn").addEventListener("click", function() {
var newSection = grid.api.addHeaderSection("My_Header");
if(newSection) { // New section can only be created, if the name of the section is unique
newSection.setCellColSpan(0, 0, 5);
var cell = newSection.getCell(0, 0);
cell.setContent("Header");
}
});
document.getElementById("footer_btn").addEventListener("click", function() {
var newSection = grid.api.addFooterSection("My_Footer");
if(newSection) { // New section can only be created, if the name of the section is unique
newSection.getCell(0, 0).setContent("Footer");
newSection.getCell(1, 0).setContent("100");
newSection.getCell(2, 0).setContent("200");
newSection.getCell(3, 0).setContent("300");
newSection.getCell(4, 0).setContent("400");
}
});
</code></pre>
</code-sandbox>