Paging in MAUI DataGrid (SfDataGrid)

7 Jul 202624 minutes to read

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. Setting PageSize to 0 will throw an ArgumentException.

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"
             xmlns:local="clr-namespace:DataGridUGDemo"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:pager="clr-namespace:Syncfusion.Maui.DataGrid.DataPager;assembly=Syncfusion.Maui.DataGrid"
             x:Class="DataGridUGDemo.MainPage">

    <ContentPage.BindingContext>
        <local:OrderInfoViewModel x:Name = "viewModel"/>
    </ContentPage.BindingContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height = "*" />
            <RowDefinition Height = "Auto" />
        </Grid.RowDefinitions>
        <Border Grid.Row = "1" Padding = "5">
            <pager:SfDataPager x:Name = "dataPager"
                               PageSize = "15" 
                               NumericButtonCount = "10"
                               Source = "{Binding Orders}">
            </pager:SfDataPager>
        </Border>
        <syncfusion:SfDataGrid x:Name = "dataGrid"
                               Grid.Row = "0"
                               ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
        </syncfusion:SfDataGrid>
    </Grid>
</ContentPage>
using Syncfusion.Maui.DataGrid;
using Syncfusion.Maui.DataGrid.DataPager;

public partial class MainPage : ContentPage
{
    // Note: The XAML approach above is the recommended method. This C# example demonstrates
    // programmatic creation for scenarios where declarative XAML markup is not available.
    public NormalPage()
    {
        InitializeComponent();
        SfDataPager dataPager = new SfDataPager();
        OrderInfoViewModel viewModel = new OrderInfoViewModel();
        dataPager.PageSize = 15;
        dataPager.NumericButtonCount = 10;
        dataPager.Source = viewModel.Orders;
        
        SfDataGrid dataGrid = new SfDataGrid();
        dataGrid.ItemsSource = dataPager.PagedSource;
        
        Border border = new Border();
        border.Padding = new Thickness(5);
        border.Content = dataPager;
        
        Grid grid = new Grid();
        grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
        grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
        grid.Children.Add(dataGrid);
        grid.Children.Add(border);
        grid.SetRow(dataGrid, 0);
        grid.SetRow(border, 1);
        this.Content = grid;
    }
}

The following screenshot shows the result of running 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.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           NumericButtonCount = "10"
                           Source = "{Binding Orders}"
                           OnDemandLoading="dataPager_OnDemandLoading"
                           UseOnDemandPaging="True">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.NumericButtonCount = 10;
dataPager.Source = viewModel.Orders;
dataPager.UseOnDemandPaging = true;
dataPager.OnDemandLoading += dataPager_OnDemandLoading;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

C#
private void dataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs e)
{
    dataPager.LoadDynamicItems(e.StartIndex, viewModel.Orders.Skip(e.StartIndex).Take(e.PageSize));
}

Note: In on-demand paging, you should not assign a value to the Source property. Instead, set the PageCount property to the total number of pages needed to display all data. This generates the required numeric buttons in the view. For example, if you have 1000 items and a page size of 15, set PageCount to 67.

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 in cache. When you navigate to the previous page again, OnDemandLoading event is not fired, and the cached data is loaded directly.

For improved performance when working with very large datasets or limited memory, you can call Syncfusion.Data.PagedCollectionView.ResetCache() in the OnDemandLoading event to discard cached pages except the current one. This reduces memory consumption but will require reloading data when navigating back to previously-viewed pages.

To use ResetCache method, follow the code example:

C#
private void dataPager_OnDemandLoading(object sender, OnDemandLoadingEventArgs e)
{
     dataPager.LoadDynamicItems(e.StartIndex, viewModel.Orders.Skip(e.StartIndex).Take(e.PageSize));
     (dataPager.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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           ButtonShape = "Rectangle"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.ButtonShape = DataPagerButtonShape.Rectangle;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           NumericButtonsGenerateMode = "Auto"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.NumericButtonsGenerateMode = DataPagerNumericButtonsGenerateMode.Auto;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           ButtonSize = "60"
                           ButtonFontSize = "21"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.ButtonSize = 60;
dataPager.ButtonFontSize = 21;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

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. The default value is FirstLastPreviousNextNumeric, which displays all navigation and numeric buttons.

Property Value	Description
`None`	Displays no 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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           DisplayMode = "FirstLastNumeric"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.DisplayMode = DataPagerDisplayMode.FirstLastNumeric;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

Auto-ellipsis mode

The AutoEllipsisMode property controls whether ellipsis buttons appear for navigating large ranges of page numbers, whereas the DisplayMode property controls which button types (First, Last, Previous, Next, Numeric) are visible. 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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           AutoEllipsisMode = "After"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           AutoEllipsisMode="After"
                           AutoEllipsisText="***"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.AutoEllipsisMode = DataPagerEllipsisMode.After;
dataPager.AutoEllipsisText = "***";
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

Programmatically switch pages

Move to the first page

The MoveToFirstPage() method allows you to programmatically navigate to the first page.

Move to the last page

The MoveToLastPage() method allows you to programmatically navigate to the last page.

Move to the next page

The MoveToNextPage() method allows you to programmatically navigate to the next page.

Move to the previous page

The MoveToPreviousPage() method allows you to programmatically navigate to the previous page.

Move to page

The MoveToPage(Int32) method allows you to programmatically navigate to a specific page. You can also navigate to a page with animation using the MoveToPage(Int32, Int32, Boolean) method, where the second parameter specifies the duration in milliseconds and the Boolean parameter indicates whether to animate the transition.

Boundary Behavior: When calling MoveToNextPage() on the last page, the pager remains on the last page. Similarly, calling MoveToPreviousPage() on the first page keeps the pager on the first page. These methods handle boundary conditions gracefully without throwing exceptions.

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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width = "*" />
        <ColumnDefinition Width = "Auto" />
    </Grid.ColumnDefinitions>
    <Border Grid.Column = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           Orientation="Vertical"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Column = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.Orientation = DataPagerScrollOrientation.Vertical;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetColumn(dataGrid, 0);
grid.SetColumn(border, 1);
this.Content = grid;

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.

XAML
C#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           PageChanging = "DataPager_PageChanging"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.PageChanging += DataPager_PageChanging;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

C#
private void DataPager_PageChanging(object sender, Syncfusion.Maui.DataGrid.DataPager.PageChangingEventArgs e)
{
    int oldPageIndex = e.OldPageIndex;
    int newPageIndex = e.NewPageIndex;
    // Perform any operations before the page changes
}

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.

XAML
C#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*" />
        <RowDefinition Height = "Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row = "1" Padding = "5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           PageChanged = "DataPager_PageChanged"
                           Source = "{Binding Orders}">
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.PageChanged += DataPager_PageChanged;
dataPager.Source = viewModel.Orders;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

C#
private void DataPager_PageChanged(object sender, Syncfusion.Maui.DataGrid.DataPager.PageChangedEventArgs e)
{
    int oldPageIndex = e.OldPageIndex;
    int newPageIndex = e.NewPageIndex;
    // Perform any operations after the page has changed
}

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#
<ContentPage.BindingContext>
    <local:OrderInfoViewModel x:Name = "viewModel"/>
</ContentPage.BindingContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" 
            Padding="5">
        <pager:SfDataPager x:Name = "dataPager"
                           PageSize = "15" 
                           Source = "{Binding Orders}">
            <pager:SfDataPager.DefaultStyle >
                <pager:DataPagerStyle NumericButtonSelectionBackgroundColor = "#cdb4db"
                                      NumericButtonBackgroundColor = "#ffc8dd"
                                      NavigationButtonBackgroundColor = "#90e0ef"
                                      NavigationButtonIconColor = "#0077b6"
                                      NavigationButtonDisableBackgroundColor = "#caf0f8"
                                      NavigationButtonDisableIconColor = "#9a8c98">
                </pager:DataPagerStyle>
            </pager:SfDataPager.DefaultStyle>
        </pager:SfDataPager>
    </Border>
    <syncfusion:SfDataGrid x:Name = "dataGrid"
                           Grid.Row = "0"
                           ItemsSource = "{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </syncfusion:SfDataGrid>
</Grid>
SfDataPager dataPager = new SfDataPager();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataPager.PageSize = 15;
dataPager.Source = viewModel.Orders;

DataPagerStyle dataPagerStyle = new DataPagerStyle();
dataPagerStyle.NumericButtonSelectionBackgroundColor = Color.FromArgb("#CDB4DB");
dataPagerStyle.NumericButtonBackgroundColor = Color.FromArgb("#FFC8DD");
dataPagerStyle.NavigationButtonBackgroundColor = Color.FromArgb("#90E0EF");
dataPagerStyle.NavigationButtonIconColor = Color.FromArgb("#0077B6");
dataPagerStyle.NavigationButtonDisableBackgroundColor = Color.FromArgb("#CAF0F8");
dataPagerStyle.NavigationButtonDisableIconColor = Color.FromArgb("#9A8C98");
dataPager.DefaultStyle = dataPagerStyle;

SfDataGrid dataGrid = new SfDataGrid();
dataGrid.ItemsSource = dataPager.PagedSource;

Border border = new Border();
border.Padding = new Thickness(5);
border.Content = dataPager;

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.Children.Add(dataGrid);
grid.Children.Add(border);
grid.SetRow(dataGrid, 0);
grid.SetRow(border, 1);
this.Content = grid;

The following picture shows the customize styles of data pager:

Data pager style .NET MAUI DataGrid.

Limitations

UI Filtering is not supported. You can implement filtering at the application level.
Data processing operations (Sorting, Grouping) are performed only on the current page data.
Row deletion is not supported through the UI. You can implement deletion at the application level.
Only navigated pages are exported when OnDemandPaging is enabled. If you call ResetCache() to clear a page’s data, that page will not be included in exports.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Paging in MAUI DataGrid (SfDataGrid)

Normal paging

On-Demand Paging

Numeric button shapes

Generating numeric buttons

Display mode

Auto-ellipsis mode

Customize the auto-ellipsis text

Programmatically switch pages

Move to the first page

Move to the last page

Move to the next page

Move to the previous page

Move to page

Orientation

Events

PageChanging

PageChanged

Customize the appearance

Limitations

Paging in MAUI DataGrid (SfDataGrid)

Normal paging

On-Demand Paging

Numeric button shapes

Generating numeric buttons

Customizing button size and font size of pager buttons

Display mode

Auto-ellipsis mode

Customize the auto-ellipsis text

Programmatically switch pages

Move to the first page

Move to the last page

Move to the next page

Move to the previous page

Move to page

Orientation

Events

PageChanging

PageChanged

Customize the appearance

Limitations