Skip to main content


Pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

fires before the user has finished dragging and released the mouse button over a target column

beforeColumnDrop: (data: IDragInfo, events: MouseEvent) => void | boolean;


  • data: object - data object
  • events: MouseEvent - a native HTML event object


Return false to block the default action; otherwise, true.

Example"beforeColumnDrop", function(data, events){
// your logic here
return false;

Related sample: Grid. Columns drag'n'drop

The data object contains the following parameters:

start(string, number) the id of a column, from which the dragging process has started
source(array) an array with ids of dragged columns
target(string, number) the id of a potential target column

Change log:

  • added in v6.5
  • Before v7.0, the event took two parameters - sourceId and targetId.
  • In v7.0, the parameters were replaced with new ones: data and e.