Example of Virtual Mask in Blazor Scheduler Component
This example illustrates how the virtual mask functionality works in virtual scrolling. All the events in this example are loaded at the initial rendering of Scheduler, but the events in the visible area alone will be rendered. Here, the Scheduler is made to dynamically load 300 resources along with the events count of 3600 (300 resources * 12 events).
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
The Scheduler UI Mask virtualization allows it to render only the content area visible within the view-port without buffering the resource content. Here, the same set of DOM elements is re-used to improve the performance. In this feature, a loading placeholder indicator was shown while loading the new resource.
In this example, the virtual scrolling and virtual mask options are enabled on the timeline month view to load a large number of resources and their associated events. To enable the dynamic loading of events and resources in timeline view of
Scheduler, set the AllowVirtualScrolling and EnableVirtualMask properties to true within the view-specific settings.