How to: Implement Load-More

This example shows how to implement the grid's load-more feature - when an end-user scrolls to the bottom of the grid, a set of new data items is added to the end of the grid. To add this functionality, follow the steps below.

  1. Set the GridControl.IsLoadMoreEnabled property to true to enable the grid's load-more feature.
  2. Create a command to be executed when an end-user scrolls to the bottom of the grid.
  3. Bind the created command to the grid using the GridControl.LoadMoreCommand property.

In this example, data items for each next load (ten new orders) are generated randomly in code. The maximum number of loads an end-user is allowed to perform is 10. The count of data items currently loaded to the grid is displayed by the total summary that is automatically updated after each load.

GridControl_LoadMore

public abstract class OrdersRepository {
    public ObservableCollection<Order> Orders { get; private set; }

    public OrdersRepository() {
        this.Orders = new ObservableCollection<Order>();
    }

    protected abstract Order GenerateOrder(int number);

    internal void LoadMoreOrders() {
        ObservableCollection<Order> newOrders = new ObservableCollection<Order>();
        foreach (var order in Orders)
            newOrders.Add(order);

        for (int i = 0; i < 10; i++)
            newOrders.Add(GenerateOrder(i));

        Orders = newOrders;
    }
}

public class TestOrdersRepository : OrdersRepository {

    const int orderCount = 50;
    readonly List<Product> products;
    readonly Random random;

    public TestOrdersRepository() : base() {
        this.random = new Random((int)DateTime.Now.Ticks);
        this.products = new List<Product>();

        GenerateProducts();

        for (int i = 0; i < orderCount; i++)
            Orders.Add(GenerateOrder(i));
    }

    protected override Order GenerateOrder(int number) {
        Order order = new Order(new DateTime(2015, 1, 1).AddDays(random.Next(0, 60)), 
            number % 3 == 0, RandomItem<Product>(products), random.Next(1, 100));
        return order;
    }

    T RandomItem<T>(IList<T> list) {
        int index = (int)(random.NextDouble() * 0.99 * (list.Count));
        return list[index];
    }

    void GenerateProducts() {
        products.Add(new Product("Tofu", 50));
        products.Add(new Product("Chocolade", 34));
        products.Add(new Product("Ikura", 70));
        products.Add(new Product("Chai", 3));
        products.Add(new Product("Boston Crab Meat", 36));
        products.Add(new Product("Ravioli Angelo", 18));
        products.Add(new Product("Ipon Coffee", 10));
        products.Add(new Product("Questo Cabrales", 25));
    }
}
public partial class MainPage : ContentPage
{
    OrdersRepository repository;
    public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create<MainPage, LoadMoreDataCommand>(o => o.LoadMoreCommand, null);
    public static readonly BindableProperty OrdersProperty = BindableProperty.Create<MainPage, ObservableCollection<Order>>(o => o.Orders, null);

    public LoadMoreDataCommand LoadMoreCommand {
        get { return (LoadMoreDataCommand)GetValue(LoadMoreCommandProperty); }
        set { SetValue(LoadMoreCommandProperty, value); }
    }

    public ObservableCollection<Order> Orders {
        get { return (ObservableCollection<Order>)GetValue(OrdersProperty); }
        set { SetValue(OrdersProperty, value); }
    }

    public MainPage () {
        InitializeComponent ();

        BindingContext = this;
        this.repository = new TestOrdersRepository();
        this.Orders = repository.Orders;
        LoadMoreCommand = new LoadMoreDataCommand(ExecuteLoadMoreCommand);
    }

    void ExecuteLoadMoreCommand() {
        repository.LoadMoreOrders();
        Orders = repository.Orders;
    }
}

public class LoadMoreDataCommand : ICommand {
    readonly Action execute;

    int numOfLoadMore;
    public event EventHandler CanExecuteChanged;

    public LoadMoreDataCommand(Action execute) {
        this.execute = execute;
    }

    public bool CanExecute(object parameter) {
        if (numOfLoadMore < 10) {
            return true;
        }
        return false;
    }

    public void Execute(object parameter) {
        numOfLoadMore++;
        this.execute();
    }
}

Another way to configure the load-more functionality is to handle the GridControl.LoadMore event.