-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-143.html
87 lines (85 loc) · 4.2 KB
/
template-143.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
<h1 id="multi-columnthree-state-sorting">Multi-column/three-state sorting</h1>
<p>Sorting can be done on several columns together. You need to add the <code>sorting</code> property with two sub-properties: <code>multiColumn</code> and <code>threeStateSorting</code>.</p>
<p>The property <code>threeStatesSorting</code> allows the column to be reset to the neutral state at every third click. Turning on <code>threeStatesSorting</code> makes multi-column sorting easier to use.</p>
<pre><code class="language-js">var config = {
// ... other config
sorting: {
sortableColumns: true,
multiColumn: true, // The value can also be a maximum number of sorted columns
threeStatesSorting: true
}
}
</code></pre>
<h2 id="sort-multiple-columns-at-the-initialization">Sort multiple columns at the initialization</h2>
<p>It is possible to set the initial sort with <code>multiColumn</code> enabled. We can use <code>initialSort</code> to define an array of <a href="#/apis/core/sortabletitleplugin#~InitialSort">SortableTitlePlugin.InitialSort</a>.</p>
<blockquote>
<p>If <code>multiColumn</code> is not enabled, the <code>initialSort</code> will only take the first object of an array into consideration.</p>
</blockquote>
<pre><code class="language-js">var config = {
// any other grid's options
sorting: {
sortableColumns: true,
multiColumn: true,
initialSort: [{
colIndex: 0,
sortOrder: "d"
}, {
colIndex: 1,
sortOrder: "d"
}]
}
}
</code></pre>
<h2 id="sort-multiple-columns-at-runtime">Sort multiple columns at runtime</h2>
<p>To change sorting states at runtime, use <code>sortColumns</code> from the built-in SortableTitlePlugin</p>
<pre><code class="language-js">var grid = document.getElementById("grid");
var sort = grid.api.getCoreGrid().getPlugin("SortableTitle");
sort.sortColumns([
{
colIndex: 0, // Column index 0 with order descending.
sortOrder: "d"
}, {
colIndex: 1, // Column index 1 with order descending
sortOrder: "d"
}
]);
</code></pre>
<p>For all available options and APIs, please visit <a href="#/apis/core/sortabletitleplugin">SortableTitlePlugin</a></p>
<h2 id="example">Example</h2>
<code-sandbox hash="51d8a41c"><pre><code class="language-css">efx-grid {
height: 300px;
}
</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", "group3", "boolean", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 15 });
var configObj = {
sorting: {
sortableColumns: true,
multiColumn: 3, // Maximum of 3 sorted columns at the same time
threeStatesSorting: true
},
columns: [
{name: "Company", field: fields[0]},
{name: "Market", field: fields[1], width: 80},
{name: "Group 1", field: fields[2], width: 80},
{name: "Group 2", field: fields[3], width: 80},
{name: "Last", field: fields[4], width: 80},
{name: "Net. Chng", field: fields[5], width: 80},
{name: "Industry", field: fields[6]}
],
staticDataRows: records
};
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><p><br><br><br></p>