javascript-html5-scheduler-row-sorting.png

The Scheduler allows sorting the rows using a specified row field. It shows built-in icons in the column headers that allow users changing the sort order. You can also sort the rows using the Scheduler API.

Available since version 2019.4.4073.

Sort order icon in the column header

javascript-html5-scheduler-row-sorting-header-icon.png

  • 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

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

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>