-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-144.html
146 lines (133 loc) · 5.98 KB
/
template-144.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
<h1 id="server-side-sorting">Server-side Sorting</h1>
<p>In manual sorting mode, clicking on the column title will change the sorting status, but no actual sorting is done on the grid data.</p>
<p>One use case is, if you want to do server-side sorting, you can use manual sorting mode in conjunction with the <code>columnSorted</code> event and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> method.</p>
<p>To turn manual sorting on, set <code>indicatorOnly</code> to <code>true</code>.</p>
<pre><code class="language-js">var config = {
// any other grid's options
sorting: {
sortableColumns: true,
indicatorOnly: true
}
}
</code></pre>
<p>You also need to listen to <code>columnSorted</code> event in order to trigger server-side sorting. The event can be listened from the shortcut in <code>sorting</code> config or through the built-in plugin.</p>
<pre><code class="language-js">function onColumnSorted (evtArg) {
var sortingStates = grid.api.getSortingStates();
var sortingState = sortingStates[0];
var sortOrder = sortingState.order;
// At this point, you may request sorted data from the server.
}
var config = {
// any other grid's options
sorting: {
columnSorted: onColumnSorted
}
};
// Alternatively you can listen to the event directly from the built-in plugin
grid.addEventListener("configured", function(e) {
var core = e.detail.api.getCoreGrid();
var plugin = core.getPlugin("SortableTitle");
// plugin.listen("columnSorted", onColumnSorted);
});
</code></pre>
<p>You can see all possible values for the sort order <a href="#/apis/core/sortabletitleplugin#~SortOrder">here</a>.</p>
<h2 id="example">Example</h2>
<code-sandbox hash="26fe547a"><pre><code class="language-css">html hr {
margin: 5px;
}
efx-grid {
height: 200px;
}
textarea {
width: 100%;
height: 50px;
margin-bottom: 30px;
}
</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>
<hr>
<textarea id="output_ta" placeholder="Click at the grid header to sort"></textarea>
</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); // Cycle through sorting sequence
});
document.getElementById("sort_btn2").addEventListener("click", function(e){
grid.api.sortColumn(1); // Cycle through sorting sequence
});
var fields = ["companyName", "market", "CF_LAST", "CF_NETCHNG", "industry"];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
sorting: {
sortableColumns: true,
indicatorOnly: true,
columnSorted: function(evtArg) {
var core = grid.api.getCoreGrid();
var plugin = core.getPlugin("SortableTitle");
var objs = plugin.getSortedColumns();
var obj = objs[0];
var field = grid.api.getColumnField(obj.colIndex);
var sortOrder = (obj.sortOrder === "a") ? "ascending" : "decending";
var ta = document.getElementById("output_ta");
ta.value = "Field " + field + " is sorted in " + sortOrder + " order\n" + ta.value;
// At this point, you may request sorted data from the server.
requestData(evtArg);
}
},
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
};
function mockCallbackData(resp) {
if (resp.success) {
console.log("Loading success, Data sorted");
grid.data = resp.data;
}
}
// Mock to request data
function requestData(obj) {
console.log("Loading data from server side");
// Mock data on server side
setTimeout(function () {
// Mock to query data from DB.
var resRecords = DataGenerator.generateRecords(fields, { numRows: 10 }); // NOTE: It's random data
var sortField = obj.sortedField;
var sortOrder = obj.sortOrder;
resRecords = resRecords.sort(sortFx.bind(null, sortOrder, sortField));
mockCallbackData({
success: true,
data: resRecords
});
}, 100);
}
function sortFx(sortOrder, sortField, rowA, rowB) {
return compareFunction(rowA, rowB, sortField, sortOrder);
}
function compareFunction(rowA, rowB, sortField, sortOrder) {
var valueA = rowA[sortField];
var valueB = rowB[sortField];
if (sortOrder === "a") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
}
}
var grid = document.getElementById("grid");
grid.config = configObj;
</code></pre>
</code-sandbox><p><br><br></p>