Skip to main content

Step 1: Fetch Data

  • 3 minutes to read

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

VirtualSourceTutorialScrolling

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:

    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:

    <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:

    <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