DxGrid.AllowDragRows Property

Specifies whether users can start the row drag operation.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool AllowDragRows { get; set; }

Property Value

Type	Default	Description
Boolean	false	true to allow users to start dragging rows; otherwise, false.

Remarks

When you activate the AllowDragRows option, the Grid component renders a drag handle for each data row:

The AllowedDropTarget property value specifies whether users can reorder rows or move them to other components. To update the data source, handle the target component’s ItemsDropped event.

Run Demo: Drag and Drop Rows - Reorder View Example: Implement Row Drag and Drop Functionality

The following example implements row reordering within a Grid:

<DxGrid @ref="Grid"
        Data="DataSource"
        AllowDragRows="true"
        ItemsDropped="Grid_ItemsDropped"
        CssClass="max-h-480">
    <Columns>
        <DxGridDataColumn FieldName="Name" Caption="Subject" MinWidth="220" />
        <DxGridDataColumn FieldName="Status" Caption="Status" Width="140px" MinWidth="140" />
        <DxGridDataColumn FieldName="CreatedDate" Caption="Created" Width="120px" MinWidth="120" />
        <DxGridDataColumn FieldName="FixedDate" Caption="Fixed" Width="120px" MinWidth="120" />
    </Columns>
</DxGrid>

@code {
    IGrid Grid;
    ObservableCollection<Issue> DataSource { get; set; }
    protected override async Task OnInitializedAsync() {
        DataSource = new ObservableCollection<Issue>(await IssuesDataService.GetIssuesAsync());
    }
    void Grid_ItemsDropped(GridItemsDroppedEventArgs evt) {
        var droppedItem = (Issue)evt.DroppedItems[0];
        DataSource.Remove(droppedItem);
        var targetItem = (Issue)evt.TargetItem;
        var index = targetItem != null
            ? DataSource.IndexOf(targetItem) + (evt.DropPosition == GridItemDropPosition.After ? 1 : 0)
            : DataSource.Count;
        DataSource.Insert(index, droppedItem);
    }
}

Implements

AllowDragRows