Enable Row Dragging with No Row Header in JavaScript

Background:

By default, FlexGrid only allows users to drag and reorder rows using the row header. When the headersVisibility property is set to Column, the row headers are hidden, and row dragging is no longer available. However, with some custom code, it is possible to implement row dragging from anywhere within the row—without relying on the row header.

Steps to Complete:

1. Enable dragging on all row cells using the formatItem event
2. Use FlexGrid's hitTest method to identify drag source and drop target
3. Reorder the underlying data collection based on the drop location
4. Refresh the grid to reflect the new order

Getting Started:

Enable dragging on all row cells using the formatItem event

Use the formatItem event to mark each cell in a data row as draggable. This ensures that users can initiate a drag from anywhere within the row.

this.flexGrid.formatItem.addHandler((s, e) => {
  if (e.panel === s.cells) {
    const row = s.rows[e.row];
    if (row instanceof wijmo.grid.Row) {
      e.cell.setAttribute('draggable', 'true');
    }
  }
});

Use hitTest to identify drag and drop behavior

Attach custom event listeners for dragstart, dragover, and drop to handle row movement. Use hitTest to determine which row the cursor is over during the drop.

this.flexGrid.hostElement.addEventListener('dragstart', (e) => {
  const ht = this.flexGrid.hitTest(e);
  this.draggedRowIndex = ht.row;
});

this.flexGrid.hostElement.addEventListener('dragover', (e) => {
  e.preventDefault();
});

this.flexGrid.hostElement.addEventListener('drop', (e) => {
  const ht = this.flexGrid.hitTest(e);
  const dropIndex = ht.row;
  if (this.draggedRowIndex !== dropIndex) {
    const item = this.items.splice(this.draggedRowIndex, 1)[0];
    this.items.splice(dropIndex, 0, item);
    this.flexGrid.collectionView.refresh();
  }
});

Reorder the underlying data collection

In the drop handler, modify the original data array to reflect the new row order. Then call .refresh() on the grid’s collection view to apply the changes visually.

You can also find a live sample of this project here on StackBlitz.

This approach fully enables row dragging without the need for visible row headers, giving users a more flexible interaction experience.

Hope you found this helpful. Happy coding!