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.

TIP

Demos:

Requires a WPF Subscription. Download

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);
        var take = e.Take ?? 30;
        var issues = await IssuesService.GetIssuesAsync(
            skip: e.Skip,
            take: take,
            sortOrder: sortOrder,
            filter: filter);
        return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
    }
    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 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 a selected row and scroll position.

If data in your source are 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.

  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;
    }
    

Continue or Review