Blazor Gantt Chart Example - Keyboard Navigation Support
GanttChart functionalities can be interactive with keyboard shortcuts. In the below sample various key combinations can be used to interact with the Gantt chart.
ID | Task Name | Start Date | End Date | Duration | Progress | Dependency |
---|
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 |
Below key combinations can be used in the Gantt chart to initiate various actions
- FOCUS
- Alt + J - Focuses on the first component of the sample.
- Home - Moves the focus to the first cell of the focused row.
- End - Moves the focus to the last cell of the focused row.
- Ctrl + Home - Moves the focus to the first Cell of the first row in our GanttChart component.
- Ctrl + End - Moves the focus to the last cell of the last row in our GanttChart component.
- Down arrow - Moves the cell focus downward from the focused cell.
- Up arrow - Moves the cell focus upward from the focused cell.
- Left arrow - Moves the cell focus left side from the focused cell.
- Right arrow - Moves the cell focus right side from the focused cell.
- SELECTION
- Shift + Down arrow - Extends the row/cell selection downwards from the selected row/cell.
- Shift + Up arrow - Extends the row/cell selection upwards from the selected row/cell.
- Shift + Left arrow - Extends the cell selection to the left side from the selected cell.
- Shift + Right arrow - Extends the cell selection to the right side from the selected cell.
- Up arrow - Moves the cell focus/row or cell selection upward.
- Down arrow - Moves the cell focus/row or cell selection downward.
- Right arrow - Moves the cell focus/row or cell selection right side.
- Left arrow - Moves the cell focus/row or cell selection left side.
- EDITING
- Ctrl + Insert - Opens addRowDialog.
- Ctrl + F2 - Opens editRowDialog.
- Del - Deletes the currently selected record.
- Insert - Adds a new row.
- Enter - Saves the current form if the Mode is Normal or Dialog / Saves the current cell.
- EXPANDCOLLAPSE
- Ctrl + Down arrow - Expands all tasks.
- Ctrl + Up arrow - Collapses all tasks.
- Ctrl + Shift + Up arrow - Collapses the selected row.
- Ctrl + Shift + Down arrow - Expands the selected row.
For more details, refer to the documentation section.