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:

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