-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-146.html
97 lines (91 loc) · 5.23 KB
/
template-146.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
<h1 id="basic-sorting">Basic Sorting</h1>
<p>Grid support sorting out of the box. Users can click at the top header section to trigger sorting on the clicked column. Clicking again will toggle sort order between ascending and descending order.</p>
<p>Sorting should work for all columns by default. To turn off sorting for specific column, you can set <code>sortable</code> option to <code>false</code> on the column configuration object.</p>
<h2 id="sorting-programmatically">Sorting programmatically</h2>
<p>Use <code>sortColumn</code> from Grid <code>api</code> instance to sort the specified column without user interaction. If the second parameter is not defined, Grid will cycle through column sorting sequence defined in its settings. </p>
<pre><code class="language-js">var grid = document.getElementById("grid");
grid.api.sortColumn(0, "a"); // Sort column index 0 in ascending order.
grid.api.sortColumn(1); // Sort column index 1 and cycle through its sorting sequence.
</code></pre>
<p>For all available sorting options and APIs, please visit <a href="#/apis/core/sortabletitleplugin">SortableTitlePlugin</a></p>
<code-sandbox hash="b3bbef35"><pre><code class="language-css">html hr {
margin: 5px;
}
efx-grid {
height: 200px;
}
</code></pre>
<pre><code class="language-html"><button id="sort_btn1">Sort Column 1</button>
<button id="sort_btn2">Sort Column 2</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.
---------------------------------------------------------------------------*/
document.getElementById("sort_btn1").addEventListener("click", function(e){
grid.api.sortColumn(0);
});
document.getElementById("sort_btn2").addEventListener("click", function(e){
grid.api.sortColumn(1);
});
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1], width: 120},
{name: "Last", field: fields[2], width: 100},
{name: "Net. Chng", field: fields[3], width: 100},
{name: "Industry", field: fields[4]}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><aside class="info"><p>In Grid, we use the following shorthands for specified the sort order</p>
<ul>
<li>"a" for ascending</li>
<li>"d" for descending</li>
<li>"n" for no sorting or none</li>
</ul>
</aside><h2 id="sorting-a-column-by-another-column-or-field">Sorting a column by another column or field</h2>
<p>In some use cases, you may want to sort a certain column based on another field. If so, you can set <code>sortBy</code> on the column configuration object to any field.</p>
<code-sandbox hash="48dcec57"><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_BID", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });
var configObj = {
columns: [
{name: "Company", field: fields[0]},
{name: "Market (sort by Bid)", field: fields[1], sortBy: "CF_BID", width: 150},
{name: "Bid", field: fields[2], width: 100},
{name: "Net. Chng", field: fields[3], width: 100},
{name: "Industry", field: fields[4]}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><br>
<br>
<br>