Grids
Example of Virtual Scrolling in ASP.NET Core Gantt Chart Control
This sample demonstrates the Virtual Scroll support in the Gantt Chart. This feature allows users to load a large amount of data effectively. It also reduces the DOM element's weight by virtually updating DOM during the vertical scroll and also in timeline during horizontal scroll.
ID | Name | Start Date | Duration | Progress |
|---|---|---|---|---|
| 1 | Project 1 | 4/2/2024 | 65 days | 18 |
| 2 | Product concept | 4/2/2024 | 5 days | 18 |
| 3 | Defining the product and its usage | 4/2/2024 | 3 days | 30 |
| 4 | Defining target audience | 4/2/2024 | 3 days | 0 |
| 5 | Prepare product sketch and notes | 4/5/2024 | 2 days | 30 |
| 6 | Concept approval | 4/8/2024 | 0 days | 0 |
| 7 | Market research | 4/9/2024 | 8 days | 15 |
| 8 | Demand analysis | 4/9/2024 | 4 days | 15 |
| 9 | Customer strength | 4/9/2024 | 4 days | 30 |
| 10 | Market opportunity analysis | 4/9/2024 | 4 days | 0 |
| 11 | Competitor analysis | 4/15/2024 | 4 days | 30 |
| 12 | Product strength analsysis | 4/15/2024 | 4 days | 0 |
| 13 | Research complete | 4/18/2024 | 0 days | 0 |
| 14 | Product design and development | 4/19/2024 | 20 days | 13 |
| 15 | Functionality design | 4/19/2024 | 3 days | 30 |
| 16 | Quality design | 4/19/2024 | 3 days | 0 |
| 17 | Define reliability | 4/24/2024 | 2 days | 30 |
| 18 | Identifying raw materials | 4/24/2024 | 2 days | 0 |
| 19 | Define cost plan | 4/26/2024 | 2 days | 15 |
| 20 | Manufacturing cost | 4/26/2024 | 2 days | 30 |
| 21 | Selling cost | 4/26/2024 | 2 days | 0 |
| 22 | Development of the final design | 4/30/2024 | 7 days | 8 |
Apr 01, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 | Jul 07, 2024 | Jul 14, 2024 | Jul 21, 2024 |
|---|
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 | M | T | W |
|---|
Virtualization support is used to render large number of tasks in Gantt with effective performance. In this mode all the tasks are fetched from data source initially, then some of the records are rendered in DOM which are compact to the current viewport area. While scrolling, tasks are updated in DOM as per current viewport position. This mode can be enabled by setting the enableVirtualization property as true. Additionally, the Gantt component now includes the timeline virtualization feature by setting the enableTimelineVirtualization to true.
This demo highlights the utilization of row and timeline virtualization features within the Gantt.
By default during Virtual scroll Shimmer effect is enabled you can disable this by changing enableVirtualMaskRow to false