JavaScript/jQuery Gantt - Sort Data
The Gantt component allows users to sort data.
Use the mode property to specify whether users can sort data by single or multiple columns.
To disable sorting for an individual column, set the column.allowSorting property to false. Note that this property is in effect if the mode property is not set to 'none'.
- $(function() {
- $("#gantt").dxGantt({
- sorting: {
- mode: 'multiple'
- }
- });
- });
User Interaction
Users can sort data by single and multiple columns.
In single mode, users click a column header to sort data by this column. Subsequent clicks on the same header reverse the sort order.
In multiple mode, users hold Shift and click column headers to sort data by multiple columns. Subsequent clicks on the same headers with the Shift key pressed reverse the columns' sort order.
Users can also use a column header’s context menu to specify the column’s sort settings and clear sorting.
To clear sorting for a column, users can hold Ctrl and click the column header.
Sort in Code
Use a column's sortOrder property to specify the sort order for column values. You can also specify the sortIndex property for this column to sort data by multiple columns. If the sortIndex property is not specified, each sorted column gets a sort index according to its position in the columns array. To show column sort indexes in the column headers, set the showSortIndexes property to true.
The following code sorts data by the "Start" and "End" columns:
- $(function() {
- $("#gantt").dxGantt({
- columns: [
- {"start", sortIndex: 0, sortOrder: "asc"},
- {"end", sortIndex: 1, sortOrder: "asc" }
- ],
- sorting: {
- mode: 'multiple'
- }
- });
- });
Use the ascendingText, descendingText, and the clearText options to specify text for corresponding context menu items.
- $(function() {
- $("#gantt").dxGantt({
- sorting: {
- ascendingText: "Ascending Order",
- descendingText: "Descending Order",
- clearText: "Clear Sort"
- }
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.