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

Note

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

    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() {
        InitializeComponent();
        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))
            .Cast<PropertyDescriptor>()
            .Where(x => x.Name != "Tags")
            .Concat(new[] {
                CreateTagsProperty()
            })
            .ToArray();
        return new PropertyDescriptorCollection(customProperties);
    }
    
  3. Dispose of the virtual source:

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

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.

  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