Example of Selection in Blazor Gantt Chart Component
The selection feature enables you to highlight a row or cell. It can be enabled by setting AllowSelection to true.
Properties
ID | Task Name | Start Date | End Date | Duration | Progress | Dependency |
|---|
| 1 | Product concept | 4/2/2021 | 4/8/2021 | 5 days | 33 | |
| 2 | Defining the product usage | 4/2/2021 | 4/6/2021 | 3 days | 30 | |
| 3 | Defining the target audience | 4/2/2021 | 4/6/2021 | 3 days | 40 | |
| 4 | Prepare product sketch and notes | 4/7/2021 | 4/8/2021 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days | 0 | 3FS,4FS |
| 6 | Market research | 4/9/2021 | 4/20/2021 | 8 days | 25 | |
| 7 | Demand analysis | 4/9/2021 | 4/14/2021 | 4 days | 15 | |
| 8 | Customer strength | 4/9/2021 | 4/14/2021 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days | 30 | 7FS,8FS |
| 11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days | 40 | 9FS |
| 12 | Research completed | 4/20/2021 | 4/20/2021 | 0 days | 30 | 10FS |
| 13 | Product design and development | 4/21/2021 | 5/10/2021 | 14 days | 30 | |
| 14 | Functionality design | 4/21/2021 | 4/23/2021 | 3 days | 30 | 12FS |
| 15 | Quality design | 4/21/2021 | 4/23/2021 | 3 days | 40 | 12FS |
| 16 | Define reliability | 4/26/2021 | 4/27/2021 | 2 days | 30 | 15FS |
| 17 | Identifying raw materials | 4/26/2021 | 4/27/2021 | 2 days | 0 | 15FS |
| 18 | Define cost plan | 4/28/2021 | 4/29/2021 | 2 days | 35 | 17FS |
| 19 | Manufacturing cost | 4/28/2021 | 4/29/2021 | 2 days | 40 | 17FS |
| 20 | Selling cost | 4/28/2021 | 4/29/2021 | 2 days | 30 | 17FS |
| 21 | Development of final design | 4/30/2021 | 5/10/2021 | 7 days | 32 | |
| 22 | Develop dimensions and design | 4/30/2021 | 5/3/2021 | 2 days | 30 | 19FS,20FS |
| 23 | Develop designs to meet industry | 5/4/2021 | 5/5/2021 | 2 days | 40 | 22FS |
| 24 | Include all the details | 5/6/2021 | 5/10/2021 | 3 days | 30 | 23FS |
| 25 | CAD - Computer Aided Design | 5/11/2021 | 5/13/2021 | 3 days | 0 | 24FS |
| 26 | CAM - Computer Aided Manufacturing | 5/14/2021 | 5/18/2021 | 3 days | 30 | 25FS |
| 27 | Finalize the design | 5/18/2021 | 5/18/2021 | 0 days | 40 | 26FS |
| 28 | Prototype testing | 5/19/2021 | 5/24/2021 | 4 days | 30 | 27FS |
| 29 | Include feedback | 5/19/2021 | 5/24/2021 | 4 days | 0 | 28SS |
| 30 | Manufacturing | 5/25/2021 | 5/31/2021 | 5 days | 30 | 28FS,29FS |
| 31 | Assembling material to finished goods | 6/1/2021 | 6/7/2021 | 5 days | 40 | 30FS |
| 32 | Final product development | 6/8/2021 | 6/15/2021 | 6 days | 15 | |
| 33 | Important improvement | 6/8/2021 | 6/10/2021 | 3 days | 0 | 31FS |
| 34 | Customer testing and feedback | 6/11/2021 | 6/15/2021 | 3 days | 30 | 33FS |
| 35 | Final product development | 6/16/2021 | 6/21/2021 | 4 days | 30 | |
| 36 | Important improvement | 6/16/2021 | 6/21/2021 | 4 days | 30 | 34FS |
| 37 | Address any unforeseen issue | 6/16/2021 | 6/21/2021 | 4 days | 30 | 36SS |
| 38 | Final product | 6/22/2021 | 7/1/2021 | 8 days | 15 | |
| 39 | Branding product | 6/22/2021 | 6/25/2021 | 4 days | 30 | 37FS |
| 40 | Marketing and Presales | 6/28/2021 | 7/1/2021 | 4 days | 0 | 39FS |
Mar 27, 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 |
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 |
The Gantt component supports two types of selection that can be set by using the SelectionSettings.Type property. They are:
Single- Allows selecting only one row or cell at a time.Multiple- Allows selecting multiple rows or cells. To perform the multi-selection, press and hold the Ctrl or Shift key and click the desired rows or cells.
It also supports three types of selection modes that can be set by using the SelectionSettings.Mode property. They are:
Row- Allows selecting only rows, and it is the default mode of selection in Gantt.Cell- Allows selecting only cells.Both- Allows selecting both rows and cells at the same time.
Toggle selection can be enabled by using the SelectionSettings.EnableToggle property.
The taskbar that is not visible in the viewport can be auto-scrolled to make it viewable by selecting the row and setting the ScrollToTaskbarOnClick property to true.
The EnableRowHover feature allows users to easily identify the current row by highlighting it when the mouse hovers over it. This feature can be activated by setting the EnableRowHover property to true.
More information about the Selection feature can be found in this documentation section.