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.