javascript scheduler row selecting

Users can select one or more rows if row selecting is enabled:

  • Enable row selecting by setting either rowClickHandling or rowDoubleClickHandling to "Select".
  • Individual rows can be selected using Ctrl + click.
  • A range of rows can be selected using Shift + click.

You can also modify the row selection programmatically.

Ctrl + Click

You can add rows to the selection using Ctrl + click.

Ctrl + click on a selected row will remove it from the selection.

Shift + Click

Use Shift + click to select a range of rows. 

  1. The start of the range is the row that was clicked last (without Shift). If nothing was clicked yet, it uses the first row as the start.
  2. It fires onRowSelect and onRowSelected events (JavaScript). The last clicked row will be passed as args.row. The newly selected range is only available in onRowSelected and you can read it using rows.selection.get().

CSS

The selected rows are highlighted using CSS:

  • *_rowheader_selected class will be added to the row header cells (scheduler_default_rowheader_selected class for the default theme)
  • *_cell_selected class will be added to all grid cells that belong to the selected row (scheduler_default_cell_selected for the default theme)

JavaScript

Detecting a selection change:

dp.rowClickHandling = "Select";
dp.onRowSelected = function(args) {
  var msg = "This row was " + (args.selected ? "" : "de") + "selected: " + args.row.name;
  dp.message(msg);
};

Getting current selection:

var array = dp.rows.selection.get();

Selecting a row using JavaScript:

var row = dp.rows.find("A");
dp.rows.selection.add(row);

Setting rows to be selected during Scheduler initialization:

var dp = new DayPilot.Scheduler("dp");
dp.selectedRows = ["A", "B"];
// ...
dp.init();

Clearing the row selection:

dp.rows.selection.clear();

API

Demo

Tutorial

Angular

Tutorial

ASP.NET WebForms

.aspx

<DayPilot:DayPilotScheduler 
  ...  
  RowSelectHandling="CallBack"
  RowClickHandling="Select" 
  OnRowSelect="DayPilotScheduler1_OnRowSelect"
  ...
  />

.aspx.cs

protected void DayPilotScheduler1_OnRowSelect(object sender, RowSelectEventArgs e)
{
  DayPilotScheduler1.UpdateWithMessage("Number of selected rows: " + DayPilotScheduler1.SelectedRows.Count);
  DayPilotScheduler1.Update(CallBackUpdateType.None);
}

Demo

ASP.NET MVC

Demo