Data Virtualization

To enable incremental loading in RadDataGrid, you need to use a collection that implements the ISupportIncrementalLoading interface for the DataGrid's ItemsSource. The DataGrid will automatically detect this interface.

We provide one implementation of the ISupportIncrementalLoading interface with the IncrementalLoadingCollection (our default implementation). This isn't a requirement, but is an easy out-of-the-box option.

You can define the Action as an anonymous function:

Example 1: Define the IncrementalLoadingCollection's Action as an anonymous function

var collection = new IncrementalLoadingCollection<int>(async count => 
{ 
    // Return the next batch of items 
    return Enumerable.Range(0, count).ToList(); 
}) { BatchSize = 50 }; 

Or you can define the Action as a named method:

Example 2: Define the IncrementalLoadingCollection's Action as a standard method

var collection = new IncrementalLoadingCollection<int>(LoadMoreItems) { BatchSize = 50 }; 
 
private async Task<IEnumerable<int>> LoadMoreItems(uint count) 
{ 
    // Return the next batch of items 
    return Enumerable.Range(0, count).ToList(); 
} 

IncrementalLoadingMode

There are two modes available for incremental loading, these can be selected by setting the DataGrid's IncrementalLoadingMode property.

• Auto: The DataGrid will automatically load the next set of items when the user scrolls close to the end of the rows
• Explicit: The DataGrid will show a "Load more items" button at the end of the data rows. The next batch of items will be loaded when the user clicks the button.

BusyIndicator

You do not need to implement your own busy indicator when the DataGrid is fetching more items. The DataGrid will automatically show a busy indicator in a temporary end row to indicate that it is busy getting more items.

The advantage to this approach is the user can still scroll and interact with the DataGrid while that end row is indicating the busy state.

Examples

Let's start by defining the data model class:

Example 3: Define the Data class

public class Data 
{ 
    public string Category { get; set; } 
 
    public double Value { get; set; } 
} 

With the example data model defined, lets explore two options you can use: code-behind or MVVM.

Using Code Behind

In the following example, we define the IncrementalLoadingCollection in the view's code-behind file. The first thing you'll notice is that the IncrementalLoadingCollection's constructor requires you pass in an Action. This Action is where you get the next batch of items to be added to the DataGrid.

Example 4: Define the DataGrid control

<UserControl xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"> 
    <telerikGrid:RadDataGrid x:Name="grid" IncrementalLoadingMode="Explicit"/> 
</UserControl> 

Example 5: Construct the collection and set it as the ItemsSource

var collection = new IncrementalLoadingCollection<Data>(async count => 
{ 
    return Enumerable.Range(0, (int)count).Select(i => new Data { Category = $"Item {i}", Value = i }).ToList();  
}) { BatchSize = 50 }; 
 
grid.ItemsSource = collection; 

Using MVVM

In the following example, we define the IncrementalLoadingCollection in the view model and bind it to the DataGrid's ItemsSource property.

In this example, we switch to using auto mode and define the IncrementalLoadingCollection's Action as an external method.

Example 6: Define the DataGrid control

<UserControl xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"> 
    <UserControl.DataContext> 
        <local:MyViewModel /> 
    </UserControl.DataContext> 
 
    <telerikGrid:RadDataGrid ItemsSource="{Binding MyItems}" IncrementalLoadingMode="Auto"/> 
</UserControl> 

Example 7: The viewmodel class

public class MyViewModel 
{ 
    public MyViewModel() 
    { 
        MyItems = new IncrementalLoadingCollection<Data>(LoadMoreItems) { BatchSize = 50 }; 
    } 
 
    public IncrementalLoadingCollection<Data> MyItems { get; set; } 
 
    private async Task<IEnumerable<Data>> LoadMoreItems(uint count) 
    { 
        var currentIndex = Math.Max(0, MyItems.Count); 
        var nextIndex = currentIndex + count; 
 
        var nextBatchOfItems = Enumerable.Range(currentIndex, (int)nextIndex).Select(i => new Data  
        {  
            Category = $"Item {i}",  
            Value = i 
        }).ToList();  
 
        return nextBatchOfItems;  
    } 
}