New to KendoReact? Start a free 30-day trial

Multiple Selection

The KendoReact SchedulerEditItem component supports multiple event selection, which allows for quick and easy dragging or resizing of multiple items all at once.

For future versions of the @progress/kendo-react-scheduler we aim to support editing of multiple events at once through form.

By default, the SchedulerEditItem enables selecting multiple items by holding the CTRL (COMMAND on MacOS) key. Dragging or resizing a single item while holding CTRL(COMMAND on MacOS) will edit all selected items at once.

Default behavior

The following example demonstrates the multiple selection and editing of the KendoReact SchedulerEditItem component.

SHORTCUTDESCRIPTION
CTRL (COMMAND on MacOS) + CLICKAdd or remove an item from the selection
CTRL (COMMAND on MacOS) + DRAGDrag all selected items
CTRL (COMMAND on MacOS) + RESIZEResize all selected items
Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Trigger

While the SchedulerEditItem aims to provide an intuitive default behavior, the multiple selection behavior can be customized according to application requirements.

The following example demonstrates how to change the default multiple toggle key from CTRL to SHIFT.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Implementation

Providing an entirely custom behavior for the multiple editing in the context of the SchedulerEditItem component can be achieved through returning one or many predefined actions for each specific user event.

For additional information and a list of all available actions can be found in the SchedulerEditItemAction.

The default behavior has those predefined actions in the defaultProps of the component. For example, here is the default internal behavior of the onClickAction callback:

SchedulerEditItem.defaultProps = {
    onClickAction: (event) => [
        { type: (event.syntheticEvent.metaKey || event.syntheticEvent.ctrlKey)
            ? ITEMS_SELECT_ACTION.add
            : ITEMS_SELECT_ACTION.select
        }],
}

If, however, the application requirements are different and selection should happen on doubleClick instead of on click, the following customization can be applied:

  • Disabled the default onClickAction by providing a null as a value;
  • Return the ITEMS_SELECT_ACTION type for the onDoubleClickAction;
<SchedulerEditItem 
    {...props}
    onClickAction={null}
    onDoubleClick={(event) => [
        { type: (event.syntheticEvent.metaKey || event.syntheticEvent.ctrlKey)
            ? ITEMS_SELECT_ACTION.add
            : ITEMS_SELECT_ACTION.select
        }]
    }
/>

Another requirement might be to entirely disable multiple-selection. To achieve this, simply remove the ITEMS_SELECT_ACTION.add from the returned actions:


<SchedulerEditItem 
    {...props}
    onClickAction={null}
    onDoubleClick={(event) => [
        { type: ITEMS_SELECT_ACTION.select }]
    }
/>

The following example demonstrates a custom behavior of the multiple-selection, where an item is selected on ENTER key-down. Then, multi-drag and multi-resize is always triggered, even without holding CTRL.

SHORTCUTDESCRIPTION
FOCUSAdditional focus style is applied
ENTERadd item to selection
DRAGdrag all selected items
RESIZEresize all selected items
ESCresets the selection
TABfocus the next item, without selecting it
TAB + SHIFTfocus the prev item, without selecting it
Example
View Source
Edit In Stackblitz  
Change Theme: