The DevExpress Blazor Grid supports drag-and-drop operations.
Use the following API members to activate this feature for your Grids:
- AllowDragRows - Specifies whether users can start row drag-and-drop operations.
- AllowedDropTarget - Specifies allowed drag-and-drop targets.
When a user drops rows, the ItemsDropped event fires. In its handler, update the data source: insert rows at the drop position and remove them from the initial position, if required.
Reorder Rows in a Grid
If you want to let users reorder rows, set the AllowDragRows property to true. You can test this usage scenario on the Reorder page.
Drag Rows Between Components
To let users drag rows between components, do the following:
- Set the AllowDragRows property to
true. - Set the AllowedDropTarget to
External. You can useAllif you also want to allow row reordering.
The DropTargetMode property specifies drop position indication style:
- A specific location defined by the TargetItem and DropPosition properties.
- The entire data area. You need to implement custom insertion logic (for example, if your data is sorted or grouped) in the ItemsDropped event handler.
You can test this usage scenario on the Between page.
Files to Look At
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
GridDragAndDrop/Pages/Between.razor
Razor@page "/between"
<h1>Drag & Drop Between Components</h1>
<br />
<div style="display: flex">
<div style="width: 500px">
<h2>First Grid</h2>
<DxGrid Data="FirstGridItems"
AllowDragRows="true"
AllowedDropTarget="GridAllowedDropTarget.External"
ItemsDropped="FirstGrid_ItemsDropped"
AllowSort="false">
<Columns>
<DxGridDataColumn FieldName="Name" />
</Columns>
</DxGrid>
</div>
<div style="width: 500px; padding-left: 10px">
<h2>Second Grid</h2>
<DxGrid Data="SecondGridItems"
AllowDragRows="true"
AllowedDropTarget="GridAllowedDropTarget.External"
DropTargetMode="GridDropTargetMode.Component"
ItemsDropped="SecondGrid_ItemsDropped"
AllowSort="false">
<Columns>
<DxGridDataColumn FieldName="Name" />
</Columns>
</DxGrid>
</div>
</div>
@code {
ObservableCollection<GridDataItem> FirstGridItems { get; set; }
ObservableCollection<GridDataItem> SecondGridItems { get; set; }
public record GridDataItem(string Name);
protected override void OnInitialized() {
FirstGridItems = new ObservableCollection<GridDataItem>(
new List<GridDataItem>() {
new GridDataItem("Beverages"),
new GridDataItem("Seafood"),
new GridDataItem("Grains"),
new GridDataItem("Confections"),
new GridDataItem("Dairy Products")
}
);
SecondGridItems = new ObservableCollection<GridDataItem>(
new List<GridDataItem>() {
new GridDataItem("Cereals"),
new GridDataItem("Meat"),
new GridDataItem("Poultry"),
new GridDataItem("Produce"),
new GridDataItem("Frozen Entrees")
}
);
}
async Task FirstGrid_ItemsDropped(GridItemsDroppedEventArgs args) {
var droppedItem = (GridDataItem)args.DroppedItems[0];
SecondGridItems.Remove(droppedItem);
var index = await args.GetTargetDataSourceIndexAsync();
FirstGridItems.Insert(index, droppedItem);
}
void SecondGrid_ItemsDropped(GridItemsDroppedEventArgs args) {
var droppedItem = (GridDataItem)args.DroppedItems[0];
FirstGridItems.Remove(droppedItem);
SecondGridItems.Insert(SecondGridItems.Count, droppedItem);
}
}
GridDragAndDrop/Pages/Reorder.razor
Razor@page "/reorder"
<h1>Reorder Rows in a Grid</h1>
<br />
<div style="width: 500px">
<DxGrid Data="Items"
AllowDragRows="true"
ItemsDropped="Grid_ItemsDropped">
<Columns>
<DxGridDataColumn FieldName="Name" />
</Columns>
</DxGrid>
</div>
@code {
ObservableCollection<GridDataItem> Items { get; set; }
public record GridDataItem(string Name);
protected override void OnInitialized() {
Items = new ObservableCollection<GridDataItem>(
new List<GridDataItem>() {
new GridDataItem("Beverages"),
new GridDataItem("Seafood"),
new GridDataItem("Grains"),
new GridDataItem("Confections"),
new GridDataItem("Dairy Products"),
new GridDataItem("Cereals"),
new GridDataItem("Meat"),
new GridDataItem("Poultry"),
new GridDataItem("Produce"),
new GridDataItem("Frozen Entrees")
}
);
}
async Task Grid_ItemsDropped(GridItemsDroppedEventArgs args) {
var droppedItem = (GridDataItem)args.DroppedItems[0];
Items.Remove(droppedItem);
var index = await args.GetTargetDataSourceIndexAsync();
Items.Insert(index, droppedItem);
}
}