Docs Version 1

Dragging

ZingGrid has built-in dragging features to hide and reorder columns. To enable column dragging, simply add column-drag to the <zing-grid> tag.

Column Hide

To hide columns by dragging them off the grid, include [column-drag-action="hide"] in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="hide"></zing-grid>

Drag to Hide Columns Grid

Here is a complete grid with dragging to hide columns enabled:

Top

Column Reorder

To reorder columns by dragging them around the grid, include column-drag-action="reorder" in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="reorder"></zing-grid>

Drag to Reorder Columns Grid

Here is a complete grid with dragging to reorder columns enabled:

Top
## Column Hide and Reorder

To both hide and reorder columns by dragging them off the grid, include [column-drag-action="both"] in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="both"></zing-grid>

Drag to Hide and Reorder Columns Grid

Here is a complete grid with dragging to both hide and reorder columns enabled:

Top

Card Mode

Column hide and reorder also works in card mode. Dragging a card item (header and content) on one card applies the change to the rest of the cards.

Drag to Hide and Reorder in Card Mode

Here is a complete grid demonstrating column hide and reorder in card mode:

Top

Force Visibility

By default, the drag handles only appear when you hover over the column's header cell. To override this and make the handles always appear, add column-drag-persistent to <zing-grid>, like so:

<zing-grid ... column-drag column-drag-persistent>

For individual columns, add drag-persistent:

<zing-grid column-drag>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ...>
    <!-- Handle always shows -->
    <zg-column ... drag-persistent>
  </zg-colgroup>
</zing-grid>

Or to disable, set it to "disabled":

<zing-grid column-drag column-drag-persistent>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ... drag-persistent="disabled">
    <!-- Handle always shows -->
    <zg-column ...>
  </zg-colgroup>
</zing-grid>

Column Drag Handle Persistent

Here is a complete grid demonstrating setting the persistence of drag handles:

Top

[features: dragging]