Step 1: Fetch Data

• Mar 30, 2023
• 3 minutes to read

This step describes how to create a virtual source and fetch rows from a service.

Note

This tutorial uses the Issues Service as a sample data source.

Run Demo: Infinite Scrolling Source - Step 1 Run Demo: Paged Source - Step 1

Fetch Data

1. Create a ViewModel with a command that fetches rows from the data source:

   • Create a ViewModel.
   • In the ViewModel, create a FetchIssues command.
   • Use the Issues Service‘s GetIssuesAsync method to obtain data from the data source.
   • Create the FetchRowsResult object and assign it to the FetchAsyncArgsBase.Result property.
   C#

   using DevExpress.Mvvm;
   using DevExpress.Mvvm.DataAnnotations;
   using DevExpress.Mvvm.Xpf;
   using DevExpress.Xpf.Data;
   
   public class IssueViewModel : ViewModelBase {
   
       [Command]
       public void FetchIssues(FetchRowsAsyncArgs args) {
           args.Result = GetIssuesAsync(args);
       }
       async Task<FetchRowsResult> GetIssuesAsync(FetchRowsAsyncArgs args) {
           var take = args.Take ?? 30;
           var issues = await IssuesService.GetIssuesAsync(
               skip: args.Skip,
               take: take,
               sortOrder: GetIssueSortOrder(args.SortOrder),
               filter: null);
   
           return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
       }
       static IssueSortOrder GetIssueSortOrder(SortDefinition[] sortOrder) {
           return IssueSortOrder.Default;
       }
   }
   

   Tip

   Refer to the following topic for information on how to implement the GetIssueSortOrder method: Step 2: Enable Sort Operations.

   For information on how to allow users to filter rows, refer to the following topic: Step 3: Enable Filter Operations.

2. Add a GridControl with columns that correspond to the Issues Service‘s IssueData fields to the View:

   XAML

   <dxg:GridControl>
       <dxg:GridControl.Columns>
           <dxg:GridColumn FieldName="Subject" IsSmart="True"/>
           <dxg:GridColumn FieldName="User" IsSmart="True"/>
           <dxg:GridColumn FieldName="Created" IsSmart="True"/>
           <dxg:GridColumn FieldName="Votes" IsSmart="True"/>
           <dxg:GridColumn FieldName="Priority" IsSmart="True"/>
       </dxg:GridControl.Columns>           
   </dxg:GridControl>
   

3. Initialize a virtual source and fetch rows from the data source:

   • Assign the virtual source’s instance (InfiniteAsyncSource in this tutorial) to the DataControlBase.ItemsSource property.

   • Set the VirtualSourceBase.ElementType property to the type of rows retrieved from the data source (IssueData in this tutorial).

     If your service returns untyped objects (for example, a JSON object that is converted to a dynamic object), specify the VirtualSourceBase.CustomProperties property.

   • Define the window’s data context. This allows the window to work with the ViewModel.

   • Bind the FetchIssues command to the InfiniteAsyncSource.FetchRowsCommand property:

   XAML

   <Window
       xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
       xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
       <Window.DataContext>
           <local:IssueViewModel/>
       </Window.DataContext>
   
       <dxg:GridControl>
           <dxg:GridControl.ItemsSource>
               <dx:InfiniteAsyncSource ElementType="{x:Type local:IssueData}"
                                       FetchRowsCommand="{Binding FetchIssuesCommand}"/>
           </dxg:GridControl.ItemsSource>
           <!-- -->
       </dxg:GridControl>
   

Usage Notes

• If your data is changed on the data source level, call the RefreshRows() method to reload data.

• The FetchRowsEventArgsBase.Take property returns the number of rows that should be reloaded. Use this property to allow the InfiniteAsyncSource to retain a selected row and scroll position after refresh. The PagedAsyncSource automatically retains the selected row and scroll position.

• If data in your source is changed frequently, you can retain the same selected row after refresh. Specify the VirtualSourceBase.KeyProperty property to make a virtual source find the selected row by a specific field.

• The virtual source fetches the next portion of rows when the GridControl displays the last loaded row. Set the FetchMode property to Manual to change this behavior.

• You can call the FetchMoreRows() method to force the FetchRowsCommand / FetchRows and load the next portion of data.

Continue or Review

• Proceed to Step 2 - Enable Sort Operations.
• Review the root topic - How to Use Virtual Sources.