Example of Drag and Drop within Grid in Blazor DataGrid Component
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 | Customer ID | Order Date | Freight | Shipped Date | Ship Country |
|---|
| 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.