Blazor Grid — How to Incorporate Drag-and-Drop Support (v22.1)

ASP.NET Team Blog
14 September 2022

In this blog post, I'll share a link to a GitHub example that demonstrates how to add drag-and-drop support when using the DevExpress Blazor Grid component. The sample project illustrates how to move rows within a single data grid (reorder rows) and move rows (records) between two data grids. 

Note: The GitHub example uses the following JQuery widgets: 

As you’ll recognize once you review the example, the project retains information on row attributes on the server (stores a row’s visible index and where a user drags a row). On the client side, JQuery widgets are initialized as needed. When a user drops a row, a request is sent to the server to reorganize data based on the drag and drop operation itself. 

If you are ready to incorporate drag and drop support in your Blazor project, please refer to the following repository for a sample application and associated source code: https://github.com/DevExpress-Examples/blazor-grid-drag-and-drop.

Your Feedback Matters

As usual, we are glad to have your feedback.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.