-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-130.html
126 lines (118 loc) · 7.58 KB
/
template-130.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<h1 id="horizontal-scrollbar">Horizontal Scrollbar</h1>
<p>By default, Grid behaves like a native div element that has CSS "display: block;". So, Grid has a default size of 100% of the parent width. </p>
<p>Grid's default column widths have no fixed size. The column size will be divided equally on the available space. And Grid columns will fit within the available space. So, Grid will never show a horizontal scrollbar by default, as the content (column) width does not exceed its container (grid element) width.</p>
<p>If you want to enable the horizontal scrollbar, two conditions must be met:</p>
<ol>
<li>All of the grid columns must have a fixed size.</li>
<li>The total column width must exceed the grid width.</li>
</ol>
<aside class="info"><p>Note: once Grid's horizontal scrollbar is shown, column virtualization will be activated as well.</p>
</aside><h2 id="sizing-column-example">Sizing column example</h2>
<code-sandbox hash="96e50f78"><pre><code class="language-html"><button id="reset_btn">Reset all column widths to default</button>
<button id="fixate_all_btn">Fixate all column widths</button>
<button id="fixate_first_btn">Fixate the first column</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.
---------------------------------------------------------------------------*/
let fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
let records = DataGenerator.generateRecords(fields, { numRows: 6 });
let configObj = {
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1]},
{name: "Last", field: fields[2]},
{name: "Net. Chng", field: fields[3]},
{name: "Industry", field: fields[4]}
],
staticDataRows: records
};
let grid = document.getElementById("grid");
grid.config = configObj;
document.getElementById("reset_btn").addEventListener("click", function(e) {
grid.api.getCoreGrid().setColumnWidths([1, 1, 1, 1, 1], true); // All columns will have equal width
});
document.getElementById("fixate_all_btn").addEventListener("click", function(e) {
grid.api.getCoreGrid().setColumnWidths([300, 150, 150, 150, 200], false); // Set all column widths to the specified size.
});
document.getElementById("fixate_first_btn").addEventListener("click", function(e) {
let core = grid.api.getCoreGrid();
core.setColumnWidth(0, 200); // Set the first column to have fixed width (200px);
core.setColumnWidths([null, 1, 1, 1, 3], true); // Set the last four columns to have no size
});
</code></pre>
</code-sandbox><h2 id="non-overlap-horizontal-scrollbar-example">Non-overlap horizontal scrollbar example</h2>
<p>The Grid horizontal scrollbar, by default, is shown on top of the grid. This is to avoid the content jittering when the layout is changed. However, in some cases, the horizontal scrollbar may hinder or prevent interaction with the content, especially for the bottommost row. Use the <code>contentBottomPadding</code> flag to reserve some space on the bottom to stop this from happening.</p>
<p><code>autoHideScrollbar</code> can also be used to stop automatic scrollbar hiding.</p>
<code-sandbox hash="c5aff1c5"><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.
---------------------------------------------------------------------------*/
let fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
let records = DataGenerator.generateRecords(fields, { numRows: 10 });
let configObj = {
autoHideScrollbar: false,
contentBottomPadding: 9,
columns: [
{name: "Company", field: fields[0], width: 300},
{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}
],
staticDataRows: records
};
let grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="column-virtualization">Column virtualization</h2>
<p>Displaying a lot columns can significantly impact overall performance of grid. You can turn on column virtualization by setting <code>columnVirtualization</code> to <code>true</code> on the grid configuration object. The option will remove columns that are outside of the scroll view and put them back once they are in the scroll view. Any feature that references column or cell elements may not work well, if <code>columnVirtualization</code> is turned on.</p>
<h3 id="displaying-50-columns-example">Displaying 50+ columns example</h3>
<code-sandbox hash="11910b82"><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.
---------------------------------------------------------------------------*/
let fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
for(let i = 1; i <= 50; ++i) {
fields.push("Column " + i);
}
let columns = fields.map(function(f) {
return {
field: f,
width: 100
};
});
columns[0].width = 150;
columns[0].leftPinned = true;
columns[4].width = 200;
let records = DataGenerator.generateRecords(fields, { numRows: 10 });
let configObj = {
columnVirtualization: true,
columns: columns,
staticDataRows: records
};
let grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><br>
<br>
<br>