Reorder Rows

  
TaskAssigned ToStart DateDue DatePriorityProgress
Simplify & Clarify Product Messaging
John Heart4/3/20184/14/2018Low
 
 
Prepare Financial Reports
Samantha Bright4/3/20184/7/2018Medium
 
 
Prepare Marketing Plan
Arthur Miller4/7/20184/14/2018High
Create Action Plan to Improve Customer Engagement
Robert Reagan8/8/20174/8/2018Medium
 
 
Update Personnel Files
Greta Sims8/8/201710/18/2017Medium
 
 
Review Health Insurance Options
Brett Wade9/27/201711/10/2017High
 
 
Choose Between PPO and HMO Health Plan
Sandra Johnson12/13/20173/23/2018Low
 
 
Update Google Adwords Strategy
Ed Holmes8/23/201712/23/2017Low
 
 
Create New Brochure Design
Barb Banks1/3/20183/14/2018High
 
 
Obtain Price Quote for New Brochure
Kevin Carter2/1/20183/15/2018High
 
 
Brochure Design Review
Cindy Stanwick8/22/201710/28/2017Medium
 
 
Review Website Redesign Strategy
Sammy Hill9/16/20173/6/2018Low
 
 
Roll Out New Website
Davey Jones11/7/20172/6/2018Low
 
 
Update Sales/Marketing Strategy
Victor Norris12/13/20174/2/2018Medium
 
 
Update Sales/Revenue Report
Mary Stern12/25/20174/2/2018Medium
 
 
Direct vs Online Sales Comparison Report
Robin Cosworth1/2/20183/20/2018Low
 
 
Review Sales Report and Approve Modifications
Kelly Rodriguez9/4/201710/30/2017Low
 
 
Update R&D Strategy
James Anderson11/13/201712/4/2017High
 
 
Discuss Updated R&D Strategy
Antony Remmen10/29/201712/31/2017Medium
 
 
Update QA Strategy
Olivia Peyton10/31/201711/2/2017Medium
Data grid with 399 rows and 6 columns
0 rows are selected

When you activate the AllowDragRows option, our Blazor TreeList component renders a drag handle for each data row. When a user starts a drag operation, the drag hint displays row information on screen. Use the DragHintTextTemplate to display a custom message within the drag hint.

The ItemsDropped event fires when users drop rows onto the Blazor TreeList (AllowedDropTarget). In the event handler, update the data source: insert rows at the drop position and remove them from the initial position, if required.

This demo allows you to reorder TreeList rows and change row hierarchy. Note the drop target indicator:

  • A line between rows: inserts the row above the line.
  • A frame around a row: inserts the row as a child.