ResourceColumnReorder
Feature

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.

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;
            }
        }
    }
});

Useful configs and functions

Member	Description
resourceColumnDragStart	Fires when column drag starts
resourceColumnDrag	Fires during column drag
resourceColumnBeforeDropFinalize	Async finalizer before drop
resourceColumnDrop	Fires when column is dropped
resourceColumnDragAbort	Fires when drag is aborted

Configs

Configs are options you supply in a configuration object when creating an instance of this class

targetSelector : String.b-resource-header-cell

internal

A CSS selector used to determine which elements can initiate a drag operation.

Properties

Properties are getters/setters or publicly accessible variables on this class

isResourceColumnReorder : Booleantrue

READONLY

static

ADVANCED

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

isResourceColumnReorder : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

init( )

private

Initialize drag & drop (called on first paint)

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

resourceColumnBeforeDragStart

PREVENTABLE

ON-OWNER

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

Note that this event is triggered on the owning widget:
resourceColumnBeforeDropFinalize

ASYNC

PREVENTABLE

ON-OWNER

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

Note that this event is triggered on the owning widget:
resourceColumnDrag

ON-OWNER

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

Note that this event is triggered on the owning widget:
resourceColumnDragAbort

ON-OWNER

Fired when drag is aborted

Note that this event is triggered on the owning widget:
resourceColumnDragStart

ON-OWNER

Fired when dragging starts.

Note that this event is triggered on the owning widget:
resourceColumnDrop

ON-OWNER

Fired after drop

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onResourceColumnBeforeDragStart

PREVENTABLE

ON-OWNER

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

Note that this handler is called on the owning widget:
onResourceColumnBeforeDropFinalize

ASYNC

PREVENTABLE

ON-OWNER

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

Note that this handler is called on the owning widget:
onResourceColumnDrag

ON-OWNER

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

Note that this handler is called on the owning widget:
onResourceColumnDragAbort

ON-OWNER

Called when drag is aborted

Note that this handler is called on the owning widget:
onResourceColumnDragStart

ON-OWNER

Called when dragging starts.

Note that this handler is called on the owning widget:
onResourceColumnDrop

ON-OWNER

Called after drop

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-resource-column-reorder-box-shadow	Drag proxy box shadow
--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-indicator-size	Drop indicator size (width for vertical line)
--b-resource-column-reorder-proxy-opacity	Opacity of the drag proxy (column being dragged)

id: resourceColumnReorder

Source path

Scheduler/feature/ResourceColumnReorder.js

Demo

examples/vertical

ResourceColumnReorder
Feature

Basic usage

Validation

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

ResourceColumnReorder Feature

Basic usage

Validation

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

ResourceColumnReorder
Feature