Load More in Xamarin DataGrid (SfDataGrid)

4 Apr 20248 minutes to read

The data grid enables LoadMore option when the SfDataGrid.AllowLoadMore property is set to true, and also by setting the SfDataGrid.LoadMoreCommand property. When LoadMore is enabled, the control loads a subset of data to its data source at runtime using LoadMoreView.

When the grid reaches maximum offset while scrolling down, an interactive load more view is displayed. Tapping the load more view triggers a command to add more data to the data source of the grid at runtime.

Load more command

The data grid load records to its data source at runtime by triggering an ICommand bound to the SfDataGrid.LoadMoreCommand property. When the load more view is tapped, the CanExecute of the ICommand returns true, and this command is triggered to load the records at runtime.

Set the SfDataGrid.IsBusy property to true before loading items to notify the grid that more items are to be loaded. Set the property to false after loading items to the grid. When loading items, alter the time for the LoadMore animation from the sample by setting a delay based on the requirement.

To enable and load items at runtime, follow the code example:

C#

//Enable load more in SfDataGrid
dataGrid.AllowLoadMore = true;
dataGrid.LoadMoreCommand = new Command(ExecuteLoadMoreCommand);
 
private async void ExecuteLoadMoreCommand()
{
    this.dataGrid.IsBusy = true;
    await Task.Delay(new TimeSpan(0, 0, 5));
    viewModel.LoadMoreItems ();
    this.dataGrid.IsBusy = false;
} 

//ViewModel.cs
private OrderInfoRepository order;
public ViewModel()
{
    SetRowsToGenerate(50);
}

//ItemsSource
private ObservableCollection<OrderInfo> ordersInfo;

public ObservableCollection<OrderInfo> OrdersInfo
{
    get { return ordersInfo; }
    set { this.ordersInfo = value; }
}

//ItemsSource Generator
public void SetRowsToGenerate(int count)
{
    order = new OrderInfoRepository();
    ordersInfo = order.GetOrderDetails(count);
}

public void LoadMoreItems()
{
    for (int i = 0; i < 20; i++)
        this.OrdersInfo.Add(order.GenerateOrder(OrdersInfo.Count + 1));
}

//OrderInfoRepository.cs
public ObservableCollection<OrderInfo> GetOrderDetails (int count)
{
    ObservableCollection<OrderInfo> orderDetails = new ObservableCollection<OrderInfo> ();

    for (int i = 10001; i <= count + 10000; i++) {
        var order = new OrderInfo () {
            OrderID = i,
            CustomerID = CustomerID [random.Next (7)],
            EmployeeID = random.Next (1700, 1800).ToString (),
            FirstName = FirstNames [random.Next (7)],
            LastName = LastNames [random.Next (7)]
        };
        orderDetails.Add (order);
    }
    return orderDetails;
} 

public OrderInfo GenerateOrder(int id)
{
    var order = new OrderInfo(){
        OrderID = (id + 10000),
        CustomerID = CustomerID [random.Next (15)],
        EmployeeID = random.Next (1700, 1800).ToString (),
        FirstName = FirstNames [random.Next (15)],
        LastName = LastNames [random.Next (15)],
    };
    return order;
}

//Main DataSources
string[] FirstNames = new string[] {
    "Kyle"
    "Gina",
    "Irene",
    "Katie",
    "Michael",
    "Oscar",
    "Ralph"
};

string[] LastNames = new string[] {
    "Adams",
    "Crowley",
    "Ellis",
    "Gable",
    "Irvine",
    "Keefe",
    "Mendoza"
};

string[] CustomerID = new string[] {
    "Adams",
    "Frans",
    "Katie",
    "Laura",
    "Wilson",
    "Andrew",
    "Lenny"
};

Customize load more display text

Customize the text displayed in the LoadMoreView by setting the SfDataGrid.LoadMoreText property as follows:

C#

//setting load more text in SfDataGrid
dataGrid.LoadMoreText = "Load More Items";

Customize load more view position

Customize the displayed LoadMoreView to either top or bottom based on the requirement.

C#

//Enable load more in SfDataGrid
dataGrid.LoadMorePosition = LoadMoreViewPosition.Bottom;

Customize LoadMoreView

Custom LoadMore View

The data grid also customizes LoadMoreView based on the requirements. To do this, write custom LoadMoreView class inheriting from LoadMoreView, and perform the LoadMoreOperation.

To customize LoadMoreView, follow the code example:

C#

public class CustomLoadMoreView : LoadMoreView
{
    private Button loadMoreView;

    public CustomLoadMoreView()
    {
        this.BackgroundColor = Color.Red;
        loadMoreView = new Button ();
        loadMoreView.Text = "LoadItems";
        this.Children.Add(loadMoreView);
        loadMoreView.Clicked += loadMoreView_Tapped;
    }

    void loadMoreView_Tapped (object sender, EventArgs e)
    {
        if (this.LoadMoreCommand != null)
        {
            this.LoadMoreCommand.Execute(null);
        }
    }

    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        loadMoreView.Layout(new Rectangle(x, y, width, height));
    }
}

Running application renders the following output:

You can download a readily runnable sample that illustrates enabling and using the load more functionality, here.

Customize size

The data grid allows to customize the size of the LoadMoreView by setting the LoadMoreView.HeightRequest and LoadMoreView.WidthRequest properties. Refer the below code example to customize the width and height of the LoadMoreView.

C#

dataGrid.LoadMoreView.HeightRequest = 105;
 // Below code changes the width of the LoadMoreView
 // dataGrid.LoadMoreView.WidthRequest = 150;

The following screenshot shows the customized LoadMoreView size

Customize opacity

The data grid also allows to customize the opacity of the LoadMoreView by setting the LoadMoreView.Opacity property. Refer the below code example to customize the opacity of the LoadMoreView.

C#

dataGrid.LoadMoreView.Opacity = 0.9;

The following screenshot shows the customized LoadMoreView opacity

NOTE

You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.