The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Implement Pull-to-Refresh


This documentation topic describes legacy technology. We no longer develop new functionality for the GridControl and suggest that you use the new DataGridView control instead.

This example shows how to add the pull-to-refresh functionality to a grid to allow your end-users update grid content with the pull-down gesture. To do this, follow the steps below.

  1. Set the GridControl.IsPullToRefreshEnabled property to true to enable the grid's pull-to-refresh feature.
  2. Create a command to be executed when an end-user pulls the grid down.
  3. Bind the created command to the grid using the GridControl.PullToRefreshCommand property.


public partial class MainPage : ContentPage
    ProductsRepository repository;
    public static readonly BindableProperty PullToRefreshProperty = BindableProperty.Create<MainPage, ICommand>(o => o.PullToRefreshCommand, null);
    public static readonly BindableProperty ProductsProperty = BindableProperty.Create<MainPage, ObservableCollection<Product>>(o => o.Products, null);

    public Command PullToRefreshCommand {
        get { return (Command)GetValue(PullToRefreshProperty); }
        set { SetValue(PullToRefreshProperty, value); }

    public ObservableCollection<Product> Products {
        get { return (ObservableCollection<Product>)GetValue(ProductsProperty); }
        set { SetValue(ProductsProperty, value); }

    public MainPage () {
        InitializeComponent ();

        BindingContext = this;
        this.repository = new TestProductsRepository();
        this.Products = repository.Products;
        PullToRefreshCommand = new Command(ExecutePullToRefreshCommand);

    void ExecutePullToRefreshCommand() {
        Products = repository.Products;
public abstract class ProductsRepository {
    public ObservableCollection<Product> Products { get; set; }

    public ProductsRepository() {
        this.Products = new ObservableCollection<Product>();

    protected abstract ObservableCollection<Product> GenerateAvailableProducts (int number);

    internal void RefreshProducts() {
        int index = new Random().Next (0, 5);
        Products = GenerateAvailableProducts (index);

public class TestProductsRepository : ProductsRepository {
    readonly List<Product> products;

    public TestProductsRepository() : base() {
        this.products = new List<Product>();


        int index = new Random().Next (0, 5);
        Products = GenerateAvailableProducts (index);

    protected override ObservableCollection<Product> GenerateAvailableProducts(int number) {
        ObservableCollection<Product> availableProducts = new ObservableCollection<Product>();
        for (int i = 0; i < 4; i++)
        return availableProducts;

    void GenerateAllProducts() {
        products.Add(new Product("Beverages") {Description = "Soft drinks, coffees, teas, beers, and ales"});
        products.Add(new Product("Condiments"){Description = "Sweet and savory sauces, relishes, spreads, and seasonings"});
        products.Add(new Product("Confections"){Description = "Desserts, candies, and sweet breads"});
        products.Add(new Product("DairyProducts"){Description = "Cheeses"});
        products.Add(new Product("Grains"){Description = "Breads, crackers, pasta, and cereal"});
        products.Add(new Product("MeatPoultry"){Description = "Prepared meats"});
        products.Add(new Product("Produce"){Description = "Dried fruit and bean curd"});
        products.Add(new Product("Seafood"){Description = "Seaweed and fish"});
<dxGrid:GridControl ItemsSource="{Binding Products}" RowHeight="160"
                    IsPullToRefreshEnabled="true" PullToRefreshCommand="{Binding PullToRefreshCommand}">

Another way to configure the pull-to-refresh functionality is to handle the GridControl.PullToRefresh event.