Step 1: Fetch Data

• Aug 17, 2022
• 2 minutes to read

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

View Example: Data Grid - Bind to InfiniteAsyncSource

Fetch Data

1. Add the GridControl with columns that correspond to the Issues Service’s IssueData fields to your project:

   XAML

   <dxg:GridControl x:Name="grid" AutoGenerateColumns="False">
       <dxg:GridControl.Columns>
           <dxg:GridTextColumn FieldName="Subject" Width="150"/>
           <dxg:GridTextColumn FieldName="User" Width="50"/>
           <dxg:GridDateColumn FieldName="Created" Width="50" MaskType="DateTime" Mask="g"/>
           <dxg:GridTextColumn FieldName="Votes" Width="50"/>
           <dxg:GridTextColumn FieldName="Priority" Width="50"/>
       </dxg:GridControl.Columns>
   </dxg:GridControl>
   

2. Initialize a virtual source:

   • Create an InfiniteAsyncSource instance.

   • 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.

   C#

   public sealed partial class MainPage : Page {
       public MainPage() {
           this.InitializeComponent();
   
           var source = new InfiniteAsyncSource() {
               ElementType = typeof(IssueData)
           };
       }
   }
   

3. Dispose of the virtual source. Handle the Page’s Unloaded event and call the VirtualSourceBase.Dispose method:

   C#

   public MainPage() {
       // ...
       Unloaded += (o, e) => {
           source.Dispose();
       };
   }
   

   If you do not dispose of a source, the thread in which the source responds to requests can slow down. You may not dispose of a source if the source’s lifetime coincides with the application’s lifetime.

4. Fetch rows from the data source:

   • Handle the InfiniteAsyncSource.FetchRows event.
   • Use the Issues Service’s GetIssuesAsync method to obtain data from the data source.
   • Create the FetchRowsResult object and assign it to the FetchRowsAsyncEventArgs.Result property.
   C#

   public MainPage() {
       // ... 
       source.FetchRows += (o, e) => {
           e.Result = FetchRowsAsync(e);
       };
   }
   static async Task<FetchRowsResult> FetchRowsAsync(FetchRowsAsyncEventArgs e) {
       var take = 30; // The number of rows that the GridControl loads in one portion.
       var issues = await IssuesService.GetIssuesAsync(
           skip: e.Skip,
           take: take,
           sortOrder: IssueSortOrder.Default,
           filter: null);
       return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
   }
   

   Tip

   Refer to the following topic for information on how to allow users to sort data: Step 2: Enable Sort Operations.

   Refer to the following topic for information on how to allow users to filter data: Step 3: Enable Filter Operations.

5. Assign the virtual source’s instance to the DataControlBase.ItemsSource property:

   C#

   public MainPage() {
       // ...
       grid.ItemsSource = source;
   }
   

Continue or Review

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