Boosting Performance of Blazor Gantt Chart Using Virtualization
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (166).NET Core  (29).NET MAUI  (114)Angular  (93)ASP.NET  (51)ASP.NET Core  (81)ASP.NET MVC  (89)Azure  (39)Blazor  (174)BoldSign  (2)DocIO  (23)Essential JS 2  (95)Essential Studio  (186)File Formats  (39)Flutter  (124)JavaScript  (210)Microsoft  (116)PDF  (71)React  (83)Succinctly series  (130)Syncfusion  (682)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (41)Windows Forms  (59)WinUI  (59)WPF  (143)Xamarin  (158)XlsIO  (27)Other CategoriesBarcode  (5)BI  (29)Bold BI  (6)Build conference  (7)Business intelligence  (54)Button  (4)C#  (126)Chart  (72)Cloud  (13)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (7)DataGrid  (59)Development  (490)Doc  (7)DockingManager  (1)eBook  (98)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (25)Extensions  (21)File Manager  (5)Gantt  (16)Gauge  (11)Git  (5)Grid  (28)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (376)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (34)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (10)Road Map  (11)Scheduler  (47)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (25)Solution Services  (3)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (107)UI  (264)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (24)Visual Studio Code  (17)Web  (460)What's new  (245)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Boosting Performance of Blazor Gantt Chart Using Virtualization

Boosting Performance of Blazor Gantt Chart Using Virtualization

The Syncfusion Blazor Gantt Chart is a project planning and management tool. Its rich feature set helps us display and manage hierarchical tasks with timeline details.

Though many of the component’s features are necessary for the convenience of users, the performance of the component also plays a vital role, especially while handling a huge volume of data with a longer timeline data source.

So, to effectively handle a huge data set, we have provided virtualization support in our Blazor Gantt Chart to load DOM (Document Object Model) elements on demand. This will enhance the performance of the browser engine while rendering our Gantt Chart component.

In this blog, we’ll see the various virtualization features available in our Blazor Gantt Chart component and how they help in boosting performance.

Virtualization in Blazor Gantt Chart

As I said before, virtualization renders only the DOM elements required in the current viewport. After that, it will dynamically render the subsequent elements during horizontal and vertical scrolling on demand.

You can enable virtualization for both horizontal and vertical scrolling in the grid and chart areas of the Gantt Chart.

The virtualization types supported in the Blazor Gantt Chart component are:

Let’s see them in action!

Row virtualization

With the help of row virtualization, we can effectively bind and visualize a huge data set with thousands of records. Initially, it will only render the current viewport rows in the DOM for the grid and chart areas. On vertical scrolling, it will render further rows on demand, thus enhancing the performance of the Blazor Gantt Chart.

Refer to the following GIF image.

Row Virtualization in Blazor Gantt Chart
Row Virtualization in Blazor Gantt Chart

Column virtualization

Consider a scenario where we need to bind a data source with many column fields in each data object. In that case, not only does the number of records in the data source affect the performance, but the number of fields or columns in each data source also affects the performance because it increases the number of cell elements being rendered in the DOM.

So, in this case, we can enable column virtualization in the Blazor Gantt Chart. It will render only the current viewport grid cells in the DOM and render the remaining cells on demand while scrolling horizontally. In this way, it enhances the performance of the Blazor Gantt Chart.

Refer to the following GIF image.

Column Virtualization in Blazor Gantt Chart
Column Virtualization in Blazor Gantt Chart

Timeline virtualization

Like column virtualization in the grid area, we can enable timeline virtualization in the chart area of the Blazor Gantt Chart to schedule tasks with longer periods.

For tasks with longer periods, a greater number of cells needs to be rendered in the timeline, which may result in performance deterioration. Timeline virtualization reduces this cell rendering burden by loading the timeline cells required for the current viewport alone. All other cells will be rendered on demand while scrolling horizontally.

Refer to the following GIF image.

Timeline Virtualization in Blazor Gantt Chart
Timeline Virtualization in Blazor Gantt Chart

Performance metrics

Let’s compare the performance metrics for rendering 10,000 records with and without virtualization enabled in the Blazor Gantt Chart.

Without Virtualization (Normal Scrolling) With Virtualization (Row, Column, and Timeline)
4 minutes 52 seconds10 seconds

From the above table data, it is evident that with virtualization, the performance of the Blazor Gantt Chart can be drastically enhanced.

Reference

For more details, refer to the virtual scrolling in Blazor Gantt Chart demo and documentation.

Conclusion

Thanks for reading! In this blog, we have seen how virtualization helps in boosting performance by reducing the DOM elements in our Blazor Gantt Chart. Try out this marvelous feature and share your valuable feedback in the comments below.

You can also contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related

Tags:

Share this post:

Comments (1)

Dear Alan !
We are really, really looking forward to working with virtualization with the Gantt Chart !

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top