How to load pages in OnDemand using async await in UWP ?
SfDataPager allows you to load the data for the current page, in OnDemandPaging, at runtime. You can enable OnDemandPaging by setting SfDataPager.UseOnDemandPaging to True. The data for the current page needs to be loaded in SfDataPager.OnDemandLoading event via SfDataPager.LoadDynamicItems method. When using OnDemandPaging, you may have to read data from some external server sometimes, it takes some time to read the data. In this case, you can delay the loading in SfDataPager.OnDemandLoading event by using async and await.
The following section shows you how to load the data with some delay in OnDemandPaging using async and await.
Here, SfDataPager and SfDataGrid are defined and SfDataGrid.ItemsSource is bound to SfDataPager.PagedSource. Also OnDemandLoading event is hooked for SfDataPager.
XAML
<syncfusion:SfDataGrid x:Name="dataGrid"
AllowFiltering="False"
AllowResizingColumns="True"
AutoGenerateColumns="False"
ColumnSizer="None"
ItemsSource="{Binding Path=PagedSource,
ElementName= dataPager}"
NavigationMode="Row">
</syncfusion:SfDataGrid>
<datapager:SfDataPager x:Name="dataPager"
Grid.Row="1"
Height="50"
OnDemandLoading="dataPager_OnDemandLoading"
AccentForeground="White"
NumericButtonCount="10"
UseOnDemandPaging="True"
PageCount="10"
PageSize="20">
</datapager:SfDataPager>
The OnDemandLoading event is triggered when the pager moves to the corresponding page. The OnDemandLoading event contains the following event arguments:
- StartIndex: Corresponding page start index.
- PageSize: Number of items to be loaded for that page.
Here dataPager_OnDemandLoading is defined with async keyword to await data loading. Inside dataPager_OnDemandLoading, GetEmployeesDetailsListAync method is called with await keyword and the execution is stopped here until GetEmployeesDetailsListAync returns the data. GetEmployeesDetailsListAync returns the data for the page with some delay.
Note: Here data is returned with some delay in GetEmployeesDetailsListAync method using Thread.Sleep method.
C#
using Syncfusion.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Collections.Generic;
using Syncfusion.UI.Xaml.Controls.DataPager;
public partial class MainWindow : Window
{
private EmployeeInfoRespository repository;
public MainWindow()
{
InitializeComponent();
repository = new EmployeeInfoRespository();
}
//async method which return data with some delay
public async Task<List<Employees>> GetEmployeesDetailsListAync(int startindex, int pagesize)
{
var employees = new List<Employees>();
//wait the method Execution to 2000 milliseconds
System.Threading.Thread.Sleep(2000);
for (int i = startindex; i < (startindex + pagesize); i++)
{
//Get the Data's to SfDataPager from ViewModel class
employees.Add(repository.GetEmployees(i));
}
return employees;
}
//Delegate handler marked as async to use await inside
private async void dataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs args)
{
var source = await GetEmployeesDetailsListAync(args.StartIndex, args.PageSize);
//Data's loaded to SfDataPager dynamically
dataPager.LoadDynamicItems(args.StartIndex, source.Take(args.PageSize));
//Resets the previously loaded page data's. It’s optional
(dataPager.PagedSource as PagedCollectionView).ResetCache();
}
}
Note: The above code shows build error in WinRT platform as the Thread.Sleep method is not supported in WinRT. Use Task.Delay to delay the data loading in WinRT as shown in the following code snippet.
WinRT and UWP code
//async method which return data with some delay
public async Task<List<Employees>> GetEmployeesDetailsListAync(int startindex, int pagesize)
{
var employees = new List<Employees>();
//wait the method Execution to 2000 milliseconds
Task.Delay(2000).Wait();
for (int i = startindex; i < (startindex + pagesize); i++)
{
//Get the Data's to SfDataPager from ViewModel class
employees.Add(repository.GetEmployees(i));
}
return employees;
}
Sample Links:
