ColumnReorder

Allows user to reorder columns by dragging headers. To get notified about column reorder listen to change event on columns store.

Column reorder

//<code-header>
fiddle.title = 'Column reorder';
//</code-header>
const grid = new Grid({
    appendTo : targetElement,

    tbar : [
        {
            type    : 'slidetoggle',
            label   : 'Stretched drag proxy',
            checked : true,
            onChange({ value }) {
                grid.features.columnReorder.stretchedDragProxy = value;
            }
        }
    ],

    // makes grid as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        // this feature is enabled by default,
        // so no need for this unless you have changed defaults
        columnReorder : {
            stretchedDragProxy : true
        }
    },

    data : DataGenerator.generateData(5),

    columns : [
        { field : 'firstName', text : 'First name', flex : 1 },
        { field : 'surName', text : 'Surname', flex : 1 },
        { type : 'date', field : 'start', text : 'Start', flex : 1 },
        { type : 'date', field : 'finish', text : 'Finish', flex : 1 }
    ]
});

This feature is enabled by default.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

stretchedDragProxy: BooleanAlso a property

Set to true to stretch the column drag proxy element to cover the full height of the grid.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isColumnReorder: Boolean= truereadonly

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

isColumnReorder: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

isReordering: Booleanreadonly

Returns true if a reorder operation is active

stretchedDragProxy: BooleanAlso a config

Set to true to stretch the column drag proxy element to cover the full height of the grid.

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

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

beforeColumnDragStart

This event is fired prior to starting a column drag gesture. The drag is canceled if a listener returns false.

// Adding a listener using the "on" method
columnReorder.on('beforeColumnDragStart', ({ source, column, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`event`	Event	The browser event.

beforeColumnDropFinalize

This event is fired when a column is dropped, and you can return false from a listener to abort the operation.

// Adding a listener using the "on" method
columnReorder.on('beforeColumnDropFinalize', ({ source, column, insertBefore, newParent, event, region }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted.
`newParent`	Column	The new parent column.
`event`	Event	The browser event.
`region`	String	The region where the column was dropped.

columnDrag

This event is fired when a column is being dragged, and you can set the valid flag on the context object to indicate whether the drop position is valid or not.

// Adding a listener using the "on" method
columnReorder.on('columnDrag', ({ source, column, insertBefore, event, context, context.valid }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted (if not last).
`event`	Event	The browser event.
`context`	Object
`context.valid`	Boolean	Set this to `true` or `false` to indicate whether the drop position is valid.

columnDragStart

This event is fired when a column drag gesture has started.

// Adding a listener using the "on" method
columnReorder.on('columnDragStart', ({ source, column, event }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`event`	Event	The browser event.

columnDrop

This event is always fired after a column is dropped. The valid param is true if the operation was not vetoed and the column was moved in the column store.

// Adding a listener using the "on" method
columnReorder.on('columnDrop', ({ source, column, insertBefore, newParent, valid, event, region }) => {

});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted.
`newParent`	Column	The new parent column.
`valid`	Boolean	`true` if the operation was not vetoed.
`event`	Event	The browser event.
`region`	String	The region where the column was dropped.

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeColumnDragStart

This event is called prior to starting a column drag gesture. The drag is canceled if a listener returns false.

new ColumnReorder({
    onBeforeColumnDragStart({ source, column, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`event`	Event	The browser event.

onBeforeColumnDropFinalize

This event is called when a column is dropped, and you can return false from a listener to abort the operation.

new ColumnReorder({
    onBeforeColumnDropFinalize({ source, column, insertBefore, newParent, event, region }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted.
`newParent`	Column	The new parent column.
`event`	Event	The browser event.
`region`	String	The region where the column was dropped.

onColumnDrag

This event is called when a column is being dragged, and you can set the valid flag on the context object to indicate whether the drop position is valid or not.

new ColumnReorder({
    onColumnDrag({ source, column, insertBefore, event, context }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted (if not last).
`event`	Event	The browser event.
`context`	Object
`context.valid`	Boolean	Set this to `true` or `false` to indicate whether the drop position is valid.

onColumnDragStart

This event is called when a column drag gesture has started.

new ColumnReorder({
    onColumnDragStart({ source, column, event }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`event`	Event	The browser event.

onColumnDrop

This event is always called after a column is dropped. The valid param is true if the operation was not vetoed and the column was moved in the column store.

new ColumnReorder({
    onColumnDrop({ source, column, insertBefore, newParent, valid, event, region }) {

    }
});

Parameter	Type	Description
`source`	Grid	The grid instance.
`column`	Column	The dragged column.
`insertBefore`	Column	The column before which the dragged column will be inserted.
`newParent`	Column	The new parent column.
`valid`	Boolean	`true` if the operation was not vetoed.
`event`	Event	The browser event.
`region`	String	The region where the column was dropped.

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-column-reorder-invalid-color`	Color used on the drag proxy to highlight invalid drop locations

ColumnReorder

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables