-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-136.html
157 lines (149 loc) · 8.67 KB
/
template-136.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<h1 id="vertical-scrollbar">Vertical Scrollbar</h1>
<p>By default, Grid behaves like a native div element that has CSS "display: block;". This means Grid's height will be expanded as the number of its rows is increasing. In other words, it has a dynamic height equal to its content height. So Grid will never show a vertical scrollbar by default, as the content height does not exceed its container (grid element) height.</p>
<p>If you want to enable the vertical scrollbar, two conditions must be met:</p>
<ol>
<li>Grid must have some specific height (for example, 200px, 50%, or 100%).</li>
<li>Grid content height must exceed the height specified in #1. </li>
</ol>
<blockquote>
<p>Note: once Grid's vertical scrollbar is shown, Grid's row virtualization will also be activated. Not all elements will be created or rendered. The same cells will be shared across multiple rows.</p>
<p>Also, if the containers or Grid styles have been changed by JavaScript, you need to notify Grid about the change in order to update the layout. Use <code>getCoreGrid().updateLayout()</code> to force updating the layout.</p>
</blockquote>
<h2 id="fixed-height-grid-example">Fixed height grid example</h2>
<p>The below example shows how Grid's height affects vertical scrollbar's visibility:</p>
<code-sandbox hash="3b1b4589"><pre><code class="language-html"><button id="reset_btn">Reset height to default</button>
<button id="set_200_btn">Set height to 200px</button>
<button id="set_600_btn">Set height to 600px</button>
<br><br>
<efx-grid id="grid" style="height: 200px"></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: 15 });
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("reset_btn").addEventListener("click", function(e) {
grid.style.height = "";
grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed
});
document.getElementById("set_200_btn").addEventListener("click", function(e) {
grid.style.height = "200px";
grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed
});
document.getElementById("set_600_btn").addEventListener("click", function(e) {
grid.style.height = "600px";
grid.api.getCoreGrid().updateLayout(); // Notify grid that some CSS have been changed
});
</code></pre>
</code-sandbox><h2 id="making-grid-fill-available-space-example">Making Grid fill available space example</h2>
<p><code>flex</code> can be used to define Grid's height. By doing it this way, Grid's height will be changed when the window or its container size is changed. </p>
<aside class="info"><p>Once Grid's height is defined, it will no longer have the same size as its content. This means it will not be shrunken when its rows are removed.</p>
</aside><code-sandbox hash="447788f6"><pre><code class="language-css">body {
height: 500px; /* For illustrative purpose */
padding: 4px;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: column;
height: 100%;
}
html hr {
margin: 5px;
}
efx-grid {
flex: 1;
min-height: 0;
max-height: none;
outline: 1px solid blue; /* For illustrative purpose */
}
</code></pre>
<pre><code class="language-html"><div class="flex-container" style="height: 100%">
<div>
<button id="remove_btn">Remove top 5 rows</button>
</div>
<hr>
<efx-grid id="grid"></efx-grid>
</div>
</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.
---------------------------------------------------------------------------*/
remove_btn.addEventListener("click", function(e) {
grid.api.removeRows([0, 1, 2, 3, 4]);
});
var fields = ["id", "companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 22 });
var configObj = {
columns: [
{ name: "Id", field: fields[0], width: 40, alignment: "center" },
{ name: "Company", field: fields[1] },
{ name: "Market", field: fields[2], width: 120 },
{ name: "Last", field: fields[3], width: 100 },
{ name: "Net. Chng", field: fields[4], width: 100 },
{ name: "Industry", field: fields[5] }
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="non-overlap-vertical-scrollbar-example">Non-overlap vertical scrollbar example</h2>
<p>The Grid vertical scrollbar, by default, is shown on top of the grid. This is to avoid jittering the content when the layout is changed. However, in some cases, the vertical scrollbar may hinder or prevent interaction with the content, especially for the rightmost column. Use the <code>contentRightPadding</code> flag to reserve some space on the right to prevent this from happening.</p>
<p><code>autoHideScrollbar</code> could also be used to stop automatic scrollbar hiding.</p>
<code-sandbox hash="aede16d2"><pre><code class="language-css">efx-grid {
height: 200px;
}
</code></pre>
<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: 15 });
var configObj = {
autoHideScrollbar: false,
contentRightPadding: 14,
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;
</code></pre>
</code-sandbox><br>
<br>
<br>