Load on Demand: A Solution to Handling Large Data Sets Efficiently in Blazor Gantt Chart
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Load on Demand: A Solution to Handling Large Data Sets Efficiently in Blazor Gantt Chart

Load on Demand: A Solution to Handling Large Data Sets Efficiently in Blazor Gantt Chart

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 forumsupport portal, or feedback portal if you have any questions or comments. We are always delighted to help!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed