syidaxgrid
Home Pricing Settings

GRID FEATURE

Row dragging

Managed row dragging applies user-defined order to Grid data. Manual reordering can conflict with display order determined by sorting.

Markdown source Features

How it works and when to use it

Before dragging, check allowed data models and group/pivot states. Moving to another Grid additionally requires drop-target registration and transfer-result handling.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Provide a drag handle

Allow users to grab rows from the product column.

javascript
grid.rowDragManaged = true;
grid.columnDefs = grid.columnDefs.map(col => ({ ...col, rowDrag: col.field === 'product' }));
await grid.setSortModel([]);
await grid.setFilterModel(null);

Verify the result: Test manual ordering in an unsorted, unfiltered list. Header-moving handles and row-moving handles are different.

Example 2. Connect move results to saving

Handle rowMoved in your app to persist the updated order on the server.

javascript
grid.addEventListener('rowMoved', event => console.log(event.detail));
console.log(await grid.getDragSafetyReport());

Verify the result: Check eligibility before a move and the result afterward. A successful visual move is not automatically saved to the server.

Example 3. Distribute orders between two tables

To move orders from an unassigned table to an assignee's table, register the target drop area and inspect the rowsTransferred report.

javascript
console.log(await grid.getDropZones());
grid.addEventListener('rowsTransferred', event => console.log(event.detail));

Verify the result: Your app decides whether to allow copying or moving. Also verify behavior when both tables already contain the same ID.

Combining features and troubleshooting

Do not interpret dragging a filtered subset as reordering the entire source data set. Read getDragSafetyReport and rowDragCancel reasons to understand rejection.

Changing a parent in a hierarchy has more constraints than reordering a flat list. Inspect treeReparented and reparentRows results and avoid cycles.

Related reading