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.
Fetch Data
Create a ViewModel with a command that fetches rows from the data source:
- Create a ViewModel.
- In the ViewModel, create a FetchIssues command.
- Use the Issues Service‘s GetIssuesAsync method to obtain data from the data source.
- Create the FetchRowsResult object and assign it to the FetchAsyncArgsBase.Result property.
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.
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>
Initialize a virtual source and fetch rows from the data source:
Assign the virtual source’s instance (InfiniteAsyncSource in this tutorial) to the DataControlBase.ItemsSource property.
Set the VirtualSourceBase.ElementType property to the type of rows retrieved from the data source (IssueData in this tutorial).
If your service returns untyped objects (for example, a JSON object that is converted to a dynamic object), specify the VirtualSourceBase.CustomProperties property.
Define the window’s data context. This allows the window to work with the ViewModel.
Bind the FetchIssues command to the InfiniteAsyncSource.FetchRowsCommand property:
<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
- Proceed to Step 2 - Enable Sort Operations.
- Review the root topic - How to Use Virtual Sources.