-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-132.html
83 lines (79 loc) · 4.63 KB
/
template-132.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
<h1 id="non-overlap-scrollbars">Non-overlap Scrollbars</h1>
<p>Normally, Grid's scrollbars are shown on top of its content. This behavior can result in scrollbars blocking the display and interaction of the content. You can work around this issue by adding extra content to allow space for the scrollbars. To do this set <code>contentRightPadding</code> and <code>contentBottomPadding</code> properties in the configuration, as shown in the example below.</p>
<h2 id="content-padding-example">Content padding example</h2>
<code-sandbox hash="c56d35db"><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: 20 });
var configObj = {
contentRightPadding: 14,
contentBottomPadding: 14,
autoHideScrollbar: false,
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: 300}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><p>This extra content may not be desirable though, as it can add to the amount of scroll distance and not actually reserve space for the scrollbars. Instead, you can change the parent of the scrollbars and reserve some space using CSS paddings. To change the parent of the scrollbars supply the parent element to the <code>scrollbarParent</code> property in the configuration object, as shown below.</p>
<blockquote>
<p>Note: <code>autoHideScrollbar</code> is turned off by default if <code>scrollbarParent</code> is supplied.</p>
</blockquote>
<h2 id="changing-the-scrollbar-parent-example">Changing the scrollbar parent example</h2>
<code-sandbox hash="b806eb56"><pre><code class="language-css">#grid_container {
height: 200px;
padding-right: 14px;
padding-bottom: 14px;
box-sizing: border-box;
}
efx-grid {
height: 100%;
}
</code></pre>
<pre><code class="language-html"><div id="grid_container">
<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.
---------------------------------------------------------------------------*/
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 20 });
var configObj = {
scrollbarParent: document.getElementById("grid_container"),
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: 300}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox>