ColumnReorder
Feature

Allows user to reorder columns by dragging headers. Click and drag a column header to move it to a new position. Visual feedback shows the drop target while dragging. To get notified about column reorder, listen to the change event on the columns store.

This feature is enabled by default.

Configs

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

stretchedDragProxy : Boolean

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

Has a corresponding runtime stretchedDragProxy property.

Properties

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

isColumnReorder : Booleantrue

READONLY

static

ADVANCED

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

isReordering : Boolean

READONLY

Returns true if a reorder operation is active
stretchedDragProxy : Boolean

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

Has a corresponding stretchedDragProxy config.
isColumnReorder : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

init( )

private

Initialize drag & drop (called from render)
onDrop( )

private

Handle drop
onInternalPaint( )

private

Initializes this feature on grid paint.
onInvalidDrop( )

private

Handle invalid drop
renderContents( )

private

Updates DragHelper with updated headers when grid contents is rerendered

Events

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

beforeColumnDragStart

PREVENTABLE

ON-OWNER

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

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

PREVENTABLE

ON-OWNER

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

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

ON-OWNER

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.

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

ON-OWNER

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

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

PREVENTABLE

ON-OWNER

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.

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

onBeforeColumnDragStart

PREVENTABLE

ON-OWNER

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

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

PREVENTABLE

ON-OWNER

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

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

ON-OWNER

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.

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

ON-OWNER

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

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

PREVENTABLE

ON-OWNER

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.

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

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

id: columnReorder

Source path

Grid/feature/ColumnReorder.js

Demo

examples/columns

ColumnReorder
Feature

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

ColumnReorder Feature

See also

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins2

Contents

ColumnReorder
Feature