Skip to main content

dragPanel

pro version only

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

Optional. Enables/disables the DragPanel module during the Grid initialization

Usage​

dragPanel?:
    | boolean
    | {
        css?: string;
        icon?: string;
        width?: number;
    };

Default value: false

note

The module is automatically enabled, if the row Drag-and-Drop functionality is active (e.g. via the dragItem: "row" or dragItem: "both" properties), and either the BlockSelection or Clipboard modules are enabled.

Example

const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    dragItem: "both", // enables row Drag-and-Drop
    blockSelection: true, // triggers the `DragPanel` activation, when `dragItem` is enabled
    // or
    dragPanel: true // enables the `DragPanel` module
});

The dragPanel property can be set in two ways:

  • as a boolean value it enables or disables the dragPanel module upon the component initialization
  • as an object it enables the module and allows defining additional configuration during initialization:
    • css - (string) specifies a custom CSS class for styling the drag panel
    • icon - (string) defines a custom icon for the drag handle
    • width - (number) sets the width of the drag panel in pixels

The following example demonstrates configuring the DragPanel module with custom styling and width:

<style>
    .custom-drag-panel {
        background-color: var(--dhx-color-primary);
        border: 1px solid var(--dhx-color-secondary);
    }
</style>

<script>
const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    dragPanel: {
        css: "custom-drag-panel",
        icon: "dxi dxi-drag",
        width: 40
    }
});
</script>

Related sample: Grid (TreeGrid). DragPanel. Initialization

Related articles:

Change log:

added in v9.2