-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-131.html
101 lines (93 loc) · 5.21 KB
/
template-131.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<h1 id="left-side-column-pinningfreezing">Left Side Column Pinning/Freezing</h1>
<p>Sometimes Grid can contain a large number of columns and when scrolled to the right, without the row header, users might lose track of what kind of data is in the row.
To solve this, you can freeze or pin columns on the left side to act like a row indicator. To do this, set the <code>leftPinned</code> property to true on the column configuration object for the column you want to be frozen/pinned.</p>
<p>Similarly, <code>rightPinned</code> property can be used to pin the columns on the right side. </p>
<h2 id="example">Example</h2>
<code-sandbox hash="2e171b68"><pre><code class="language-html"><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: 10 });
var configObj = {
columns: [
{name: " ", width: 24},
{name: "Company", field: fields[0], width: 250, leftPinned: true },
{name: "Market", field: fields[1], width: 150},
{name: "Last", field: fields[2], width: 150},
{name: "Net. Chng", field: fields[3], width: 150},
{name: "Industry", field: fields[4], width: 300}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><h1 id="pinning-column-at-runtime">Pinning column at runtime</h1>
<p>Pinning column at runtime can be done through <code>pinColumn</code> method from Grid's API. The pinned column will be move to the right most of frozen area. To unpin a column, call <code>unpinColumn</code>. The unpinned column will be moved to the left most of unfrozen area.</p>
<h2 id="example-1">Example</h2>
<code-sandbox hash="7adb326e"><pre><code class="language-css">html hr, button {
margin: 5px;
}
</code></pre>
<pre><code class="language-html"><fieldset id="pinning_set">
<legend>Pinning</legend>
</fieldset>
<fieldset id="unpinning_set">
<legend>Unpinning</legend>
</fieldset>
<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", "Column 6", "Column 7"];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var onClickPinning = function(e) {
var btn = e.currentTarget;
grid.api.pinColumn(btn.colIndex);
};
var onClickUnpinning = function(e) {
var btn = e.currentTarget;
grid.api.unpinColumn(btn.colIndex);
};
var len = fields.length;
for(var i = 0; i < 4; ++i) {
var btn = document.createElement("button");
btn.colIndex = i;
btn.addEventListener("click", onClickPinning);
btn.textContent = "Column " + (i + 1);
pinning_set.appendChild(btn);
btn = document.createElement("button");
btn.colIndex = i;
btn.addEventListener("click", onClickUnpinning);
btn.textContent = "Column " + (i + 1);
unpinning_set.appendChild(btn);
}
var configObj = {
columns: [
{name: "Company", field: fields[0], width: 250},
{name: "Market", field: fields[1], width: 150},
{name: "Last", field: fields[2], width: 150},
{name: "Net. Chng", field: fields[3], width: 150},
{name: "Industry", field: fields[4], width: 200},
{field: fields[5], width: 150},
{field: fields[6], width: 150}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><p><br><br><br></p>