Example of Virtual Scrolling in ASP.NET MVC Gantt Chart Control

Gantt Chart
Virtual Scrolling

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.

1
Project 14/2/202465 days18
2
Product concept4/2/20245 days18
3
Defining the product and its usage4/2/20243 days30
4
Defining target audience4/2/20243 days0
5
Prepare product sketch and notes4/5/20242 days30
6
Concept approval4/8/20240 days0
7
Market research4/9/20248 days15
8
Demand analysis4/9/20244 days15
9
Customer strength4/9/20244 days30
10
Market opportunity analysis4/9/20244 days0
11
Competitor analysis4/15/20244 days30
12
Product strength analsysis4/15/20244 days0
13
Research complete4/18/20240 days0
14
Product design and development4/19/202420 days13
15
Functionality design4/19/20243 days30
16
Quality design4/19/20243 days0
17
Define reliability4/24/20242 days30
18
Identifying raw materials4/24/20242 days0
19
Define cost plan4/26/20242 days15
20
Manufacturing cost4/26/20242 days30
21
Selling cost4/26/20242 days0
22
Development of the final design4/30/20247 days8
18
18
30
0
30
15
15
30
0
30
0
13
30
0
30
0
15
30
0
8

Virtualization support is used to render large number 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 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

Transform your ASP.NET MVC web apps today with Syncfusion® ASP.NET MVC components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab