Paging in MAUI DataGrid (SfDataGrid)

The data grid interactively supports data manipulation through the SfDataPager control, providing built-in options to page data on demand when dealing with large volumes. The SfDataPager can be placed above or below as needed to easily manage data paging.

To use paging functionality into the data grid, include the following namespace in your project:
Syncfusion.Maui.DataGrid.DataPager

There are two different modes in paging:

NormalPaging: It loads the entire data collection to the SfDataPager.
OnDemandPaging: It loads data to the current page dynamically in SfDataPager.

Normal paging

The data grid performs data paging using the SfDataPager. To enable paging, follow these steps:

Create a new instance of SfDataPager, and bind the data collection to the SfDataPager.Source property. This will internally create SfDataPager.PagedSource.
Bind the PagedSource property to the ItemsSource of the data grid.
Set the SfDataPager.PageSize property to determine the number of rows to be displayed on each page.
Set the SfDataPager.NumericButtonCount property to specify the number of buttons that should be displayed in view.”

NOTE

The SfDataPager.PageSize property should not be assigned with value 0.

The following code example illustrates using SfDataPager with the data grid control:

XAML
C#
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PagerSample.MainPage"
             Title="MainPage"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:pager="clr-namespace:Syncfusion.Maui.DataGrid.DataPager;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:PagerSample">

<ContentPage.BindingContext>
    <local:DataPagerViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
  
<ContentPage.Content>
    <Grid> 
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <pager:SfDataPager x:Name ="dataPager"
                           Grid.Row="1"
                           PageSize="15" 
                           NumericButtonCount="10"
                           Source="{Binding OrdersInfo}">
      </pager:SfDataPager>      
      <syncfusion:SfDataGrid x:Name="dataGrid"
                         Grid.Row="0"
                         SelectionMode="Single"
                         ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource }"  
                         >
      </syncfusion:SfDataGrid>
    </Grid> 
      </ContentPage.Content>
</ContentPage>
public partial class MainPage : ContentPage
{
    DataPagerViewModel viewModel;
	SfDataGrid dataGrid;
	SfDataPager pager;
	public NormalPage()
	{
		InitializeComponent();
        viewModel = new DataPagerViewModel();
        pager = new SfDataPager();
		pager.PageSize = 15;
		pager.NumericButtonCount = 10;
		pager.Source = viewModel.OrdersInfo;
        dataGrid = new SfDataGrid();
		dataGrid.ItemsSource = pager.PagedSource;
		Grid grid = new Grid();
		grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
		grid.RowDefinitions.Add(new RowDefinition() { Height = 50 });
		grid.Children.Add(dataGrid);
		grid.Children.Add(pager);
		grid.SetRow(dataGrid, 0);
		grid.SetRow(pager, 1);
		this.Content = grid;
	}
}

The following screenshot shows the outcome upon execution of the above code:

Normal paging .NET MAUI DataGrid.

On-Demand Paging

In normal Paging, data collection is entirely loaded initially into the SfDataPager. However, the control also allows for dynamically loading the data for the current page by setting SfDataPager.UseOnDemandPaging to true.

To load the current page item dynamically, hook into the OnDemandLoading event. In the OnDemandLoading event, use the LoadDynamicItems method to load data for the corresponding page in the SfDataPager.

The OnDemandLoading event is triggered when the pager moves to the corresponding page. It contains the following event arguments:

StartIndex: Displays start index of the corresponding page.
PageSize: Displays the number of items to be loaded for that page.

To load data for the DataPager control dynamically, follow the code example:

XAML
C#
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PagerSample.MainPage"
             Title="MainPage"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:pager="clr-namespace:Syncfusion.Maui.DataGrid.DataPager;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:PagerSample">

<ContentPage.BindingContext>
    <local:DataPagerViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
  
<ContentPage.Content>
    <Grid> 
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <pager:SfDataPager x:Name ="dataPager"
                           Grid.Row="1"
                           PageSize="15" 
                           NumericButtonCount="10"
                           PageCount="10"
                           OnDemandLoading="dataPager_OnDemandLoading"
                           UseOnDemandPaging="True">
      </pager:SfDataPager>      
      <syncfusion:SfDataGrid x:Name="dataGrid"
                         Grid.Row="0"
                         SelectionMode="Single"
                         ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource }"  
                         >
      </syncfusion:SfDataGrid>
    </Grid> 
      </ContentPage.Content>
</ContentPage>
public partial class MainPage : ContentPage
{
    DataPagerViewModel viewModel;
	SfDataGrid dataGrid;
	SfDataPager pager;
	public NormalPage()
	{
		InitializeComponent();
        viewModel = new DataPagerViewModel();
        pager = new SfDataPager();
		pager.PageSize = 15;
		pager.NumericButtonCount = 10;
		pager.PageCount = 10;
        pager.UseOnDemandPaging = true
        pager.OnDemandLoading += dataPager_OnDemandLoading;
        dataGrid = new SfDataGrid();
		dataGrid.ItemsSource = pager.PagedSource;
		Grid grid = new Grid();
		grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
		grid.RowDefinitions.Add(new RowDefinition() { Height = 50 });
		grid.Children.Add(dataGrid);
		grid.Children.Add(pager);
		grid.SetRow(dataGrid, 0);
		grid.SetRow(pager, 1);
		this.Content = grid;
	}

  private void dataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs e)
  {
     pager.LoadDynamicItems(e.StartIndex, viewModel.OrdersInfo.Skip(e.StartIndex).Take(e.PageSize));
  }
}

NOTE

In on-demand paging, you should not assign a value to the Source property. Additionally, you have to define an integer value for the PageCount property to generate the required numeric buttons in the view.

When using OnDemandPaging, SfDataPager.PagedSource loads only the current page data. Upon navigation to another page, OnDemandLoading event is fired which loads another set of data, but maintains the previous page data also. When you navigate to the previous page again, OnDemandLoading event is not fired, and the required data maintained in the cache is loaded. However, for further performance enhancement if you do not want to maintain the previous page data, call Syncfusion.Data.PagedCollectionView.ResetCache() in the OnDemandLoading event. ResetCache method call resets the cache except the current page.

To use ResetCache method, follow the code example:

private void dataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs e)
{
     pager.LoadDynamicItems(e.StartIndex, viewModel.OrdersInfo.Skip(e.StartIndex).Take(e.PageSize));
     (pager.PagedSource as PagedCollectionView).ResetCache();
}

Numeric button shapes

The SfDataPager allows you to change the shape of the buttons using the SfDataPager.ButtonShape property.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                         ButtonShape="Rectangle"
                         PageSize="15"
                         Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.ButtonShape = DataPagerButtonShape.Rectangle;
    }
}

Generating numeric buttons

The SfDataPager allows you to choose the generation mode of numeric buttons using the SfDataPager.NumericButtonsGenerateMode property. The numeric buttons can be generated either automatically in view or by specifying the count directly in the SfDataPager.NumericButtonCount property.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                         NumericButtonsGenerateMode="Auto"
                         PageSize="15"
                         Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.NumericButtonsGenerateMode = DataPagerNumericButtonsGenerateMode.Auto;
    }
}

NOTE

The size of the SfDataPager is automatically adjusted based on the available screen size if the view cannot accommodate the numeric buttons specified in the NumericButtonCount property.

The SfDataPager button is loaded with a default width and height of 40. The default button font size of SfDataPager is 14. You can customize the button size and font size by setting the desired values for the SfDataPager.ButtonSize and SfDataPager.ButtonFontSize properties, respectively.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                   PageSize="15"
                   ButtonSize="60"
                   ButtonFontSize="21"
                   Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.ButtonSize = 60;
        dataPager.ButtonFontSize = 21;
    }
}

Button size and font size of .NET MAUI DataGrid.

Display mode

The visibility of the numeric and navigation buttons can be personalized by using the SfDataPager.DisplayMode property. All the buttons will be visible by default.

Property Value	Description
`None`	Do not display any page buttons.
`First`	Displays only the first page button.
`Last`	Displays only the last page button.
`Previous`	Displays only the previous page button.
`Next`	Displays only the next page button.
`Numeric`	Displays only the numeric page buttons.
`FirstLast`	Displays the first and last page buttons.
`PreviousNext`	Displays the previous and next page buttons.
`FirstLastNumeric`	Displays the first, last and numeric page buttons.
`PreviousNextNumeric`	Displays the previous, next and numeric page buttons.
`FirstLastPreviousNext`	Displays the first, last, previous and next page buttons.
`FirstLastPreviousNextNumeric`	Displays the first, last, numeric, previous and next page buttons.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                   PageSize="15"
                   DisplayMode="FirstLastNumeric"
                   Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.DisplayMode = DataPagerDisplayMode.FirstLastNumeric;
    }
}

Auto-ellipsis mode

The SfDataPager offers support for displaying an ellipsis button at the beginning and end of the numeric buttons when the scroll view contains additional numeric buttons before or after the currently selected numeric button. It can be customized by using the SfDataPager.AutoEllipsisMode property.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                   PageSize="15"
                   AutoEllipsisMode="After"
                   Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
    }
}

Auto-ellipsis mode .NET MAUI DataGrid.

Customize the auto-ellipsis text

The auto-ellipsis text can be customized by using the SfDataPager.AutoEllipsisText property. The default value of AutoEllipsisText is set to ….

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                   PageSize="15"
                   AutoEllipsisMode="After"
                   AutoEllipsisText="***"
                   Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
        dataPager.AutoEllipsisText = "***";
    }
}

Programmatically switch pages

Move to the first page

The data pager allows the users to programmatically navigate to the first page using the MoveToFirstPage() method.

Move to the last page

The data pager allows the users to programmatically navigate to the last page using the MoveToLastPage() method.

Move to to the next page

The data pager allows the users to programmatically navigate to the next page using the MoveToNextPage() method.

Move to to the previous page

The data pager allows the users to programmatically navigate to the previous page using the MoveToPreviousPage() method.

Move to page

The data pager allows the users to programmatically navigate to the desired page using the MoveToPage(Int32) method. Users can also able to navigate to the page with animation using the MoveToPage(Int32, Int32, Boolean) method.

Orientation

By default, SfDataPager displays the button in the horizontal direction. However, the SfDataPager.Orientation property allows users to customize the data pager to display the buttons vertically or horizontally according to their preferences.

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                   PageSize="15"
                   Orientation="Vertical"
                   Source="{Binding OrdersInfo}">
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.Orientation = DataPagerScrollOrientation.Vertical;
    }
}

Events

PageChanging

The PageChanging event is triggered when the user navigation form one page to another page begins. SfDataPager.PageChangingEventArgs contains the following members, which provide the information for PageChanging event:

OldPageIndex - Gets the current page index from which the page is navigating
.
NewPageIndex - Gets the new page index to which the page is navigating.

C#
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.PageChanging += DataPager_PageChanging;
    }

    private void DataPager_PageChanging(object sender, Syncfusion.Maui.DataGrid.DataPager.PageChangingEventArgs e)
    {
        // you can get the old page index and new page index here.
    }
}

PageChanged

The PageChanged event is triggered when the user navigates form one page to another page. SfDataPager.PageChangedEventArgs contains the following members, which provide the information for PageChanged event:

OldPageIndex - Gets the current page index from which the page is navigated.
NewPageIndex - Gets the new page index to which the page is navigated.

C#
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.PageChanged += DataPager_PageChanged;
    }

    private void DataPager_PageChanged(object sender, Syncfusion.Maui.DataGrid.DataPager.PageChangedEventArgs e)
    {
        // you can get the old page index and new page index here.
    }
}

Customize the appearance

The data pager allows you to change its appearance by modifying the properties of DataPagerStyle and then assigning it to the SfDataPager.DefaultStyle property.

The SfDataPager enables customization of its appearance using the following properties:

Property	Description
`DataPagerBackgroundColor`	Gets or sets the background color of the SfDataPager.
`NavigationButtonBackgroundColor`	Gets or sets the background color of the navigation buttons.
`NavigationButtonDisableBackgroundColor`	Gets or sets the background color of the navigation buttons when it is disabled.
`NavigationButtonDisableIconColor`	Gets or sets the icon color of the navigation buttons when it is disabled.
`NavigationButtonIconColor`	Gets or sets the icon color of the navigation buttons.
`NumericButtonBackgroundColor`	Gets or sets the background color for the numeric buttons.
`NumericButtonSelectionBackgroundColor`	Gets or sets the background color of the numeric button that is currently selected.
`NumericButtonSelectionTextColor`	Gets or sets the text color of the numeric button that is currently selected.
`NumericButtonTextColor`	Gets or sets the text color of the numeric buttons.
`FirstPageButtonTemplate`	Gets or sets the template for the first page navigation button.
`LastPageButtonTemplate`	Gets or sets the template for the last page navigation button.
`NextPageButtonTemplate`	Gets or sets the template for the next page navigation button.
`PreviousPageButtonTemplate`	Gets or sets the template for the previous page navigation button.

To apply custom style, follow the code example:

XAML
C#
<pager:SfDataPager x:Name="dataPager"
                         PageSize="15"
                         Source="{Binding OrdersInfo}">
                <pager:SfDataPager.DefaultStyle >
                    <pager:DataPagerStyle NumericButtonSelectionBackgroundColor="Pink"
                                          NumericButtonBackgroundColor="Purple"
                                          NavigationButtonBackgroundColor="LightBlue"
                                          NavigationButtonIconColor="Teal">
                    </pager:DataPagerStyle>
                </pager:SfDataPager.DefaultStyle>
</pager:SfDataPager>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        dataPager.DefaultStyle.NumericButtonSelectionBackgroundColor = Colors.Red;
        dataPager.DefaultStyle.NumericButtonBackgroundColor = Colors.GreenYellow;
        dataPager.DefaultStyle.NavigationButtonBackgroundColor = Colors.Black;
        dataPager.DefaultStyle.NavigationButtonIconColor = Colors.White;
    }
}

The following picture shows the customize styles of data pager:

Data pager style .NET MAUI DataGrid.

Limitations

UI Filtering is not supported. You can code at the application level to filter the data.
Data processing operations (Sorting, Grouping) are performed only on the current page.
Deleting is not supported. You can code to delete a row at the application level.
Only the navigated pages are exported when ‘OnDemandPaging’ is enabled. If the cache of the navigated page is cleared, then the corresponding page will not be exported.