Efficient Pagination for Faster .NET MAUI DataGrid

TL;DR: Loading large datasets simultaneously in a .NET MAUI DataGrid can lead to slow performance and high memory usage. This guide demonstrates how to implement efficient pagination using the Syncfusion^® DataPager to load data in manageable chunks, enhancing app responsiveness and user experience. Follow the step-by-step instructions to integrate Syncfusion’s DataGrid and DataPager controls, bind your data source, and optimize UI rendering.

Displaying large datasets efficiently is a common challenge in .NET MAUI applications, especially when using DataGrid. Loading all data at once often leads to sluggish UI performance and increased memory consumption, harming user experience. Implementing efficient pagination is key to resolving these issues by retrieving and showing data in manageable portions. This guide walks you through using the Syncfusion^® DataPager control with .NET MAUI DataGrid to boost responsiveness and optimize data loading in your .NET MAUI apps.

Why does Efficient Pagination matter?

Loading an entire dataset into a DataGrid simultaneously can cause slow load times, excessive memory usage, and degraded responsiveness. Efficient pagination reduces server and client load by fetching only a subset of data at a time, making the UI more responsive and scalable for large datasets.

Prerequisites

Before starting, ensure you have the following tools installed

.NET 8 SDK or later
Visual Studio 2022 with the .NET MAUI workload installed
Syncfusion MAUI controls

Step-by-Step guide

Step 1: Set up your MAUI project

Open Visual Studio and select Create a new project. Next, choose . NET MAUI App and click Next. Configure your project by specifying the project name and location, then click Create.

Step 2: Install Syncfusion^® .NET MAUI DataGrid

To add the Syncfusion^® .NET MAUI DataGrid to your project, open the NuGet Package Manager, search for DataGrid, and install the package.

Step 3: Create the user interface

The SfDataPager is bound to the full dataset (OrderInfoCollection). The SfDataGrid obtains its data from SfDataPager.PagedSource, ensuring that only the records for the current page are displayed. The Pager control enables users to navigate between pages, and the SfDataGrid updates dynamically when a different page is selected.

The SfDataGrid displays data from the paginated source (the PagedSource from SfDataPager) and is configured for manual column definition (AutoGenerateColumnsMode\=None). It uses various column types, such as DataGridNumericColumn and DataGridTextColumn, to display order details, including Order ID, Customer ID, Product, City, Order Price, Shipment Price, and Total Price.

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <pager:SfDataPager 
            x:Name="dataPager"
            Grid.Row="1"
            PageSize="10"
            NumericButtonCount="5"
            Source="{Binding OrderInfoCollection}">
        </pager:SfDataPager>

        <syncfusion:SfDataGrid 
            x:Name="dataGrid"
            Grid.Row="0"
            SelectionMode="Single"
            ColumnWidthMode="Auto"
            AutoGenerateColumnsMode="None"
            ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource}">
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:DataGridNumericColumn 
                    HeaderText="Order ID" 
                    Format="D0" 
                    MappingName="OrderID" />
                <syncfusion:DataGridNumericColumn  
                    HeaderText="Customer ID"
                    Format="D0" 
                    MappingName="CustomerID" />
                <syncfusion:DataGridTextColumn  
                    HeaderText="Product" 
                    MappingName="Product" />
                <syncfusion:DataGridTextColumn  
                    HeaderText="City" 
                    MappingName="City" />
                <syncfusion:DataGridNumericColumn  
                    HeaderText="Order Price"
                    Format="C0" 
                    MappingName="OrderPrice" />
                <syncfusion:DataGridNumericColumn  
                    HeaderText="Shipment Price"
                    Format="C0" 
                    MappingName="ShipmentPrice" />
                <syncfusion:DataGridNumericColumn  
                    HeaderText="Total Price"
                    Format="C0" 
                    MappingName="TotalPrice" />
            </syncfusion:SfDataGrid.Columns>
        </syncfusion:SfDataGrid>
    </Grid>
</ContentPage.Content>

Step 4: Bind the data source

The OrderInfo class defines a structured data model for handling order details in a .NET MAUI application, specifically for displaying data in the DataGrid. It includes key attributes such as Order ID, Customer ID, Product Name, City, Order Price, Shipment Price, and Total Price.

The constructor initializes these properties and automatically calculates the TotalPrice by summing the OrderPrice and ShipmentPrice. This approach reduces manual calculations, improves data consistency, and ensures efficient data binding in UI components like DataGrid.

This model is essential for managing and displaying structured order data, playing a crucial role in pagination and data visualization for large datasets in .NET MAUI applications.

OrderInfo.cs (Model)

public class OrderInfo
{
    public int OrderID { get; set; }
    public int CustomerID { get; set; }
    public string Product { get; set; }
    public string City { get; set; }
    public double OrderPrice { get; set; }
    public double ShipmentPrice { get; set; }
    public double TotalPrice { get; set; }

    public OrderInfo(int orderId, int customerId, string product, string city, double orderPrice, double shipmentPrice)
    {
        OrderID = orderId;
        CustomerID = customerId;
        Product = product;
        City = city;
        OrderPrice = orderPrice;
        ShipmentPrice = shipmentPrice;
        TotalPrice = orderPrice + shipmentPrice;
    }
}

ViewModel (StockViewModel)

public class OrderInfoRepository
{
    public ObservableCollection OrderInfoCollection { get; set; }

    public OrderInfoRepository()
    {
        OrderInfoCollection = new ObservableCollection();
        GenerateOrders();
    }

    private void GenerateOrders()
    {
        Random random = new Random();

        string[] cities = 
        { 
            "New York", "Los Angeles", "Chicago", "Houston", "Phoenix", 
            "San Francisco", "Dallas", "Miami", "Atlanta", "Seattle" 
        };

        Dictionary<string, double=""> productPrices = new Dictionary<string, double="">
        {
            { "Laptop", 1200.0 },
            { "Smartphone", 800.0 },
            { "Tablet", 500.0 },
            { "Headphones", 150.0 },
            { "Smartwatch", 200.0 },
            { "Desktop PC", 1000.0 },
            { "Gaming Console", 400.0 },
            { "Fitness Tracker", 100.0 },
            { "Router", 75.0 },
            { "Smart TV", 900.0 },
            { "Drone", 600.0 },
            { "VR Headset", 350.0 },
            { "Graphics Card", 800.0 },
            { "Power Bank", 50.0 },
            { "Projector", 450.0 },
            { "Microphone", 80.0 },
            { "Webcam", 60.0 },
            { "E-reader", 120.0 }
        };

        var products = new List(productPrices.Keys);

        for (int i = 0; i < 100; i++)
        {
            string product = products[i % products.Count];
            double price = productPrices[product];
            double shipmentPrice = random.Next(1, 100) + random.NextDouble();
            string city = cities[i % cities.Length];

            OrderInfoCollection.Add(new OrderInfo(1000 + i, 1700 + i, product, city, price, shipmentPrice));
        }
    }
}

Boost .NET MAUI DataGrid Performance with Efficient Pagination Techniques

GitHub reference

For more details, refer to the GitHub demo.

Conclusion

Thank you for reading this blog! Efficient pagination is essential for managing large datasets in .NET MAUI DataGrid, dramatically improving performance and user experience. Using Syncfusion^® DataPager with .NET MAUI DataGrid allows your app to load data incrementally, reducing memory load and keeping UI interactions smooth. Adopt this approach to build scalable, responsive MAUI applications that handle big data effortlessly.

Explore Syncfusion MAUI controls today and check out the whole sample on GitHub to get started with efficient pagination!

Existing customers can download the new version of Essential Studio^® on the license and downloads page. If you are not a Syncfusion^® customer, try our 30-day free trial to check our incredible features.

If you require assistance, please don’t hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!