You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/grid/usage.md
+72-14Lines changed: 72 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -273,7 +273,7 @@ You can filter grid data by the specified criteria with the help of the `filter(
273
273
</tr>
274
274
<tr>
275
275
<td><b>config</b></td>
276
-
<td>(<i>object</i>) optional, an object with the following properties:<ul><li><b>id</b> (<i>string</i>) - optional, the id of the filter</li><li><b>add</b> (<i>boolean</i>) defines whether each next filtering will be applied to the already filtered data (<i>true</i>), or to the initial data (<i>false</i>, default)</li><li><b>permanent</b> (<i>boolean</i>) - optional, <i>true</i> to make the current filter permanent. It will be applied even if the next filtering doesn't have the <b>add:true</b> property in its configuration object. Such a filter can be removed just with the resetFilter() method</li></ul></td>
276
+
<td>(<i>object</i>) optional, an object with the following properties:<ul><li><b>id</b> - (<i>string</i>) optional, the id of the filter</li><li><b>add</b> - (<i>boolean</i>) defines whether each next filtering will be applied to the already filtered data (<i>true</i>), or to the initial data (<i>false</i>, default)</li><li><b>permanent</b> - (<i>boolean</i>) optional, <i>true</i> to make the current filter permanent. It will be applied even if the next filtering doesn't have the <b>add:true</b> property in its configuration object. Such a filter can be removed just with the resetFilter() method</li></ul></td>
277
277
</tr>
278
278
</tbody>
279
279
</table>
@@ -314,7 +314,7 @@ It is possible to sort data in the grid via the `sort()` method of [DataCollecti
314
314
<tbody>
315
315
<tr>
316
316
<td><b>rule</b></td>
317
-
<td>(<i>object</i>) an object with parameters for sorting. It can take the following attributes:<ul><li><b>by</b> (<i>string | number</i>) the id of a column</li><li><b>dir</b> (<i>string</i>) the direction of sorting "asc" or "desc"</li><li><b>as</b> (<i>function</i>) a function that specifies the type to sort data as</li><li><b>rule</b> (<i>function</i>) optional, a sorting rule; the function must have two parameters and return a number (-1,0,1)</li></ul></td>
317
+
<td>(<i>object</i>) an object with parameters for sorting. It can take the following attributes:<ul><li><b>by</b> - (<i>string | number</i>) the id of a column</li><li><b>dir</b> - (<i>string</i>) the direction of sorting "asc" or "desc"</li><li><b>as</b> - (<i>function</i>) a function that specifies the type to sort data as</li><li><b>rule</b> - (<i>function</i>) optional, a sorting rule; the function must have two parameters and return a number (-1,0,1)</li></ul></td>
318
318
</tr>
319
319
<tr>
320
320
<td><b>config</b></td>
@@ -324,7 +324,7 @@ It is possible to sort data in the grid via the `sort()` method of [DataCollecti
The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
346
+
:::
347
+
348
+
You can sort Grid by multiple columns simultaneously. The multi-sorting ability is enabled by default. If you need to disable it, set the [`multiSort`](grid/api/grid_multisort_config.md) Grid property to *false*.
349
+
350
+
~~~jsx
351
+
constgrid=newdhx.Grid("grid_container", {
352
+
columns: [
353
+
// columns config
354
+
],
355
+
multiSort:false,
356
+
data: dataset
357
+
});
358
+
~~~
359
+
360
+
**Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi)
361
+
362
+
It is also possible to apply multi-sorting to [the grouped data](grid/usage.md#grouping-data). Check the example below:
363
+
364
+
~~~jsx
365
+
constgrid=newdhx.Grid("grid_container", {
366
+
columns: [
367
+
// columns config
368
+
],
369
+
editable:true,
370
+
group: {
371
+
order: ["animal_type"] // group by the `animal_type` field
372
+
},
373
+
groupable:true, // enables grouping functionality, false by default
**Related sample**: [Grid. Grouping with sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/786zr190)
383
+
342
384
#### Custom sorting
343
385
344
-
You can also specify the **rule** attribute in a passed object instead of the default ones and set a custom function for sorting. For example:
386
+
You can also specify the `rule` attribute in a passed object instead of the default ones and set a custom function for sorting. For example:
345
387
346
-
~~~js
388
+
~~~jsx
347
389
grid.data.sort({
348
390
rule: (a, b) =>a.id>b.id?1: (a.id<b.id?-1:0)
349
391
});
350
392
~~~
351
393
352
394
#### Getting the sorting state
353
395
354
-
To get the current state of sorting data in Grid, use the [`getSortingStates()`](data_collection/api/datacollection_getsortingstates_method.md) method of DataCollection. The method returns an object with the following properties:
355
-
356
-
-`by` - (*string|number*) the id of a data field (a column of Grid) to sort by
357
-
-`dir` - (*"asc"|"desc"*) the direction of sorting: "asc" or "desc"
358
-
-`as` - (*function*) a custom function of converting values before comparing
359
-
-`rule` - (*function*) a custom sorting function
360
-
-`smartSorting` - (*boolean*) (if can be applied) specifies whether a sorting rule should be applied each time after changing the data set
396
+
To get the current state of sorting data in Grid, use the [`getSortingStates()`](data_collection/api/datacollection_getsortingstates_method.md) method of DataCollection. The method allows getting the result of sorting data by multiple columns and returns an array of objects with the following properties:
361
397
362
-
The method allows getting the result of sorting data by multiple columns.
398
+
<table>
399
+
<tbody>
400
+
<tr>
401
+
<td><b>by</b></td>
402
+
<td>(<i>string | number</i>) the id of a data field (a column of Grid) to sort by</td>
403
+
</tr>
404
+
<tr>
405
+
<td><b>dir</b></td>
406
+
<td>(<i>string</i>) the direction of sorting: "asc" or "desc"</td>
407
+
</tr>
408
+
<tr>
409
+
<td><b>as</b></td>
410
+
<td>(<i>function</i>) a custom function of converting values before comparing</td>
411
+
</tr>
412
+
<tr>
413
+
<td><b>rule</b></td>
414
+
<td>(<i>function</i>) a custom sorting function</td>
415
+
</tr>
416
+
<tr>
417
+
<td><b>smartSorting</b></td>
418
+
<td>(<i>boolean</i>) (if applied) specifies whether a sorting rule should be applied each time after changing the data set</td>
Copy file name to clipboardExpand all lines: docs/migration.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ description: You can explore how to migrate to newer versions in the documentati
11
11
12
12
### Grid
13
13
14
-
The `getSortingState()` method of Grid has been deprecated and replaced with the `getSortingStates()` method of [DataCollection](/data_collection/) and [TreeCollection](/tree_collection/):
14
+
The `getSortingState()` method of Grid has been deprecated and replaced with the `getSortingStates()` method of [DataCollection](/data_collection/) and [TreeCollection](/tree_collection/), which allows getting the result of sorting data by multiple columns.
0 commit comments