Load More in MAUI DataGrid (SfDataGrid)

18 Mar 20269 minutes to read

The SfDataGrid enables the load more option when the SfDataGrid.AllowLoadMore property is set to true and SfDataGrid.LoadMoreOption property is set. When the load more feature is enabled, an interactive load more view will be displayed on the datagrid only when the datagrid reaches the maximum scroll offset while scrolling down. It loads a subset of data into its data source at runtime when users tap the DataGridLoadMoreView.

Load more command

The datagrid loads a subset of data to its data source at runtime by triggering an ICommand bound to the SfDataGrid.LoadMoreCommand property and SfDataGrid.LoadMoreCommandParameter property. It will be executed when the user taps the load more view manually or when the user reaches the end.

Set the SfDataGrid.IsBusy property to true before loading items to notify the datagrid that more items are about to be loaded. Set the property to false after successfully loading items into the datagrid. When loading items, customize the duration for displaying the activity indicator by introducing a delay based on specific requirements.

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

C#

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;
}

You can download the complete project from GitHub.

Load More Option

The SfDataGrid.LoadMoreOption property contains the following three different modes of operations:

• Manual: Displays the load more button when reaching the end of the list and execute SfDataGrid.LoadMoreCommand when tapping the button.
• Auto: Automatically execute the SfDataGrid.LoadMoreCommand when reaching end of the list.
• AutoOnScroll: Executes SfDataGrid.LoadMoreCommand when users interact with the datagrid and reach the end of list.

Load more automatically

Set the SfDataGrid.LoadMoreOption property as Auto to automatically load more items using the SfDataGrid.LoadMoreCommand and SfDataGrid.LoadMoreCommandParameter when reaching end of the list.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding OrderInfoCollection}"
                       AllowLoadMore="True"
                       LoadMoreOption="Auto"
                       LoadMoreCommandParameter="{Reference dataGrid}">
</syncfusion:SfDataGrid>

C#

dataGrid.LoadMoreCommand = new Command(ExecuteLoadMoreCommand);

private async void ExecuteLoadMoreCommand()
{
    this.dataGrid.IsBusy = true;
    await Task.Delay(new TimeSpan(0, 0, 5));
    viewModel.LoadMore();
    this.dataGrid.IsBusy = false;
}

Load more manually

Set the SfDataGrid.LoadMoreOption property as Manual to load more items manually using the SfDataGrid.LoadMoreCommand and SfDataGrid.LoadMoreCommandParameter when tapping the load more button at end of the list.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding OrderInfoCollection}"
                       AllowLoadMore="True"
                       LoadMoreOption="Manual"
                       LoadMoreCommandParameter="{Reference dataGrid}">
</syncfusion:SfDataGrid>

C#

dataGrid.LoadMoreCommand = new Command(ExecuteLoadMoreCommand);

private async void ExecuteLoadMoreCommand()
{
    this.dataGrid.IsBusy = true;
    await Task.Delay(new TimeSpan(0, 0, 5));
    viewModel.LoadMore();
    this.dataGrid.IsBusy = false;
}

Load more when user interacts

To load more items only when users interact with the datagrid and reach to the end of list using SfDataGrid.LoadMoreCommand and SfDataGrid.LoadMoreCommandParameter, set the SfDataGrid.LoadMoreOption property to AutoOnScroll.

The SfDataGrid.LoadMoreCommand will not execute when the datagrid is initially loaded. The SfDataGrid.LoadMoreCommand will execute only when users interact and reach to the end of list.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding OrderInfoCollection}"
                       AllowLoadMore="True"
                       LoadMoreOption="AutoOnScroll"
                       LoadMoreCommandParameter="{Reference dataGrid}">
</syncfusion:SfDataGrid>

C#

dataGrid.LoadMoreCommand = new Command(ExecuteLoadMoreCommand);

private async void ExecuteLoadMoreCommand()
{
    this.dataGrid.IsBusy = true;
    await Task.Delay(new TimeSpan(0, 0, 5));
    viewModel.LoadMore();
    this.dataGrid.IsBusy = false;
}

Customization

Display text

Customize the text displayed in the load more view by setting the SfDataGrid.LoadMoreText property as follows:

C#

dataGrid.LoadMoreText = "LOAD MORE";

Position

The position of load more view can be customized by using the SfDataGrid.LoadMorePosition property. By default, the load more view is displayed in the bottom position.

C#

dataGrid.LoadMorePosition = DataGridLoadMorePosition.Top;

Appearance

The appearance of the built-in load more view can be personalized through the following properties:

Property	Description
LoadMoreBackground	Sets the background of the load more view.
LoadMoreButtonBackground	Sets the background of the load more view button.
LoadMoreButtonTextColor	Sets the text color of the load more view button.
LoadMoreIndicatorColor	Sets the background of the load more view indicator.

Change load more view size

The data grid allows to customize the size of the load more view by setting the HeightRequest and WidthRequest properties. Refer the below code example to customize the width and height of the load more view and its button.

C#

dataGrid.LoadMoreText = "Load More Items";
dataGrid.LoadMoreView.HeightRequest = 50;
dataGrid.LoadMoreView.Children.OfType<Button>().First().WidthRequest = 150;

Custom load more view

The datagrid offers built-in support for configuring a custom load more view to meet your specific requirements.

The following code snippets demonstrate how to enable a custom load more view in the datagrid:

C#

public class CustomLoadMoreView : DataGridLoadMoreView
{
    private Label? loadMoreView;

    protected override void SetLoadMoreViewStyle(DataGridStyle style)
    {
        this.Background = style.LoadMoreBackground;
    }

    protected override void InitLoadMoreView()
    {
        this.HeightRequest = 50;
        var gestureRecognizer = new TapGestureRecognizer();
        loadMoreView = new Label() { HeightRequest = 25, WidthRequest = 150, HorizontalTextAlignment = TextAlignment.Center };
        loadMoreView.Text = "Load More Items";
        loadMoreView.GestureRecognizers.Add(gestureRecognizer);
        this.Children.Add(loadMoreView);
        gestureRecognizer.Tapped += loadMoreView_Tapped;
    }
    
    void loadMoreView_Tapped(object? sender, EventArgs e)
    {
        if (this.LoadMoreCommand != null)
        {
            this.LoadMoreCommand.Execute(null);
        }
    }

    protected override Size MeasureContent(double widthConstraint, double heightConstraint)
    {
        (loadMoreView as IView)!.Measure(widthConstraint, heightConstraint);
        return new Size(widthConstraint, heightConstraint);
    }

    protected override Size ArrangeContent(Rect bounds)
    {
        (loadMoreView as IView)!.Arrange(bounds);
        return bounds.Size;
    }
}