DayPilot.Kanban.onColumnMove

The onColumnMove event handler fires when column moving is finished, after the column is dropped at the target position but before the column is actually moved. You can cancel the move at this stage.

Declaration

DayPilot.Kanban.onColumnMove(args)

Parameters

• args.column (object) - the column being moved

• args.position (number) - target position index

• args.previous (object) - column preceding the target position

• args.next (object) - column following the target position

• args.preventDefault() - cancels the default action

Notes

The source data object is accessible as args.column.data. Call args.preventDefault() to stop the default move action after the user drops the column.

Examples

JavaScript

const kanban = new DayPilot.Kanban("dp", {
  columnMoveHandling: "Update",
  onColumnMove: (args) => {
    if (!confirm("Do you really want to move this column?")) {
      args.preventDefault();
    }
  },
  // ...
});
kanban.init();

Angular

<daypilot-kanban [config]="config"></daypilot-kanban>

config: DayPilot.KanbanConfig = {
  columnMoveHandling: "Update",
  onColumnMove: (args) => {
    if (!confirm("Do you really want to move this column?")) {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotKanban
  columnMoveHandling="Update"
  onColumnMove={onColumnMove}
  {/* ... */}
/>

const onColumnMove = (args) => {
  if (!confirm("Do you really want to move this column?")) {
    args.preventDefault();
  }
};

Vue

<DayPilotKanban
  columnMoveHandling="Update"
  @columnMove="onColumnMove"
  <!-- ... -->
/>

const onColumnMove = (args) => {
  if (!confirm("Do you really want to move this column?")) {
    args.preventDefault();
  }
};

See Also

DayPilot.Kanban.columnMoveHandling

DayPilot.Kanban.onColumnMoved

DayPilot.Kanban Class