Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Step 1: Fetch Data

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

    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