.NET MAUI DataPager Ellipsis Mode

The ellipsis appears when the pages are more than the rendered numeric buttons. It provides a hint for the end user and indicates that there are undisplayed pages.

You can specify where the ellipsis is allowed to appear by setting the EllipsisMode (enum of type Telerik.Maui.Controls.DataPager.DataPagerEllipsisMode) property. The EllipsisMode controls whether the numeric buttons for the first/last page are replaced with an ellipsis (...) when there are more pages to the left/right.

The available options for EllipsisMode are:

• None—The ellipsis is disabled.
• Before—Display an ellipsis instead of the first numeric button.
• (Default) After— Display an ellipsis instead of the last numeric button.
• Both—Display an ellipsis on both sides.

The image below shows the ellipsis modes:

Example

Here is a quick example on how you can define the EllipsisMode in the DataPager.

1. Define the DataPager in XAML:

• XAML

<telerik:RadDataPager x:Name="pager" 
                      EllipsisMode="Both" 
                      Source="{Binding Data}">
    <telerik:RadDataPager.BindingContext>
        <local:ViewModel />
    </telerik:RadDataPager.BindingContext>
</telerik:RadDataPager>

2. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Define the ViewModel:

• C#

public class ViewModel
{
    public ViewModel()
    {
        Data = CreateData(200);
    }

    public List<int> Data { get; set; }

    internal static List<int> CreateData(int count)
    {
        List<int> source = new List<int>();

        for (int i = 0; i < count; i++)
        {
            source.Add(i);
        }

        return source;
    }
}

For the DataPager Ellipsis Mode example, go to the SDKBrowser Demo Application and navigate to the DataPager > Features category.

Additional Resources

• .NET MAUI DataPager Product Page
• .NET MAUI DataPager Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap