Blazor Gantt Chart Example - Column Sorting
This sample demonstrates the multi-sorting feature of Gantt. Sorting allows to visualize the data in ascending or descending order. To sort a column, click on the column header.
ID Press Enter to sort | Task Name Press Enter to sort | Start Date Press Enter to sort | End Date Press Enter to sort | Duration Press Enter to sort | Progress Press Enter to sort | Dependency Press Enter to sort |
|---|
| 1 | Product concept | 4/2/2021 | 4/12/2021 | 7 days | 32 | |
| 2 | Define the product usage | 4/2/2021 | 4/6/2021 | 3 days | 30 | |
| 3 | Define the target audience | 4/2/2021 | 4/5/2021 | 2 days | 40 | |
| 4 | Prepare product sketch and notes | 4/7/2021 | 4/12/2021 | 4 days | 30 | 2FS |
| 5 | Concept approval | 4/12/2021 | 4/12/2021 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/13/2021 | 4/22/2021 | 8 days | 25 | |
| 7 | Demand analysis | 4/13/2021 | 4/16/2021 | 4 days | 15 | |
| 8 | Customer strength | 4/13/2021 | 4/16/2021 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/13/2021 | 4/16/2021 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/19/2021 | 4/22/2021 | 4 days | 30 | 7FS,8FS |
| 11 | Product strength analysis | 4/19/2021 | 4/22/2021 | 4 days | 40 | 9FS |
| 12 | Research completed | 4/22/2021 | 4/22/2021 | 0 days | 30 | 10FS |
| 13 | Product design and development | 4/23/2021 | 5/19/2021 | 19 days | 31 | |
| 14 | Functionality design | 4/23/2021 | 4/28/2021 | 4 days | 30 | 12FS |
| 15 | Quality design | 4/23/2021 | 4/27/2021 | 3 days | 40 | 12FS |
| 16 | Define reliability | 4/28/2021 | 5/3/2021 | 4 days | 30 | 15FS |
| 17 | Identifying raw materials | 4/28/2021 | 4/29/2021 | 2 days | 0 | 15FS |
| 18 | Define cost plan | 4/30/2021 | 5/4/2021 | 3 days | 35 | 17FS |
| 19 | Estimate manufacturing cost | 4/30/2021 | 5/4/2021 | 3 days | 40 | 17FS |
| 20 | Estimate selling cost | 4/30/2021 | 5/4/2021 | 3 days | 30 | 17FS |
| 21 | Development of final design | 5/5/2021 | 5/19/2021 | 11 days | 32 | |
| 22 | Develop dimensions and design | 5/5/2021 | 5/10/2021 | 4 days | 30 | 19FS,20FS |
| 23 | Develop designs to meet industry | 5/11/2021 | 5/13/2021 | 3 days | 40 | 22FS |
| 24 | Include all the details | 5/14/2021 | 5/19/2021 | 4 days | 30 | 23FS |
| 25 | CAD - Computer Aided Design | 5/20/2021 | 5/24/2021 | 3 days | 0 | 24FS |
| 26 | CAM - Computer Aided Manufacturing | 5/25/2021 | 5/28/2021 | 4 days | 30 | 25FS |
| 27 | Finalize the design | 5/28/2021 | 5/28/2021 | 0 days | 40 | 26FS |
| 28 | Prototype testing | 5/31/2021 | 6/3/2021 | 4 days | 30 | 27FS |
| 29 | Include feedback | 5/31/2021 | 6/3/2021 | 4 days | 0 | 28SS |
| 30 | Manufacturing | 6/4/2021 | 6/10/2021 | 5 days | 30 | 28FS,29FS |
| 31 | Assembling material into finished goods | 6/11/2021 | 6/17/2021 | 5 days | 40 | 30FS |
| 32 | Final product development | 6/18/2021 | 6/28/2021 | 7 days | 17 | |
| 33 | Important improvement | 6/18/2021 | 6/22/2021 | 3 days | 0 | 31FS |
| 34 | Customer testing and feedback | 6/23/2021 | 6/28/2021 | 4 days | 30 | 33FS |
| 35 | Final product development | 6/29/2021 | 7/2/2021 | 4 days | 30 | |
| 36 | Important improvement | 6/29/2021 | 7/2/2021 | 4 days | 30 | 34FS |
| 37 | Address any unforeseen issues | 6/29/2021 | 7/2/2021 | 4 days | 30 | 36SS |
| 38 | Finalize the product | 7/5/2021 | 7/14/2021 | 8 days | 15 | |
| 39 | Branding the product | 7/5/2021 | 7/8/2021 | 4 days | 30 | 37FS |
| 40 | Marketing and presales | 7/9/2021 | 7/14/2021 | 4 days | 0 | 39FS |
Mar 24, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 | Jul 11, 2021 | Jul 18, 2021 |
W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
Sorting can be enabled by using AllowSorting property. By default, the multi-sorting feature is enabled in Gantt. To sort multiple columns, hold the Ctrl key, and then click the column header. To clear the sort for a column, hold the Shift key, and then click the column header.
More information about sorting can be found in this documentation section.