ResourceColumnReorder

Allows user to reorder resource columns in vertical mode by dragging them. The feature fires various events during the drag operation (see events below). To get notified about the actual resource reorder, you can also listen to the change event on the scheduler ResourceStore.

This feature is disabled by default and only works when the scheduler is in vertical mode.

Resource column reorder

//<code-header>
fiddle.title = 'Resource column reorder';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    height : '22em',

    startDate : new Date(2022, 4, 1),
    endDate   : new Date(2022, 4, 7),
    mode      : 'vertical',

    resources : [
        { id : 1, name : 'Greta' },
        { id : 2, name : 'Ingrid' },
        { id : 3, name : 'John' },
        { id : 4, name : 'Kate' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2022-05-02', endDate : '2022-05-03' },
        { id : 2, resourceId : 2, name : 'Press meeting', startDate : '2022-05-03', endDate : '2022-05-04' },
        { id : 3, resourceId : 3, name : 'Audition', startDate : '2022-05-02', endDate : '2022-05-05' },
        { id : 4, resourceId : 4, name : 'Meeting', startDate : '2022-05-04', endDate : '2022-05-06' }
    ],

    features : {
        resourceColumnReorder : true
    }
});

Basic usage

const scheduler = new Scheduler({
    mode     : 'vertical',
    features : {
        resourceColumnReorder : true
    }
});

Validation

You can validate the drag drop flow by listening to the resourceColumnDrag event:

const scheduler = new Scheduler({
    mode     : 'vertical',
    features : {
        resourceColumnReorder : true
    },
    listeners : {
        resourceColumnDrag({ context }) {
            // Prevent dropping on certain resources
            if (context.insertBefore?.isSpecialResource) {
                context.valid = false;
            }
        }
    }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Other

catchEventHandlerExceptionsEvents

Properties

Common

disabledInstancePlugin

Class hierarchy

isResourceColumnReorder: Boolean= truereadonly

Identifies an object as an instance of ResourceColumnReorder class, or subclass thereof.

isResourceColumnReorder: Boolean= truereadonlystatic

Identifies an object as an instance of ResourceColumnReorder class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

resourceColumnBeforeDragStart

Fired before dragging starts, return false to prevent the drag operation.

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnBeforeDragStart', ({ source, context, context.resource, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent \| TouchEvent

resourceColumnBeforeDropFinalize

Fired before the drop is finalized. You can return false or a Promise that resolves to false to cancel the drop operation.

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnBeforeDropFinalize', ({ source, context, context.resource, context.insertBefore, context.targetGroup, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`context.insertBefore`	ResourceModel	The resource to insert before
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group
`event`	MouseEvent

resourceColumnDrag

Fired while the resource column is being dragged. You can signal that the drop position is valid or invalid by setting context.valid = false;

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnDrag', ({ source, context, context.valid, context.insertBefore, context.resource, context.targetGroup, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.valid`	Boolean	Set this to `true` or `false` to indicate whether the drop position is valid
`context.insertBefore`	ResourceModel	The resource to insert before (`null` if inserting at last position)
`context.resource`	ResourceModel	The dragged resource
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group
`event`	MouseEvent

resourceColumnDragAbort

Fired when drag is aborted

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnDragAbort', ({ source, context, context.resource, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent

resourceColumnDragStart

Fired when dragging starts.

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnDragStart', ({ source, context, context.resource, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent \| TouchEvent

resourceColumnDrop

Fired after drop

// Adding a listener using the "on" method
resourceColumnReorder.on('resourceColumnDrop', ({ source, context, context.resource, context.insertBefore, context.targetGroup, context.valid, event }) => {

});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`context.insertBefore`	ResourceModel	The resource that was inserted before
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group. The resource's group field has been updated if moved between groups.
`context.valid`	Boolean	`true` if the drop was valid, `false` otherwise
`event`	MouseEvent

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onResourceColumnBeforeDragStart

Called before dragging starts, return false to prevent the drag operation.

new ResourceColumnReorder({
    onResourceColumnBeforeDragStart({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent \| TouchEvent

onResourceColumnBeforeDropFinalize

Called before the drop is finalized. You can return false or a Promise that resolves to false to cancel the drop operation.

new ResourceColumnReorder({
    onResourceColumnBeforeDropFinalize({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`context.insertBefore`	ResourceModel	The resource to insert before
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group
`event`	MouseEvent

onResourceColumnDrag

Called while the resource column is being dragged. You can signal that the drop position is valid or invalid by setting context.valid = false;

new ResourceColumnReorder({
    onResourceColumnDrag({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.valid`	Boolean	Set this to `true` or `false` to indicate whether the drop position is valid
`context.insertBefore`	ResourceModel	The resource to insert before (`null` if inserting at last position)
`context.resource`	ResourceModel	The dragged resource
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group
`event`	MouseEvent

onResourceColumnDragAbort

Called when drag is aborted

new ResourceColumnReorder({
    onResourceColumnDragAbort({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent

onResourceColumnDragStart

Called when dragging starts.

new ResourceColumnReorder({
    onResourceColumnDragStart({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`event`	MouseEvent \| TouchEvent

onResourceColumnDrop

Called after drop

new ResourceColumnReorder({
    onResourceColumnDrop({ source, context, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler
`context`	Object
`context.resource`	ResourceModel	The dragged resource
`context.insertBefore`	ResourceModel	The resource that was inserted before
`context.targetGroup`	Model	When the resourceStore is grouped, the group header record of the target group. The resource's group field has been updated if moved between groups.
`context.valid`	Boolean	`true` if the drop was valid, `false` otherwise
`event`	MouseEvent

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-resource-column-reorder-indicator-size`	Drop indicator size (width for vertical line)
`--b-resource-column-reorder-indicator-color`	Drop indicator color
`--b-resource-column-reorder-indicator-invalid-color`	Drop indicator color when invalid
`--b-resource-column-reorder-box-shadow`	Drag proxy box shadow
`--b-resource-column-reorder-proxy-opacity`	Opacity of the drag proxy (column being dragged)

ResourceColumnReorder

Basic usage

Validation

Configs

Common

Misc

Other

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables