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.



The Issues Service is used as an example of a data source in this tutorial.

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:GridColumn FieldName="Subject" />
            <dxg:GridColumn FieldName="User" />
            <dxg:GridColumn FieldName="Created" />
            <dxg:GridColumn FieldName="Votes" />
            <dxg:GridColumn FieldName="Tags" />

    Note that the GridControl cannot display the Tags column’s values because the IssueData.Tags property’s type is a string array.

  2. Initialize a virtual source:

    • Create a virtual source (InfiniteAsyncSource in this tutorial).
    • Create the custom Tags property and transform a string array into a single string - comma-separated list of tags (see the CreateTagsProperty method).
    • Specify the VirtualSourceBase.CustomProperties property.
    public MainWindow() {
        var source = new InfiniteAsyncSource() {
            CustomProperties = GetCustomProperties()
    static DynamicPropertyDescriptor CreateTagsProperty() {
        return new DynamicPropertyDescriptor(
            name: "Tags",
            propertyType: typeof(string),
            getValue: x => string.Join(", ", ((IssueData)x).Tags));
    static PropertyDescriptorCollection GetCustomProperties() {
        var customProperties = TypeDescriptor.GetProperties(typeof(IssueData))
            .Where(x => x.Name != "Tags")
            .Concat(new[] {
        return new PropertyDescriptorCollection(customProperties);
  3. Dispose of the virtual source:

    public MainWindow() {
        // ... 
        Unloaded += (o, e) => {
  4. 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;


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.

  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