Blazor Gantt Chart Example - Work Breakdown Structure (WBS) Column
This example demonstrates how to manage and visualize a new product development project using the Gantt Chart component. It showcases Work Breakdown Structure (WBS) support, which helps organize tasks hierarchically and track their position within the overall project structure.
Task ID Press Enter to sort. Press Alt Down to open filter Menu | WBS Code Press Enter to sort. Press Alt Down to open filter Menu | Task Name Press Enter to sort. Press Alt Down to open filter Menu | Start Date Press Enter to sort. Press Alt Down to open filter Menu | WBS Predecessor Press Enter to sort. Press Alt Down to open filter Menu | Duration Press Enter to sort. Press Alt Down to open filter Menu | Progress Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 1 | 1 | Product concept | 4/2/2025 | 6 days | 15 | |
| 2 | 1.1 | Defining the product and its usage | 4/2/2025 | 3 days | 30 | |
| 3 | 1.2 | Defining target audience | 4/2/2025 | 3 days | 0 | |
| 4 | 1.3 | Prepare product sketch and notes | 4/8/2025 | 1.1FS+1 day | 2 days | 15 |
| 5 | 1.3.1 | Manufacturing cost | 4/8/2025 | 2 days | 30 | |
| 6 | 1.3.2 | Selling cost | 4/8/2025 | 2 days | 0 | |
| 7 | 1.3.2.1 | Selling Items | 4/8/2025 | 2 days | 0 | |
| 8 | 2 | Market research | 4/10/2025 | 12 days | 15 | |
| 9 | 2.1 | Demand analysis | 4/10/2025 | 4 days | 15 | |
| 10 | 2.1.1 | Customer strength | 4/10/2025 | 1.3.1FS | 4 days | 30 |
| 11 | 2.1.2 | Market opportunity analysis | 4/10/2025 | 1.3.1FS | 4 days | 0 |
| 12 | 2.2 | Competitor analysis | 4/10/2025 | 1.3.2.1FS | 4 days | 30 |
| 13 | 2.3 | Product strength analsysis | 4/22/2025 | 2.1FS | 4 days | 0 |
| 14 | 2.4 | Research complete | 4/15/2025 | 2.1.1FS | 0 days | 0 |
| 15 | 3 | Product design and development | 4/4/2025 | 18 days | 13 | |
| 16 | 3.1 | Functionality design | 4/16/2025 | 2.2FS | 3 days | 30 |
| 17 | 3.2 | Quality design | 4/16/2025 | 2.2FS | 3 days | 0 |
| 18 | 3.3 | Define reliability | 4/4/2025 | 2 days | 30 | |
| 19 | 3.4 | Identifying raw materials | 4/16/2025 | 2.4FS | 2 days | 0 |
| 20 | 3.5 | Define cost plan | 4/21/2025 | 2 days | 15 | |
| 21 | 3.5.1 | Manufacturing cost | 4/21/2025 | 3.2FS | 2 days | 30 |
| 22 | 3.5.2 | Selling cost | 4/21/2025 | 3.2FS | 2 days | 0 |
| 23 | 3.6 | Development of the final design | 4/4/2025 | 15 days | 8 | |
| 24 | 3.6.1 | Defining dimensions and package volume | 4/23/2025 | 3.4FS,3.5FS | 2 days | 30 |
| 25 | 3.6.2 | Develop design to meet industry standards | 4/23/2025 | 3.5.2FS | 2 days | 0 |
| 26 | 3.6.3 | Include all the details | 4/4/2025 | 3 days | 0 | |
| 27 | 3.7 | CAD computer-aided design | 4/24/2025 | 3.6.1FS | 3 days | 30 |
| 28 | 3.8 | CAM computer-aided manufacturing | 4/25/2025 | 3.6.2FS | 3 days | 0 |
| 29 | 3.9 | Design complete | 4/8/2025 | 3.6.3FS | 0 days | 0 |
| 30 | 4 | Prototype testing | 4/29/2025 | 3.7FS | 4 days | 30 |
| 31 | 5 | Include feedback | 4/30/2025 | 3.8FS | 4 days | 0 |
| 32 | 6 | Manufacturing | 4/30/2025 | 3.8FS,3.9FS | 5 days | 30 |
| 33 | 7 | Assembling materials to finsihed goods | 5/5/2025 | 4FS | 5 days | 0 |
| 34 | 8 | Feedback and testing | 5/6/2025 | 7 days | 47 | |
| 35 | 8.1 | Internal testing and feedback | 5/6/2025 | 5FS | 3 days | 45 |
| 36 | 8.2 | Customer testing and feedback | 5/12/2025 | 7FS | 3 days | 50 |
| 37 | 9 | Final product development | 5/15/2025 | 4 days | 30 | |
| 38 | 9.1 | Important improvements | 5/15/2025 | 8FS | 4 days | 30 |
| 39 | 9.2 | Address any unforeseen issues | 5/15/2025 | 8.2FS | 4 days | 30 |
Mar 30, 2025 | Apr 06, 2025 | Apr 13, 2025 | Apr 20, 2025 | Apr 27, 2025 | May 04, 2025 | May 11, 2025 | May 18, 2025 | May 25, 2025 |
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 |
This sample showcases the Work Breakdown Structure (WBS) feature in the Blazor Gantt Chart, which applies a hierarchical numbering system to display each task’s position in the overall project structure. Enabling the ShowWbsColumn and AutoGenerateWbs properties generates WBS codes and WBS predecessors for all tasks.
When AutoGenerateWbs is set to true, the chart recalculates these codes automatically whenever the task hierarchy changes—after actions such as sorting, adding, deleting, or editing ensuring accuracy and preserving structural clarity throughout the project lifecycle.
For more details, refer to the documentation section.