Blazor Gantt Chart Example - Excel Filtering
This example demonstrates how to manage and analyze a new product development using the Gantt Chart component. It showcases Excel-like filtering capabilities that allow efficient navigation and data refinement within complex project structures.
Task ID 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 | End Date Press Enter to sort. Press Alt Down to open filter Menu | Duration Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 1 | Product concept | 4/2/2021 | 4/8/2021 | 5 days |
| 2 | Defining the product usage | 4/2/2021 | 4/6/2021 | 3 days |
| 3 | Defining the target audience | 4/2/2021 | 4/6/2021 | 3 days |
| 4 | Prepare product sketch and notes | 4/7/2021 | 4/8/2021 | 2 days |
| 5 | Concept approval | 4/8/2021 | 4/8/2021 | 0 days |
| 6 | Market research | 4/9/2021 | 4/20/2021 | 8 days |
| 7 | Demand analysis | 4/9/2021 | 4/14/2021 | 4 days |
| 8 | Customer strength | 4/9/2021 | 4/14/2021 | 4 days |
| 9 | Market opportunity analysis | 4/9/2021 | 4/14/2021 | 4 days |
| 10 | Competitor analysis | 4/15/2021 | 4/20/2021 | 4 days |
| 11 | Product strength analysis | 4/15/2021 | 4/20/2021 | 4 days |
| 12 | Research completed | 4/20/2021 | 4/20/2021 | 0 days |
| 13 | Product design and development | 4/21/2021 | 5/10/2021 | 14 days |
| 14 | Functionality design | 4/21/2021 | 4/23/2021 | 3 days |
| 15 | Quality design | 4/21/2021 | 4/23/2021 | 3 days |
| 16 | Define reliability | 4/26/2021 | 4/27/2021 | 2 days |
| 17 | Identifying raw materials | 4/26/2021 | 4/27/2021 | 2 days |
| 18 | Define cost plan | 4/28/2021 | 4/29/2021 | 2 days |
| 19 | Manufacturing cost | 4/28/2021 | 4/29/2021 | 2 days |
| 20 | Selling cost | 4/28/2021 | 4/29/2021 | 2 days |
| 21 | Development of final design | 4/30/2021 | 5/10/2021 | 7 days |
| 22 | Develop dimensions and design | 4/30/2021 | 5/3/2021 | 2 days |
| 23 | Develop designs to meet industry | 5/4/2021 | 5/5/2021 | 2 days |
| 24 | Include all the details | 5/6/2021 | 5/10/2021 | 3 days |
| 25 | CAD - Computer Aided Design | 5/11/2021 | 5/13/2021 | 3 days |
| 26 | CAM - Computer Aided Manufacturing | 5/14/2021 | 5/18/2021 | 3 days |
| 27 | Finalize the design | 5/18/2021 | 5/18/2021 | 0 days |
| 28 | Prototype testing | 5/19/2021 | 5/24/2021 | 4 days |
| 29 | Include feedback | 5/19/2021 | 5/24/2021 | 4 days |
| 30 | Manufacturing | 5/25/2021 | 5/31/2021 | 5 days |
| 31 | Assembling material to finished goods | 6/1/2021 | 6/7/2021 | 5 days |
| 32 | Final product development | 6/8/2021 | 6/15/2021 | 6 days |
| 33 | Important improvement | 6/8/2021 | 6/10/2021 | 3 days |
| 34 | Customer testing and feedback | 6/11/2021 | 6/15/2021 | 3 days |
| 35 | Final product development | 6/16/2021 | 6/21/2021 | 4 days |
| 36 | Important improvement | 6/16/2021 | 6/21/2021 | 4 days |
| 37 | Address any unforeseen issue | 6/16/2021 | 6/21/2021 | 4 days |
| 38 | Final product | 6/22/2021 | 7/1/2021 | 8 days |
| 39 | Branding product | 6/22/2021 | 6/25/2021 | 4 days |
| 40 | Marketing and Presales | 6/28/2021 | 7/1/2021 | 4 days |
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 |
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 |
This sample demonstrates Excel-like column filtering in the Blazor Gantt Chart. When the AllowFiltering property is enabled and the FilterType is set to Excel, column headers display filtering menus that support condition-based filtering. The HierarchyMode property defines how related records are displayed during filtering:
Parent(default): displays filtered tasks along with their parent records.Child: displays filtered tasks along with their child records.Both: displays filtered tasks with both parent and child records.None: displays only the filtered tasks.
More information about the filtering feature can be found in this documentation section.