Reorder Rows

   
Task Assigned To Start Date Due Date Priority Progress
Simplify & Clarify Product Messaging
John Heart 4/3/2018 4/14/2018 Low
 
 
Prepare Financial Reports
Samantha Bright 4/3/2018 4/7/2018 Medium
 
 
Prepare Marketing Plan
Arthur Miller 4/7/2018 4/14/2018 High
Create Action Plan to Improve Customer Engagement
Robert Reagan 8/8/2017 4/8/2018 Medium
 
 
Update Personnel Files
Greta Sims 8/8/2017 10/18/2017 Medium
 
 
Review Health Insurance Options
Brett Wade 9/27/2017 11/10/2017 High
 
 
Choose Between PPO and HMO Health Plan
Sandra Johnson 12/13/2017 3/23/2018 Low
 
 
Update Google Adwords Strategy
Ed Holmes 8/23/2017 12/23/2017 Low
 
 
Create New Brochure Design
Barb Banks 1/3/2018 3/14/2018 High
 
 
Obtain Price Quote for New Brochure
Kevin Carter 2/1/2018 3/15/2018 High
 
 
Brochure Design Review
Cindy Stanwick 8/22/2017 10/28/2017 Medium
 
 
Review Website Redesign Strategy
Sammy Hill 9/16/2017 3/6/2018 Low
 
 
Roll Out New Website
Davey Jones 11/7/2017 2/6/2018 Low
 
 
Update Sales/Marketing Strategy
Victor Norris 12/13/2017 4/2/2018 Medium
 
 
Update Sales/Revenue Report
Mary Stern 12/25/2017 4/2/2018 Medium
 
 
Direct vs Online Sales Comparison Report
Robin Cosworth 1/2/2018 3/20/2018 Low
 
 
Review Sales Report and Approve Modifications
Kelly Rodriguez 9/4/2017 10/30/2017 Low
 
 
Update R&D Strategy
James Anderson 11/13/2017 12/4/2017 High
 
 
Discuss Updated R&D Strategy
Antony Remmen 10/29/2017 12/31/2017 Medium
 
 
Update QA Strategy
Olivia Peyton 10/31/2017 11/2/2017 Medium
Data grid with 400 rows and 6 columns

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.