The Syncfusion Blazor Gantt Chart allows you to render DOM elements effectively using virtualization support in the default remote data set.
The Gantt Chart takes all the records from the data set and validates all the available data during load time. Thus, having a large data set, say more than 100,000 records, takes more time. To overcome this, we have now added lazy-loading support in the 2022 Volume 4 release. It allows you to load more than 100,000 records with effective performance in Gantt Chart.
Lazy-loading fetches only the required number of parent records from the remote service on the initial load. The remaining records are fetched on demand when expanding or scrolling the Gantt Chart. We have discussed boosting performance with virtualization in this blog post, if you want to learn more.
This blog will show how lazy loading helps you load large data sets in our Blazor Gantt Chart component.
Lazy loading (load on demand) in Blazor Gantt Chart
In the Syncfusion Blazor Gantt Chart, the data manager fetches only the root parent records from the remote service in a collapsed state with the help of the GanttTaskFields.HasChildMapping property. It allows you to both enable and disable virtualization in the Gantt Chart.
Virtualization disabled: The data manager fetches all root parent records, and the child records are lazy loaded only when expanding the parent record. It may still have performance problems when you have many root parent records.
Virtualization enabled: The data manager fetches the necessary root parent for the current viewport. While scrolling, the parent record fetches the immediate child records on demand. The next set of records is fetched from the web service during scrolling.
Index.razor
<SfGantt TValue=”TaskData” Height=”450px” Width=”1000px”>
<SfDataManager Url=”api/Default” Adaptor=”Adaptors.WebApiAdaptor”></SfDataManager>
<GanttTaskFields Id=”ID” Name=”TaskName” StartDate=”StartDate” EndDate=”EndDate”
Duration=”Duration” Dependency=”Predecessor” ParentID=”ParentId” HasChildMapping=”isParent”>
</GanttTaskFields>
</SfGantt>API Service: Load on demand in Blazor Gantt Chart on GitHub.
You can find the real-time difference in data load times in the following metrics.
Record Count | With lazy loading | Without lazy loading |
50,000 | 0.82 seconds | 4 minutes 15 seconds |
75,000 | 0.82 seconds | 8 minutes 25 seconds |
1,00,000 | 0.82 seconds | 18 minutes 45 seconds |
Note: These metrics may depend on machine performance and RAM-free space.
GitHub references
For more information, refer to the demo for load on demand in the Blazor Gantt Chart that has been uploaded on GitHub.
Conclusion
This blog briefly described how lazy loading can assist you in loading massive data sets faster in our Blazor Gantt Chart component. Try it out and let us know your thoughts in the comments section below.
For more information, check out the load on demand in Blazor Gantt Chart demo and documentation.
Thank you for taking the time to read this!
The Syncfusion Blazor components collection includes over 80 responsive and lightweight UI and web controls for creating modern online apps.
You may contact us via our support forum, support portal, or feedback portal if you have any questions or comments. We are always delighted to help!
Related blogs
- Task Scheduling and Markers in Blazor Gantt Chart
- Building an Application for Microsoft Teams with Blazor
- Boosting Performance of Blazor Gantt Chart Using Virtualization
- Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App
- A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly
