Row Sorting

The Scheduler allows for sorting rows using a specified row field. It displays built-in icons in the column headers, enabling users to change the sort order. Additionally, rows can be sorted using the Scheduler API.

Available since version 2019.4.4073.

Sort order icon in the column header

• The sort direction icon is displayed in the column header if the "sort" property is specified.

• Clicking an inactive icon sorts using the specified field in ascending order.

• Clicking an already active icons sorts using the specified field in descending order.

• The icons reflects the currently active field even if the direct API is used to specify the sort order.

API

• If no sort field is specified the original order of the resources array is preserved.

• Use DayPilot.Scheduler.rows.sort() method to sort rows using the specified field.

• Clear the sorting by calling rows.sort() without a parameter.

• The current sort parameters can be read using DayPilot.Scheduler.rows.sortParam.

• If the resource tree is enabled, only leaf nodes are sorted by default. You can switch to sorting parents only using rowSortingMode property.

Limitations

• Row sorting is only available for Tabular row header columns mode (see rowHeaderColumnsMode property).

• Only one level of sorting (single field) is supported at the moment.

Tutorials

• JavaScript Scheduler: Row Sorting Tutorial

• JavaScript Scheduler: Row Sorting Customization

Example

<div id="dp"></div>

<script type="text/javascript">

  var dp = new DayPilot.Scheduler("dp");

  // ...

  dp.rowHeaderColumnsMode = "Tabular";
  dp.rowHeaderColumns = [
    { text: 'Name', display: "name", sort: "name" },
    { text: 'Floor', display: "location", sort: "location"  },
    { text: 'Size', display: "size", sort: "size"  }
  ];

  dp.resources = [
    { id: "B", expanded: true, name: "Building B", children: [
        { id: "101", name: "Room 101", location: "Floor 1", size: "2 beds" },
        { id: "102", name: "Room 102", location: "Floor 1", size: "3 beds" },
        { id: "103", name: "Room 103", location: "Floor 1", size: "1 bed" },
        { id: "201", name: "Room 201", location: "Floor 2", size: "2 beds" },
      ]
    },
    { id: "A", expanded: true, name: "Building A", children: [
        { id: "301", name: "Room 301", location: "Floor 1", size: "2 beds" },
        { id: "302", name: "Room 302", location: "Floor 1", size: "3 beds" },
        { id: "303", name: "Room 303", location: "Floor 1", size: "1 bed" },
        { id: "401", name: "Room 401", location: "Floor 2", size: "2 beds" },
      ]
    },
  ];

  dp.init();

</script>