Pull To Refresh in MAUI DataGrid (SfDataGrid)

Pull To Refresh

To enable the PullToRefresh option in the data grid, set the SfDataGrid.AllowPullToRefresh property to true. This allows the control to refresh the data source at runtime when the pull-to-refresh gesture is performed. The data grid can refresh its data during runtime by executing an ICommand bound to the SfDataGrid.PullToRefreshCommand property. When a pull-to-refresh gesture is performed and the progress bar reaches 100%, this command is triggered to update the records in view.

To indicate that a pull-to-refresh operation is in progress, set the SfDataGrid.IsBusy property to true before starting the refresh. Once the refresh is complete, set this property back to false. You can also customize the duration of the pull-to-refresh animation by adding a delay in the code.

To enable and perform the pull-to-refresh operation, refer to the following code example:

XAML
C#
<syncfusion:SfDataGrid x:Name="dataGrid"
                       AllowPullToRefresh="True"
                       PullToRefreshCommand="{Binding RefreshCommand}"
                       ItemsSource="{Binding OrdersInfo}">
dataGrid.AllowPullToRefresh = true;

Command RefreshCommand = new Command(ExecutePullToRefreshCommand);
dataGrid.PullToRefreshCommand = RefreshCommand;
 
private async void ExecutePullToRefreshCommand()
{
    this.dataGrid.IsBusy = true;
    await Task.Delay(new TimeSpan(0, 0, 5));
    viewModel.ItemsSourceRefresh();
    this.dataGrid.IsBusy = false;
}

//ViewModel.cs
public void ItemsSourceRefresh()
{
    int count = random.Next (1, 10);
    for (int i = 1; i <= count; i++) 
    {
        this.OrdersInfo!.Insert(0, new OrderInfo()
        {
            OrderID = i,
            CustomerID = this.customerID[this.random.Next(15)],
            EmployeeID = this.random.Next(1700, 1800),
        });
    }        
}

Pull To Refresh

Transition Type

To customize the progress view animation, adjust the SfDataGrid.TransitionType property. By default, the transition type is set to SlideOnTop.

The following code snippet demonstrates how to change the transition type to Push. In this mode, only the scrollable view moves, while the header remains fixed:

MainPage.xaml
<syncfusion:SfDataGrid x:Name="dataGrid"
                       TransitionType="Push"
                       AllowPullToRefresh="True"
                       ItemsSource="{Binding OrdersInfo}">

TransitionType Push

Customization

You can customize various properties of SfPullToRefresh in the data grid, including TransitionType, PullingThreshold, ProgressBackground, ProgressColor, and more.

C#
public MainPage()
{
    InitializeComponent();
    dataGrid.AllowPullToRefresh = true;
    dataGrid.DataGridLoaded += DataGrid_DataGridLoaded;
}

private void DataGrid_DataGridLoaded(object? sender, EventArgs e)
{
    SfPullToRefresh refreshView = dataGrid.Children.OfType().First();
    if (refreshView != null)
    {
        refreshView.ProgressColor = Color.FromArgb("ffb703");
        refreshView.ProgressBackground = Color.FromArgb("023047");
        refreshView.ProgressThickness = 4;
        refreshView.RefreshViewThreshold = 10;
        refreshView.PullingThreshold = 120;
    }
}

Customization

To customize the various properties of SfPullToRefresh, refer to this documentation.

Host .NET MAUI DataGrid as pullable content

The PullToRefresh control provides support for loading any custom control as pullable content. To host the .NET MAUI Datagrid inside the PullToRefresh, follow these steps.

Add the required assembly references as discussed in the DataGrid and PullToRefresh.
Import PullToRefresh and DataGrid control namespace as follows.

MainPage.xaml
MainPage.xaml.cs
xmlns:sfgrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
xmlns:pulltoRefresh="clr-namespace:Syncfusion.Maui.PullToRefresh;assembly=Syncfusion.Maui.PullToRefresh"
using Syncfusion.Maui.DataGrid;
using Syncfusion.Maui.PullToRefresh;

Define the DataGrid as PullableContent of the PullToRefresh.
Handle the pull to refresh events for refreshing the data.
Customize the required properties of the DataGrid and PullToRefresh based on your requirement.

This is how the final output will look like when hosting a DataGrid control as pullable content.

TransitionMode SlideonTop

MainPage.xaml
PullToRefreshTemplateBehavior.cs
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="PullToRefreshTemplate.MainPage"
            xmlns:sfgrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
            xmlns:pulltoRefresh="clr-namespace:Syncfusion.Maui.PullToRefresh;assembly=Syncfusion.Maui.PullToRefresh"
            xmlns:local="clr-namespace:PullToRefreshTemplate">

    <ContentPage.Behaviors>
        <local:PullToRefreshTemplateBehavior />
    </ContentPage.Behaviors>

    <ContentPage.Content>
        <Grid>
            <pulltoRefresh:SfPullToRefresh x:Name="pullToRefresh"
                                        TransitionMode="SlideOnTop">

                <pulltoRefresh:SfPullToRefresh.PullableContent>
                    <sfgrid:SfDataGrid x:Name="dataGrid"
                                    ItemsSource="{Binding OrderInfoCollection}">
                    </sfgrid:SfDataGrid>
                </pulltoRefresh:SfPullToRefresh.PullableContent>
            </pulltoRefresh:SfPullToRefresh>
        </Grid>
    </ContentPage.Content>
</ContentPage>
using Syncfusion.Maui.PullToRefresh;

namespace PullToRefreshTemplate
{
    public class PullToRefreshTemplateBehavior : Behavior<ContentPage>
    {
        private OrderInfoRepository? viewModel;
        private Syncfusion.Maui.PullToRefresh.SfPullToRefresh? pullToRefresh;
        protected override void OnAttachedTo(ContentPage bindable)
        {
            this.viewModel = new OrderInfoRepository();
            bindable.BindingContext = this.viewModel;
            this.pullToRefresh = bindable.FindByName<Syncfusion.Maui.PullToRefresh.SfPullToRefresh>("pullToRefresh");
            this.pullToRefresh.Refreshing += this.PullToRefresh_Refreshing;
            base.OnAttachedTo(bindable);
        }

        private async void PullToRefresh_Refreshing(object? sender, EventArgs e)
        {
            this.pullToRefresh!.IsRefreshing = true;
            await Task.Delay(new TimeSpan(0, 0, 3));
            this.viewModel!.ItemsSourceRefresh();
            this.pullToRefresh.IsRefreshing = false;
        }

        protected override void OnDetachingFrom(ContentPage bindable)
        {
            this.pullToRefresh!.Refreshing -= this.PullToRefresh_Refreshing;
            base.OnDetachingFrom(bindable);
        }
    }
}

Transition Mode

The TransitionMode property specifies the mode of the animations. It has the following two modes:

The default transition is SlideOnTop that draws the RefreshView on top of the DataGrid.

MainPage.xaml
<pulltoRefresh:SfPullToRefresh x:Name="pullToRefresh"
                            TransitionMode="SlideOnTop">
    <pulltoRefresh:SfPullToRefresh.PullableContent>
        <sfgrid:SfDataGrid x:Name="dataGrid"
                            ItemsSource="{Binding OrderInfoCollection}">
        </sfgrid:SfDataGrid>
    </pulltoRefresh:SfPullToRefresh.PullableContent>
</pulltoRefresh:SfPullToRefresh>

The following code example shows how to set the TransitionMode as Push to SfPullToRefresh. This transition moves only the refresh content and the header is fixed.

MainPage.xaml
<pulltoRefresh:SfPullToRefresh x:Name="pullToRefresh"
                            TransitionMode="Push">
    <pulltoRefresh:SfPullToRefresh.PullableContent>
        <sfgrid:SfDataGrid x:Name="dataGrid"
                            ItemsSource="{Binding OrderInfoCollection}">
        </sfgrid:SfDataGrid>
    </pulltoRefresh:SfPullToRefresh.PullableContent>
</pulltoRefresh:SfPullToRefresh>

TransitionMode SlideonTop

For more details and code examples of the properties of SfPullToRefresh, refer to this documentation.