Enable Row Dragging with No Row Header in Angular

Background:

By default, the Wijmo FlexGrid only allows rows to be dragged using the row header, which disappears when headersVisibility is set to "Column", disabling row dragging. With a bit of custom code in Angular, we can restore row dragging by making every data cell draggable and handling drag/drop logic manually.

Steps to Complete:

1. Mark cells in every row as draggable using the formatItem event.
2. Attach dragstart, dragover, and drop handlers to the grid to track the dragged row and drop location.
3. Reorder the underlying data array based on where the row is dropped.
4. Refresh the grid’s collection view so the UI updates.

Getting Started:

Mark cells in every row as draggable using the formatItem event.

What this does: runs for every rendered cell, restricts logic to data cells only, and enables native HTML drag events on each row’s cells.

grid.formatItem.addHandler((s, e) => {
  if (e.panel === s.cells) {
    e.cell.setAttribute('draggable', 'true');
  }
});

Attach dragstart, dragover, and drop handlers to the grid to track the dragged row and drop location.

What this does: captures which row is being dragged, enables dropping, and determines where the row is released.

const host = grid.hostElement;
let draggedRowIndex: number;

host.addEventListener('dragstart', (e: DragEvent) => {
  const ht = grid.hitTest(e);
  draggedRowIndex = ht.row;
});

host.addEventListener('dragover', (e: DragEvent) => {
  e.preventDefault(); // required for drop to fire
});

host.addEventListener('drop', (e: DragEvent) => {
  const ht = grid.hitTest(e);
  const dropRowIndex = ht.row;
  reorderRows(draggedRowIndex, dropRowIndex);
  e.preventDefault();
});

Reorder the underlying data array based on where the row is dropped.

What this does: removes the dragged item from its original position, inserts it at the drop index, and keeps the same object reference.

function reorderRows(from: number, to: number) {
  if (from === to || from < 0 || to < 0) return;

  const item = items.splice(from, 1)[0];
  items.splice(to, 0, item);

  grid.collectionView.refresh();
}

Refresh the grid’s collection view so the UI updates.

What this does: forces FlexGrid to re-read itemsSource, and triggers a visual re-render.

grid.collectionView.refresh();

With this Angular setup, every cell in a FlexGrid row can be dragged to reorder rows even when no row header is shown. The drag/drop is handled with plain DOM events and Wijmo’s hitTest method to map mouse positions to grid rows.

Happy coding!