Load on Demand: A Solution to Handling Large Data Sets Efficiently in Blazor Gantt Chart
Tags: blazor, gantt, webdev, lazyload
Published: 2023-02-28 14:49:22

---
title: Load on Demand: A Solution to Handling Large Data Sets Efficiently in Blazor Gantt Chart
published: true
date: 2023-02-28 11:00:00 UTC
tags: blazor, gantt, webdev, lazyload
canonical_url: https://www.syncfusion.com/blogs/post/load-on-demand-blazor-gantt-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yapf5gdpv7y9t0e2ate.png
---
The [Syncfusion Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "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](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 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](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx "Blog: Boosting Performance of Blazor Gantt Chart Using Virtualization"), 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](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html "GanttTaskFields Class of Blazor Gantt Chart") 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**

```xml
<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](https://github.com/SyncfusionExamples/Lazy-Loading-in-Blazor-Gantt-Chart/blob/master/Controller/DefaultController.cs "Lazy loading in Blazor Gantt Chart demo on GitHub").

You can find the real-time difference in data load times in the following metrics.
<table>
<tbody>
<tr>
<td width="208">
<p><strong>Record Count</strong></p>
</td>
<td width="208">
<p><strong>With lazy loading</strong></p>
</td>
<td width="208">
<p><strong>Without lazy loading</strong></p>
</td>
</tr>
<tr>
<td width="208">
<p>50,000</p>
</td>
<td width="208">
<p>0.82 seconds</p>
</td>
<td width="208">
<p>4 minutes 15 seconds</p>
</td>
</tr>
<tr>
<td width="208">
<p>75,000</p>
</td>
<td width="208">
<p>0.82 seconds</p>
</td>
<td width="208">
<p>8 minutes 25 seconds</p>
</td>
</tr>
<tr>
<td width="208">
<p>1,00,000</p>
</td>
<td width="208">
<p>0.82 seconds</p>
</td>
<td width="208">
<p>18 minutes 45 seconds</p>
</td>
</tr>
</tbody>
</table>

**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](https://github.com/SyncfusionExamples/Lazy-Loading-in-Blazor-Gantt-Chart "Lazy Loading in Blazor Gantt Chart GitHub demo") 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](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "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](https://blazor.syncfusion.com/demos/gantt-chart/load-on-demand "Example of Load On Demand in Blazor Gantt Chart Component") and [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#load-child-on-demand "Load on demand in Blazor Gantt Chart documentation").

Thank you for taking the time to read this!

The [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components "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](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/home "Syncfusion 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](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx "Blog: Task Scheduling and Markers in Blazor Gantt Chart")
- [Building an Application for Microsoft Teams with Blazor](https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx "Blog: Building an Application for Microsoft Teams with Blazor")
- [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx "Blog: Boosting Performance of Blazor Gantt Chart Using Virtualization")
- [Instantly Update a Real-Time Chart with SignalR in Blazor Server-Side App](https://www.syncfusion.com/blogs/post/instantly-update-a-real-time-chart-with-signalr-in-blazor-server-side-app.aspx "Blog: 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](https://www.syncfusion.com/blogs/post/to-do-app-using-js-interop-with-html5-drag-and-drop-in-blazor-webassembly.aspx "Blog: A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly")