Implement Load-More

• Jun 17, 2019
• 4 minutes to read

This example shows how to implement the grid’s load-more functionality - when a user scrolls to the bottom of the grid, a set of new data items is added to the end of the grid.

1. Set the DataGridView.IsLoadMoreEnabled property to true to enable the grid’s load-more functionality.

2. Create a command to be executed when a user scrolls to the bottom of the grid. Set the DataGridView.IsRefreshing property to false after data is loaded to hide the loading indicator in the grid.

3. Bind the DataGridView.LoadMoreCommand property to the created command.

In this example, data items for each next load (ten new orders) are generated randomly in code. The maximum number of loads a user is allowed to perform is 3. The total summary displays the count of data items currently loaded to the grid (it is automatically updated after each load).

The DataGridView.IndicatorColor property allows you to change the loading indicator color.

View Example

C#: Model

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace DataGridView_LoadMore.Models {
    public class Product {
        string name;
        int unitPrice;

        public Product(string name, int unitPrice) {
            this.name = name;
            this.unitPrice = unitPrice;
        }
        public string Name {
            get { return name; }
            set { name = value; }
        }
        public int UnitPrice {
            get { return unitPrice; }
            set { unitPrice = value; }
        }
    }

    public class Order {
        DateTime date;
        Product product;
        int quantity;

        public Order() {
            this.date = DateTime.Today;
            this.product = new Product("", 0);
            this.Quantity = 0;
        }
        public Order(DateTime date, Product product, int quantity) {
            this.date = date;
            this.product = product;
            this.quantity = quantity;
        }
        public DateTime Date {
            get { return date; }
            set { date = value; }
        }
        public Product Product {
            get { return product; }
            set { product = value; }
        }
        public int Quantity {
            get { return quantity; }
            set { quantity = value; }
        }
    }

    public class OrderData {
        readonly List<Product> products;
        const int orderCount = 50;
        readonly Random random;
        public ObservableCollection<Order> Orders { get; set; }

        public OrderData() {
            random = new Random((int)DateTime.Now.Ticks);
            products = new List<Product>();
            GenerateProducts();
            Orders = new ObservableCollection<Order>();
            for (int i = 0; i < orderCount; i++)
                Orders.Add(GenerateOrder());
        }

        public void LoadMoreOrders() {
            for (int i = 0; i < 10; i++)
                Orders.Add(GenerateOrder());
        }

        Order GenerateOrder() {
            Order order = new Order(new DateTime(2020, 1, 1).AddDays(random.Next(0, 60)), 
                            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("Queso Cabrales", 25));
        }
    }
}

C#: ViewModel

using System;
using Xamarin.Forms;
using System.Threading;
using System.Windows.Input;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using DataGridView_LoadMore.Models;

namespace DataGridView_LoadMore.ViewModels {
    public class ViewModel : INotifyPropertyChanged {
        OrderData data;

        public bool isRefreshing = false;
        public bool IsRefreshing {
            get { return isRefreshing; }
            set {
                if (isRefreshing != value) {
                    isRefreshing = value;
                    OnPropertyChanged("IsRefreshing");
                }
            }
        }

        ObservableCollection<Order> orders;
        public ObservableCollection<Order> Orders {
            get { return orders; }
            set {
                if (orders != value) {
                    orders = value;
                    OnPropertyChanged("Products");
                }
            }
        }

        LoadMoreDataCommand loadMoreCommand = null;
        public LoadMoreDataCommand LoadMoreCommand {
            get { return loadMoreCommand; }
            set {
                if (loadMoreCommand != value) {
                    loadMoreCommand = value;
                    OnPropertyChanged("LoadMoreCommand");
                }
            }
        }

        public ViewModel() {
            this.data = new OrderData();
            Orders = data.Orders;
            LoadMoreCommand = new LoadMoreDataCommand(ExecuteLoadMoreCommand);
        }

        void ExecuteLoadMoreCommand() {
            Task.Run(() => {
                Thread.Sleep(1000);
                Device.BeginInvokeOnMainThread(() => {
                    data.LoadMoreOrders();
                    Orders = data.Orders;
                    IsRefreshing = false;
                });
            });
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name) {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

    public class LoadMoreDataCommand : ICommand {
        readonly Action execute;
        int numOfLoadMore = 0;

        public event EventHandler CanExecuteChanged;

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

        public bool CanExecute(object parameter) {
            return numOfLoadMore < 3;
        }

        public void Execute(object parameter) {
            numOfLoadMore++;
            ChangeCanExecute();
            this.execute();
        }
        void ChangeCanExecute() {
            CanExecuteChanged?.Invoke(this, new EventArgs());
        }
    }
}

XAML: View

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataGridView_LoadMore.MainPage"
             xmlns:vm="clr-namespace:DataGridView_LoadMore.ViewModels"
             xmlns:dxg="http://schemas.devexpress.com/xamarin/2014/forms/datagrid">
    <ContentPage.BindingContext>
        <vm:ViewModel/>
    </ContentPage.BindingContext>
    <dxg:DataGridView ItemsSource="{Binding Orders}" 
                      IsLoadMoreEnabled="True" 
                      LoadMoreCommand="{Binding LoadMoreCommand}" 
                      IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}" 
                      IndicatorColor="Lime">
        <dxg:DataGridView.Columns>
            <dxg:DateColumn FieldName = "Date" DisplayFormat="d"/>
            <dxg:TextColumn FieldName="Product.Name" Caption = "Product" Width = "170"/>
            <dxg:NumberColumn FieldName="Product.UnitPrice" Caption = "Price" DisplayFormat="C0"/>
            <dxg:NumberColumn FieldName="Quantity" />
            <dxg:NumberColumn FieldName="Total" 
                              UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]" 
                              DisplayFormat="C0" IsReadOnly="True"/>
        </dxg:DataGridView.Columns>
        <dxg:DataGridView.TotalSummaries>
            <dxg:GridColumnSummary FieldName="Total" Type="Count"/>
        </dxg:DataGridView.TotalSummaries>
    </dxg:DataGridView>
</ContentPage>

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