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'.

View Demo

index.js
  • $(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.

DevExtreme Gantt - Sorting

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.

DevExtreme Gantt - Sorting

Users can also use a column header’s context menu to specify the column’s sort settings and clear sorting.

DevExtreme Gantt - 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:

index.js
  • $(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.

index.js
  • $(function() {
  • $("#gantt").dxGantt({
  • sorting: {
  • ascendingText: "Ascending Order",
  • descendingText: "Descending Order",
  • clearText: "Clear Sort"
  • }
  • });
  • });