-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-146.html
86 lines (83 loc) · 4.07 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
<h1 id="basic-sorting">Basic Sorting</h1>
<p>Grid support sorting out of the box. By default, sorting is turned off for all columns. To turn it on, set <code>sortableCoumns</code> to <code>true</code>. This allow users to click at the Grid header section to sort the clicked column.</p>
<pre><code class="language-js">var config = {
// any other grid's options
sorting: {
sortableColumns: true,
}
}
</code></pre>
<p>To turn the sorting on or off for a specific column, the <code>sortable</code> option is available in the column option.</p>
<pre><code class="language-js">var config = {
// any other grid's options
columns: [
{ name: "Column 1", field: "field1", sortable: true },
{ name: "Column 2", field: "field2" },
],
}
</code></pre>
<p>In some use cases, you may want to turn on sorting for a particular column based on another field. If so, you can set <code>sortBy</code> in the column option to any column field.</p>
<pre><code class="language-js">var config = {
// any other grid's options
sorting: {
sortableColumns: true,
},
columns: [
{ name: "Column 1", field: "field1" },
{ name: "Column 2", field: "field2", sortBy: "field1" },
],
}
</code></pre>
<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>
<h2 id="example">Example</h2>
<code-sandbox hash="c5a827a0"><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 = {
sorting: {
sortableColumns: true,
},
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>