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.

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.

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:

Copy CodeSchedulerEditItem.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;

Copy Code<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:

Copy Code
<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.

Suggested Links

• API Reference of the SchedulerEditItem
• All available SchedulerEditItem actions
• KendoReact Scheduler