Skip to main content

dropBehaviour

pro version only

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

Optional. Defines the behaviour of a dragged item in a Grid in the TreeGrid mode

note

The dropBehaviour property is available only in the TreeGrid mode with the enabled drag-n-drop functionality.

To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the dragItem property, to enable drag-n-drop between Grids in the TreeGrid mode, use the dragMode property.

dropBehaviour?: "child" | "sibling" | "complex";

Example

const grid = new dhx.Grid("treegrid_container", {
    type: "tree",
    columns: [
        { id: "name", header: [{ text: "Book Name" }], gravity: 1.5 },
        { id: "price", type: "string", header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }] },
        { id: "cover", type: "string", header: [{}, { text: "Cover" }] },
        { id: "ships", type: "string", header: [{ text: "Ships in" }] },
        { id: "inStock", type: "string", header: [{ text: "In stock" }] }
    ],
    dragItem: "both", // to activate the functionality for columns or rows separately, set the value to "column" or "row"
    dropBehaviour: "sibling" // enables one of the drop modes: "child" | "sibling" | "complex"
});

There are three modes of behaviour of a dragged item, depending on the value set for the dropBehaviour option in the configuration object of a grid in the TreeGrid mode:

  • "child" - a dragged item becomes a child of the item it is dragged to
  • "sibling" - a dragged item becomes a sibling of the item it is dragged to
  • "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting

Related sample: Grid (TreeGrid). Drop behaviour

Related article: Drop behaviour