Step 1: Fetch Data and Enable Scrolling

  • 3 minutes to read

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

VirtualSourceTutorialScrolling

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:

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

    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.

  1. Dispose of the virtual source:

    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.

  1. Fetch rows from the data source:

    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:

return await IssuesService.GetIssuesAsync(
    skip: e.Skip,
    take: 42,
    sortOrder: sortOrder,
    filter: filter
);
  1. Bind the GridControl to the virtual source by assigning the resulting virtual source's instance to the DataControlBase.ItemsSource property:

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

To Continue or Review