Column reorder
GridControlDrag a header sideways and drop it where the column should go.
Overview
AllowColumnReorder is on by default: every header is draggable, and while a header is being dragged the grid shows a
vertical pipe at the position where the column would land. Drop to the left half of a header to land before it, to the right
half to land after it. ColumnReorderPipeColor takes any CSS colour for the pipe; the default is a dark grey. After a drop the grid raises
OnLayoutChanged with a GridSettings snapshot whose ColumnOrder lists the fields in their new
order, which is what a host saves to restore a user's layout later.
Examples
#Move columns by dragging headers
Drag Priority in front of Model, or Owner to the right of Cost. Only the dragged column moves; sorting, filtering and the search box keep working on the new order.
| Model | Community | Phase | Task | Owner | Priority | Hours | Cost | Last Updated |
|---|---|---|---|---|---|---|---|---|
| A100 | North Ridge | Frame | Rough carpentry review | Alex Nguyen | High | 6.5 | $845.50 | 1/8/2026 |
| A100 | North Ridge | Electrical | Panel schedule update | Sana Patel | High | 4.0 | $620.00 | 1/9/2026 |
| A200 | Maple Hills | Plumbing | Fixture coordination | Marcus Lee | Medium | 3.0 | $410.25 | 1/10/2026 |
| B150 | Oak View | Drywall | Shear wall punch list | Diana Ortiz | Low | 2.5 | $275.00 | 1/11/2026 |
| C300 | Willow Park | Paint | Color board approval | Jonah Kim | Medium | 1.5 | $190.00 | 1/12/2026 |
| C300 | Willow Park | Final | QC closeout walk | Aisha Brown | High | 5.0 | $700.00 | 1/13/2026 |
| D410 | River Bend | Concrete | Slab tolerance check | Noah Garcia | Medium | 3.5 | $535.75 | 1/14/2026 |
| D410 | River Bend | Roof | Flashing detail review | Priya Menon | Low | 2.0 | $260.00 | 1/15/2026 |
| E520 | Cedar Grove | HVAC | Duct reroute approval | Ethan Walker | High | 4.5 | $655.40 | 1/16/2026 |
| E520 | Cedar Grove | Trim | Cabinet filler alignment | Mina Hassan | Medium | 2.0 | $285.30 | 1/17/2026 |
| F610 | Stone Creek | Landscape | Irrigation valve map | Luca Romano | Low | 1.0 | $140.00 | 1/18/2026 |
| F610 | Stone Creek | Final | Warranty turnover packet | Grace Mitchell | Medium | 2.8 | $360.00 | 1/19/2026 |
Drop a header to see the new order here.
Documentation
GridControl parameters for reordering and layout
| Parameter | Type | Default | Description |
|---|---|---|---|
AllowColumnReorder | bool | true | Lets a header be dragged onto another header. When off, headers stay draggable only for grouping (with AllowGrouping on) and a drop on a header does nothing. |
ColumnReorderPipeColor | string | "#2b2b2b" | Colour of the vertical pipe that marks where the column will land; any CSS colour, written to the grid's --fx-grid-reorder-pipe-color variable. Blank falls back to the default. |
OnLayoutChanged | EventCallback<GridSettings> | — | Fires after a layout change the grid can persist: a header drop, the end of a column or row resize, fit-to-grid and auto-fit, a group added or removed, the header menu's rename, lock and hide commands, a column shown or hidden from the options panel, and OK in the Choose Columns dialog. The argument is a GridSettings snapshot of the whole layout, not just the part that changed; save it to restore the layout later. |
PersistenceKey | string? | null | Opt-in persistence. When set and an IGridSettingsStore is registered in DI, the grid loads the saved snapshot once it has its columns and saves a new one at every change that raises OnLayoutChanged. |
GridSettings
| Property | Type | Default | Description |
|---|---|---|---|
ColumnOrder | List<string>? | null | Fields in display order. Fields missing from the list go to the end. |
Visibility | Dictionary<string, bool>? | null | Per-field visibility; overrides the column's Visible parameter. |
Widths | Dictionary<string, double>? | null | Per-field pixel width from the user's last resize. |
FrozenPositions | Dictionary<string, FrozenColumnPosition?>? | null | Per-field lock: Left or Right pins the column, a null value leaves it scrollable. A null dictionary keeps the markup's layout (settings written by older builds). |
HeaderOverrides | Dictionary<string, string>? | null | Per-field header text from the header menu's rename command. |
GroupColumns | List<string>? | null | Fields grouped on, in the order they were dropped on the grouping bar. |
IGridSettingsStore
| Method | Inputs | Returns | Description |
|---|---|---|---|
LoadAsync() | string key | Task<GridSettings?> | Returns the saved snapshot for the key, or null when nothing has been saved. |
SaveAsync() | string key | Task | Overwrites whatever was saved under the key. |
The host registers one IGridSettingsStore, scoped or singleton; with none registered the grid does not persist. There is no
public method that returns or applies a GridSettings on its own; GetState() and SetStateAsync()
round-trip the wider GridState, which includes the column layout, and EndUpdateAsync or
SuspendRedraw take a final column order (see Column sets). Besides dragging, the
header menu's Choose Columns dialog moves a column with its Move Up and Move Down buttons. There is no per-column switch, so a host
that must keep one column in place has to turn AllowColumnReorder off.