Blazor Gantt Chart Example - Observable Collection Binding
ID | Task Name | Start Date | End Date | Duration | Progress |
|---|
1 | Product concept | 4/2/2021 | 4/8/2021 | 4 days | 31 |
2 | Define the product usage | 4/2/2021 | 4/6/2021 | 3 days | 30 |
3 | Define the target audience | 4/2/2021 | 4/2/2021 | 1 day | 40 |
4 | Prepare product sketch and notes | 4/5/2021 | 4/6/2021 | 2 days | 30 |
5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days | 0 |
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 |
9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days | 0 |
10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days | 30 |
11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days | 40 |
12 | Research completed | 4/19/2021 | 4/19/2021 | 0 days | 30 |
13 | Product design and development | 4/19/2021 | 5/10/2021 | 16 days | 30 |
14 | Functionality design | 4/19/2021 | 4/21/2021 | 3 days | 30 |
15 | Quality design | 4/19/2021 | 4/21/2021 | 3 days | 40 |
16 | Define reliability | 4/26/2021 | 4/27/2021 | 2 days | 30 |
17 | Identifying raw materials | 4/26/2021 | 4/27/2021 | 2 days | 0 |
18 | Define cost plan | 4/26/2021 | 4/27/2021 | 2 days | 35 |
19 | Estimate manufacturing cost | 4/26/2021 | 4/27/2021 | 2 days | 40 |
20 | Estimate selling cost | 4/26/2021 | 4/27/2021 | 2 days | 30 |
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 |
23 | Develop designs to meet industry | 5/3/2021 | 5/4/2021 | 2 days | 40 |
24 | Include all the details | 5/6/2021 | 5/10/2021 | 3 days | 30 |
25 | CAD - Computer Aided Design | 5/10/2021 | 5/12/2021 | 3 days | 0 |
26 | CAM - Computer Aided Manufacturing | 5/14/2021 | 5/18/2021 | 3 days | 30 |
27 | Finalize the design | 4/16/2021 | 4/16/2021 | 0 days | 40 |
28 | Prototype testing | 5/17/2021 | 5/20/2021 | 4 days | 30 |
29 | Include feedback | 5/17/2021 | 5/20/2021 | 4 days | 0 |
30 | Manufacturing | 5/24/2021 | 5/28/2021 | 5 days | 30 |
31 | Assembling material into finished goods | 5/31/2021 | 6/4/2021 | 5 days | 40 |
32 | Final product development | 6/7/2021 | 6/15/2021 | 7 days | 15 |
33 | Important improvement | 6/7/2021 | 6/9/2021 | 3 days | 0 |
34 | Customer testing and feedback | 6/11/2021 | 6/15/2021 | 3 days | 30 |
35 | Final product development | 6/14/2021 | 6/17/2021 | 4 days | 30 |
36 | Important improvement | 6/14/2021 | 6/17/2021 | 4 days | 30 |
37 | Address any unforeseen issues | 6/14/2021 | 6/17/2021 | 4 days | 30 |
38 | Finalize the product | 6/21/2021 | 7/1/2021 | 9 days | 15 |
39 | Branding the product | 6/21/2021 | 6/24/2021 | 4 days | 30 |
40 | Marketing and presales | 6/28/2021 | 7/1/2021 | 4 days | 0 |
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 |
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 |
This sample demonstrates observable data binding in the Blazor Gantt Chart. The chart consumes an ObservableCollection, ensuring that structural changes in the data source are reflected immediately on the timeline.
An ObservableCollection allows dynamic updates to the UI by automatically notifying changes such as additions, removals, or modifications to its items. When an object is added to or removed from the collection, the Gantt Chart UI updates automatically.
To ensure the UI reflects changes to individual properties within an object, the property setter must be properly configured to raise change notifications. This enables the Gantt Chart to refresh the affected task without requiring a full data reload.
The toolbar also enhances this functionality by providing built-in options for add, update, and delete operations, allowing direct task management within the chart interface.
For further details, refer to the documentation.