-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-141.html
278 lines (260 loc) · 11.4 KB
/
template-141.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<h1 id="custom-sort-logic">Custom Sort Logic</h1>
<h2 id="row-sorting-mode-default">Row sorting mode (default)</h2>
<p>You can specify custom sort logic by using <code>sortLogic</code> option on the column configuration object. The method for sort logic should take RowDefinition objects for the first two parameters and return number to inidicate the results of the comparison. The third parameter is sorting order which can be used to determine sorting direction. The below code snippet shows the method signature as well as various ways to retrieve data:</p>
<pre><code class="language-js">let myCustomSorting = function(rowDefA, rowDefB, order, contextObj) {
// You can access any data from any column within the row
let valA = rowDefA.getData(contextObj.field);
let valB = rowDefB.getData(contextObj.field);
let extraInfoA = rowDefA.getData("some other field");
let extraInfoB = rowDefB.getData("some other field");
let rowDataA = rowDefA.getRowData();
let rowDataB = rowDefB.getRowData();
// ...
return number;
};
let config = {
// any other grid's options
columns: [
{ name: "Column 1", field: "field1", sortLogic: myCustomSorting},
{ name: "Column 2", field: "field2" },
],
}
</code></pre>
<blockquote>
<ul>
<li>Returning negative value from the sort logic indicates that row A (the first parameter) is less than row B (the second parameter) and should be placed on top of row B.</li>
<li>Returning positive value from the sort logic indicates that row A is greater than row B and should be placed under row B.</li>
<li>Returning zero from the sort logic indicates that both row A and row B are equal and should stay in the same position.</li>
</ul>
</blockquote>
<h3 id="custom-sorting-based-on-multiple-columns-example">Custom sorting based on multiple columns example</h3>
<code-sandbox hash="371beed0"><pre><code class="language-css">efx-grid {
height: 300px;
}
</code></pre>
<pre><code class="language-html"><efx-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.
---------------------------------------------------------------------------*/
function byMultipleColumns(rowDefA, rowDefB, order, contextObj) {
let rowA = rowDefA.getRowData();
let rowB = rowDefB.getRowData();
let numA = rowA.x + rowA.y;
let numB = rowB.x + rowB.y;
return (numA - numB) * order;
}
let fields = ["id", "companyName", "market", "CF_LAST", "x", "y"];
let records = DataGenerator.generateRecords(fields, { seed: 0, numRows: 10 });
let extraColumns = [ // For illustrative purpose
{ x: 1, y: 1 },
{ x: 5, y: 2 },
{ x: 2, y: 3 },
{ x: 4, y: 2 },
{ x: 3, y: 3 },
{ x: 1, y: 4 },
{ x: 4, y: 3 },
{ x: 1, y: 2 },
{ x: 5, y: 1 },
{ x: 2, y: 2 }
];
records.forEach(function(record, idx) {
let info = extraColumns[idx];
record.x = info.x;
record.y = info.y;
});
let configObj = {
freezeColumn: 0,
columns: [
{name: "Id", field: fields[0], width: 80},
{name: "Market", field: fields[2], width: 150},
{name: "Last", field: fields[3], width: 120},
{name: "Custom Sorting (x + y)", field: fields[1], sortLogic: byMultipleColumns},
{field: fields[4], width: 80},
{field: fields[5], width: 80},
],
staticDataRows: records
};
let grid = document.getElementsByTagName("efx-grid")[0];
grid.config = configObj;
</code></pre>
</code-sandbox><h3 id="custom-sorting-for-complex-data-type-example">Custom sorting for complex data type example</h3>
<code-sandbox hash="e833d92d"><pre><code class="language-css">efx-grid {
height: 300px;
}
</code></pre>
<pre><code class="language-html"><efx-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.
---------------------------------------------------------------------------*/
function complexObjectSorter(rowDefA, rowDefB, order, contextObj) {
let objA = rowDefA.getData(contextObj.field);
let objB = rowDefB.getData(contextObj.field);
let numA = objA.x + objA.y;
let numB = objB.x + objB.y;
return (numA - numB) * order;
}
function bindComplexObject(e) {
let text = "";
try {
text = JSON.stringify(e.data)
} catch {};
e.cell.setContent(text);
}
// Initial data set
let records = [
{ col1: "A", num1: 40, complexObject: {x: 1, y: 1} },
{ col1: "B", num1: 22, complexObject: {x: 5, y: 2} },
{ col1: "C", num1: 55, complexObject: {x: 2, y: 3} },
{ col1: "D", num1: 11, complexObject: {x: 4, y: 2} },
{ col1: "E", num1: 33, complexObject: {x: 3, y: 3} },
{ col1: "F", num1: 66, complexObject: {x: 1, y: 4} },
{ col1: "G", num1: 44, complexObject: {x: 4, y: 3} },
{ col1: "H", num1: 22, complexObject: {x: 1, y: 2} },
{ col1: "I", num1: 11, complexObject: {x: 5, y: 1} },
{ col1: "J", num1: 10, complexObject: {x: 2, y: 2} }
];
let configObj = {
columns: [
{
name: "Column 1",
field: "col1",
width: 100
},
{
name: "Default Sorting",
field: "num1",
textAlign: "right"
},
{
name: "Complex Object",
field: "complexObject",
binding: bindComplexObject,
sortingLogic: complexObjectSorter
},
{
name: "Not Sortable",
field: "Some Field",
sortable: false,
width: 150
}
],
extensions: [],
staticDataRows: records
};
let grid = document.getElementsByTagName("efx-grid")[0];
grid.config = configObj;
</code></pre>
</code-sandbox><h2 id="value-sorting-mode">Value sorting mode</h2>
<p>In case you want to define simpler sort logic, you can set <code>rowSorting</code> option to <code>false</code> on the column configuration object. The sort logic will have values from the sorted column instead of RowDefinition object for the first two parameters. The method signature will be similar to that of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">Array.prototype.sort</a>. The method will also receive extra information about the column being sorted from the fourth parameter. </p>
<aside class="info"><p>Default <code>rowSorting</code> is <code>true</code>. Setting it to <code>false</code> will enable value sorting mode.</p>
</aside><p>The below code snippet shows basic configuration for this mode:</p>
<pre><code class="language-js">let myCustomSorting = function(valA, valB, order, contextObj) {
// contextObj provide more information about the column being sorted such as colIndex and field
// ...
return (valA - valB) * order;
};
let config = {
// any other grid's options
columns: [
{ field: "field1", rowSorting: false, sortLogic: myCustomSorting},
{ field: "field2" },
],
}
</code></pre>
<h3 id="custom-sorting-for-handling-invalid-value-example">Custom sorting for handling invalid value example</h3>
<code-sandbox hash="103d48a0"><pre><code class="language-css">efx-grid {
height: 300px;
}
</code></pre>
<pre><code class="language-html"><efx-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.
---------------------------------------------------------------------------*/
function sortTextAsNumber(valA, valB, order, contextObj) {
let numA = +valA; // Convert string to number
let numB = Number(valB); // Another way to convert string to number
if(numA !== numA) { // Fastest way to check for NaN value
if(isNaN(numB)) { // Traditional and slower way to check for NaN value
return 0;
} else {
return 1; // Put row A at the bottom
}
} else if(numB !== numB) {
return -1; // Put row B at the bottom
}
if(numA < numB) {
return -order;
}
if(numB < numA) {
return order;
}
return 0;
}
// Initial data set
let records = [
{ col1: "A", num1: 40, text: "100" },
{ col1: "B", num1: 22, text: "200" },
{ col1: "C", num1: 55, text: "-10" },
{ col1: "D", num1: 11, text: "Invalid value" },
{ col1: "E", num1: 33, text: "120" },
{ col1: "F", num1: 66, text: "-20" },
{ col1: "G", num1: 44, text: "N/A" },
{ col1: "H", num1: 22, text: "110" },
{ col1: "I", num1: 11, text: "240" },
{ col1: "J", num1: 10, text: "100" }
];
let configObj = {
sorting: {
threeStatesSorting: true // For illustrative purpose
},
columns: [
{
name: "Column 1",
field: "col1",
width: 100
},
{
name: "Default Sorting",
field: "num1",
textAlign: "right"
},
{
name: "Custom Sorting",
field: "text",
rowSorting: false,
sortingLogic: sortTextAsNumber
},
{
name: "Not Sortable",
field: "Some Field",
sortable: false,
width: 150
}
],
extensions: [],
staticDataRows: records
};
let grid = document.getElementsByTagName("efx-grid")[0];
grid.config = configObj;
</code></pre>
</code-sandbox><br>
<br>
<br>