Skip to main content

beforeColumnDrag

Pro version only

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

fires before dragging of a column has started

beforeColumnDrag: (data: object, event: 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 prevent dragging a column; 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("beforeColumnDrag", ({ start }) => start !== "density");

Change log:

  • Before v7.0, the callback of the event took one parameter - the column id
  • Starting from v7.0, the callback of the event takes two parameters: data and event
  • The event was added in v6.5