Blazor DataGrid Example - Drag and Drop within Grid
This sample shows the DataGrid component with row drag and drop functionality within the same 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 |
By setting the AllowRowDragAndDrop property to true, the Blazor DataGrid allows you to rearrange grid rows within the same grid.
By setting the AllowGrouping property to true, the Blazor DataGrid allows you to rearrange the row from one group to another group.
In this demonstration, the rows in the same grid are rearranged by dragging and dropping them using the drag icon on the left side of the grid column. You can now drag and drop grid rows between the predefined rows.