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

<dxGrid:GridControl ItemsSource="{Binding Orders}" 
                    LoadMoreCommand="{Binding LoadMoreCommand}" IsLoadMoreEnabled="True">
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));
    }
}

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