Blazor DataGrid Example - Drag and Drop within Grid
Drag a column header here to group its column
Order ID Press Enter to sort | Customer ID Press Enter to sort. Press Ctrl space to group | Order Date Press Enter to sort. Press Ctrl space to group | Freight Press Enter to sort. Press Ctrl space to group | Shipped Date Press Enter to sort. Press Ctrl space to group | Ship Country Press Enter to sort. Press Ctrl space to group |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 7/16/1996 | Denmark | |
| 10002 | ANATR | 4/4/1990 | $3.30 | 9/11/1996 | Brazil | |
| 10003 | ANTON | 11/30/1957 | $4.30 | 10/7/1996 | Germany | |
| 10004 | BLONP | 10/22/1930 | $5.30 | 12/30/1996 | Austria | |
| 10005 | BOLID | 2/18/1953 | $6.30 | 12/3/1997 | Switzerland | |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 7/16/1996 | Denmark | |
| 10007 | ANATR | 4/4/1990 | $6.60 | 9/11/1996 | Brazil | |
| 10008 | ANTON | 11/30/1957 | $8.60 | 10/7/1996 | Germany | |
| 10009 | BLONP | 10/22/1930 | $10.60 | 12/30/1996 | Austria | |
| 10010 | BOLID | 2/18/1953 | $12.60 | 12/3/1997 | Switzerland | |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 7/16/1996 | Denmark | |
| 10012 | ANATR | 4/4/1990 | $9.90 | 9/11/1996 | Brazil | |
| 10013 | ANTON | 11/30/1957 | $12.90 | 10/7/1996 | Germany | |
| 10014 | BLONP | 10/22/1930 | $15.90 | 12/30/1996 | Austria | |
| 10015 | BOLID | 2/18/1953 | $18.90 | 12/3/1997 | Switzerland | |
| 10016 | ALFKI | 5/15/1991 | $9.20 | 7/16/1996 | Denmark | |
| 10017 | ANATR | 4/4/1990 | $13.20 | 9/11/1996 | Brazil | |
| 10018 | ANTON | 11/30/1957 | $17.20 | 10/7/1996 | Germany | |
| 10019 | BLONP | 10/22/1930 | $21.20 | 12/30/1996 | Austria | |
| 10020 | BOLID | 2/18/1953 | $25.20 | 12/3/1997 | Switzerland | |
| 10021 | ALFKI | 5/15/1991 | $11.50 | 7/16/1996 | Denmark | |
| 10022 | ANATR | 4/4/1990 | $16.50 | 9/11/1996 | Brazil | |
| 10023 | ANTON | 11/30/1957 | $21.50 | 10/7/1996 | Germany | |
| 10024 | BLONP | 10/22/1930 | $26.50 | 12/30/1996 | Austria | |
| 10025 | BOLID | 2/18/1953 | $31.50 | 12/3/1997 | Switzerland | |
| 10026 | ALFKI | 5/15/1991 | $13.80 | 7/16/1996 | Denmark | |
| 10027 | ANATR | 4/4/1990 | $19.80 | 9/11/1996 | Brazil | |
| 10028 | ANTON | 11/30/1957 | $25.80 | 10/7/1996 | Germany | |
| 10029 | BLONP | 10/22/1930 | $31.80 | 12/30/1996 | Austria | |
| 10030 | BOLID | 2/18/1953 | $37.80 | 12/3/1997 | Switzerland | |
| 10031 | ALFKI | 5/15/1991 | $16.10 | 7/16/1996 | Denmark | |
| 10032 | ANATR | 4/4/1990 | $23.10 | 9/11/1996 | Brazil | |
| 10033 | ANTON | 11/30/1957 | $30.10 | 10/7/1996 | Germany | |
| 10034 | BLONP | 10/22/1930 | $37.10 | 12/30/1996 | Austria | |
| 10035 | BOLID | 2/18/1953 | $44.10 | 12/3/1997 | Switzerland | |
| 10036 | ALFKI | 5/15/1991 | $18.40 | 7/16/1996 | Denmark | |
| 10037 | ANATR | 4/4/1990 | $26.40 | 9/11/1996 | Brazil | |
| 10038 | ANTON | 11/30/1957 | $34.40 | 10/7/1996 | Germany | |
| 10039 | BLONP | 10/22/1930 | $42.40 | 12/30/1996 | Austria | |
| 10040 | BOLID | 2/18/1953 | $50.40 | 12/3/1997 | Switzerland | |
| 10041 | ALFKI | 5/15/1991 | $20.70 | 7/16/1996 | Denmark | |
| 10042 | ANATR | 4/4/1990 | $29.70 | 9/11/1996 | Brazil | |
| 10043 | ANTON | 11/30/1957 | $38.70 | 10/7/1996 | Germany | |
| 10044 | BLONP | 10/22/1930 | $47.70 | 12/30/1996 | Austria | |
| 10045 | BOLID | 2/18/1953 | $56.70 | 12/3/1997 | Switzerland | |
| 10046 | ALFKI | 5/15/1991 | $23.00 | 7/16/1996 | Denmark | |
| 10047 | ANATR | 4/4/1990 | $33.00 | 9/11/1996 | Brazil | |
| 10048 | ANTON | 11/30/1957 | $43.00 | 10/7/1996 | Germany | |
| 10049 | BLONP | 10/22/1930 | $53.00 | 12/30/1996 | Austria | |
| 10050 | BOLID | 2/18/1953 | $63.00 | 12/3/1997 | Switzerland | |
| 10051 | ALFKI | 5/15/1991 | $25.30 | 7/16/1996 | Denmark | |
| 10052 | ANATR | 4/4/1990 | $36.30 | 9/11/1996 | Brazil | |
| 10053 | ANTON | 11/30/1957 | $47.30 | 10/7/1996 | Germany | |
| 10054 | BLONP | 10/22/1930 | $58.30 | 12/30/1996 | Austria | |
| 10055 | BOLID | 2/18/1953 | $69.30 | 12/3/1997 | Switzerland | |
| 10056 | ALFKI | 5/15/1991 | $27.60 | 7/16/1996 | Denmark | |
| 10057 | ANATR | 4/4/1990 | $39.60 | 9/11/1996 | Brazil | |
| 10058 | ANTON | 11/30/1957 | $51.60 | 10/7/1996 | Germany | |
| 10059 | BLONP | 10/22/1930 | $63.60 | 12/30/1996 | Austria | |
| 10060 | BOLID | 2/18/1953 | $75.60 | 12/3/1997 | Switzerland | |
| 10061 | ALFKI | 5/15/1991 | $29.90 | 7/16/1996 | Denmark | |
| 10062 | ANATR | 4/4/1990 | $42.90 | 9/11/1996 | Brazil | |
| 10063 | ANTON | 11/30/1957 | $55.90 | 10/7/1996 | Germany | |
| 10064 | BLONP | 10/22/1930 | $68.90 | 12/30/1996 | Austria | |
| 10065 | BOLID | 2/18/1953 | $81.90 | 12/3/1997 | Switzerland | |
| 10066 | ALFKI | 5/15/1991 | $32.20 | 7/16/1996 | Denmark | |
| 10067 | ANATR | 4/4/1990 | $46.20 | 9/11/1996 | Brazil | |
| 10068 | ANTON | 11/30/1957 | $60.20 | 10/7/1996 | Germany | |
| 10069 | BLONP | 10/22/1930 | $74.20 | 12/30/1996 | Austria | |
| 10070 | BOLID | 2/18/1953 | $88.20 | 12/3/1997 | Switzerland | |
| 10071 | ALFKI | 5/15/1991 | $34.50 | 7/16/1996 | Denmark | |
| 10072 | ANATR | 4/4/1990 | $49.50 | 9/11/1996 | Brazil | |
| 10073 | ANTON | 11/30/1957 | $64.50 | 10/7/1996 | Germany | |
| 10074 | BLONP | 10/22/1930 | $79.50 | 12/30/1996 | Austria | |
| 10075 | BOLID | 2/18/1953 | $94.50 | 12/3/1997 | Switzerland |
This sample demonstrates the DataGrid component with row drag and drop functionality within the same grid.
The Blazor DataGrid enables row rearrangement through drag and drop operations by setting the AllowRowDragAndDrop property to true. This allows you to rearrange grid rows within the same grid by dragging and dropping.
When the AllowGrouping property is set to true, you can rearrange rows from one group to another, enabling flexible data organization.
In this demo, rows are rearranged by dragging and dropping them using the drag icon on the left side of the grid column. You can drag and drop grid rows between predefined row positions to reorganize your data.