beforeColumnDrop

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: object, events: MouseEvent) => void | boolean;

Parameters:

The callback of the event is called with the following parameters:

• data: object - data object. It contains the following parameters:
  • start: string | number - the id of a column, from which the dragging process has started
  • source: array - an array with the ids of the dragged columns
  • target: string | number - the id of a potential target column
• event: MouseEvent - a native HTML event object

Returns:

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

Example

const grid = new dhx.Grid("grid", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }] },
        { width: 150, id: "population", header: [{ text: "Population" }] },
        { width: 150, id: "age", header: [{ text: "Med. Age" }], draggable: false },
        { width: 150, id: "density", header: [{ text: "Density (P/Km²)" }] },
    ],
    data: dataset,
    dragItem: "column",
});

grid.events.on("beforeColumnDrop", ({ target }) => target !== "population");

Change log:

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