Using Data Virtualization

As the case of handling a lot of data is quite common, the requirement for fast data processing becomes more and more indispensable. The result of this necessity is the Data Virtualization technique that ensures much better performance as well as user experience improvements.

The virtual collection is designed for ReadOnly purposes only and it is not recommended to be used in other scenarios when updates are required. Add/insert scenario is not supported with VirtualQueryableCollectionView as it cannot maintain cache of the already loaded items.

When working with the UI components that enable UI virtualization, you may take advantage of the above mentioned technique by using VirtualQueryableCollectionView class. It enables you to benefit from the on-demand data loading to smooth scrolling with UI virtual components. VirtualQueryableCollectionView provides you with the following important members:

  • LoadSize: Gets or sets a value that defines the maximum number of items requested at once.

  • VirtualItemCount: Gets or sets a value that defines the total number of items available on the server-side.

  • ShouldEnumeratorLoadItems: Gets or sets a value that indicates whether items that are not loaded yet should get loaded while the collection's enumerator is traversed.

  • ItemsLoading: An event that will be raised when the collection is requesting item at some index and this item is not already loaded. The arguments in this event are as follows:

    • StartIndex: Requested item index.
    • ItemCount: Number of requested items (can be less than or equal to the LoadSize).

In order to utilize the VirtualQueryableCollectionView class, you may take the following approach (the example below demonstrates the case when utilizing WCF RIA Services):

Example 1: Using data virtualization with WCF RIA Services

public MainPage() 
    var context = new NorthwindDomainContext(); 
    var query = context.GetOrder_DetailsQuery().OrderBy(o => o.OrderID); 
    query.IncludeTotalCount = true; 
    var view = new VirtualQueryableCollectionView() { LoadSize = 10, VirtualItemCount = 100 }; 
    view.ItemsLoading += (s, e) => 
        context.Load<Order_Detail>(query.Skip(e.StartIndex).Take(e.ItemCount)).Completed += (sender, args) => 
           var lo = (LoadOperation)sender; 
           if (lo.TotalEntityCount != -1 && lo.TotalEntityCount != view.VirtualItemCount) 
               view.VirtualItemCount = lo.TotalEntityCount; 
           view.Load(e.StartIndex, lo.Entities); 
    DataContext = view; 

Example 2: Binding RadGridView

<telerik:RadGridView ItemsSource="{Binding}" /> 

The controls that currently support data virtualization are RadGridView, RadComboBox, RadTreeView, RadCoverFlow and RadBook.

Filtering is only supported with IQueryable data sources.

Filtering on Distinct Values is not fully supported when using the VirtualQueryableCollectionView. We suggest configuring GridViewDataColumn with ShowDistinctFilters="False". That way only filtering through the Field Filters will be enabled. You can check the basic filtering section as a reference on the filtering support. There you can also find more information on how to filter through the Field Filters.

ItemsLoading event

ItemsLoading event will be raised if you try to access some item by index and this item is not yet loaded. When you scroll down, the ItemsLoading event will be called and the empty(null) items in the collection will be replaced with the new items. When an item is already loaded the collection will not call ItemsLoading event for this item.

When you provide IQueryable in the VirtualQueryableCollectionView you do not need to handle the ItemsLoading event.

When ScrollMode is configured as Deferred, then a ScrollPositionIndicator will be shown as the user scrolls vertically. Its content will be an empty value until the user releases the scrollbar to a particular position so that the items to be displayed into view are actually loaded. In order to avoid this, you could permanently hide the indicator defining a Style for this visual element setting its Opacity to 0.

Check out the online demo here.

You can also check those additional blogs:

See Also

In this article