Step 1: Fetch Data and Enable Scrolling

• Mar 12, 2021
• 3 minutes to read

In this step, you create a virtual source, fetch rows from the service, and enable scrolling in the GridControl.

Note

The Issues Service is used as an example of a data source in this tutorial.

To Fetch Data and Enable Scrolling

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

   XAML

   <dxg:GridControl x:Name="grid">
       <dxg:GridControl.Columns>
           <dxg:GridColumn FieldName="Subject" />
           <dxg:GridColumn FieldName="User" />
           <dxg:GridColumn FieldName="Created" />
           <dxg:GridColumn FieldName="Votes"  />
           <dxg:GridColumn FieldName="Priority" />
       </dxg:GridControl.Columns>            
   </dxg:GridControl>
   

2. Initialize a virtual source:

   • Create a virtual source (InfiniteAsyncSource in this tutorial).
   • Set the VirtualSourceBase.ElementType property to the type of rows retrieved from the source (IssueData for the Issues Service).
   C#

   public MainWindow() {
       InitializeComponent();
       var source = new InfiniteAsyncSource() {
           ElementType = typeof(IssueData)
       };
   }
   

Note

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

3. Dispose of the virtual source:

   • Handle the window’s Unloaded event.
   • Call the VirtualSourceBase.Dispose method.
   C#

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

Note

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.
   • Obtain data using the Issues Service‘s GetIssuesAsync method.
   • Create the FetchRowsResult class object and specify the FetchRowsAsyncEventArgs.Result property.
   C#

   public MainWindow() {
       // ...
       source.FetchRows += (o, e) => {
           e.Result = FetchRowsAsync(e);
       };
   }
   static async Task<FetchRowsResult> FetchRowsAsync(FetchRowsAsyncEventArgs e) {
       IssueSortOrder sortOrder = GetIssueSortOrder(e);
       IssueFilter filter = MakeIssueFilter(e.Filter);
       const int pageSize = 30;
       var issues = await IssuesService.GetIssuesAsync(
           page: e.Skip / pageSize,
           pageSize: pageSize,
           sortOrder: sortOrder,
           filter: filter);
       return new FetchRowsResult(issues, hasMoreRows: issues.Length == pageSize);
   }
   static IssueSortOrder GetIssueSortOrder(FetchRowsAsyncEventArgs e) {
       return IssueSortOrder.Default;
   }
   static IssueFilter MakeIssueFilter(CriteriaOperator filter) {
       return null;
   }
   

Tip

Refer to the Step 2: Enable Sorting topic to learn how to implement the GetIssueSortOrder method.

Refer to the Step 3: Enable Filtering topic to learn how to implement the MakeIssueFilter method.

Note

The Issues Service returns data by pages. You can get rows as follows if your service supports the skip/take operations with arbitrary values:

C#

return await IssuesService.GetIssuesAsync(
    skip: e.Skip,
    take: 42,
    sortOrder: sortOrder,
    filter: filter
);

5. Bind the GridControl to the virtual source by assigning the resulting virtual source’s instance to the DataControlBase.ItemsSource property:

   C#

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

To Continue or Review

• To go to the next tutorial step, see Step 2: Enable Sorting.
• To return to the overview topic, see How to Use Virtual Sources.