Skip to main content

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:

  • 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 ids of dragged columns
    • target: string | number - the id of a potential target column
  • events: 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 event took two parameters - sourceId and targetId.
  • In v7.0, the parameters were replaced with new ones: data and e.
  • The event was added in v6.5