How to customize the height of the datagrid based on row count using the SfDataPager in MAUI DataGrid?

The .NET MAUI DataGrid supports customizing its height based on the row count using DataPager.

XAML
The DataGrid, ComboBox, and SfDataPager are positioned within a grid layout. The page count can be customized using the SfComboBox. The datapager enables us to present the data in a paginated format.

<Grid RowDefinitions="Auto,Auto">
    <sfDataGrid:SfDataGrid x:Name="dataGrid" 
                            Grid.Row="0" 
                            HeightRequest="550"
                            ColumnWidthMode="Auto" 
                            MinimumHeightRequest="0"
                            GridLinesVisibility="Both"
                            HeaderGridLinesVisibility="Both"
                            ItemsSource="{Binding Source={x:Reference dataPager}, Path=PagedSource}">
    </sfDataGrid:SfDataGrid>
    <StackLayout Margin="10,0" Grid.Row="1"
                Orientation="Horizontal"
                VerticalOptions="Start">
        <sfComboBox:SfComboBox  x:Name="comboBox">
            <sfComboBox:SfComboBox.ItemsSource>
                <x:Array Type="{x:Type x:Int32}">
                    <x:Int32>5</x:Int32>
                    <x:Int32>10</x:Int32>
                    <x:Int32>15</x:Int32>
                    <x:Int32>20</x:Int32>
                </x:Array>
            </sfComboBox:SfComboBox.ItemsSource>

            <sfComboBox:SfComboBox.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding}" 
                            VerticalTextAlignment="Center" 
                            Padding="10"
                            FontSize="16"/>
                    </ViewCell>
                </DataTemplate>
            </sfComboBox:SfComboBox.ItemTemplate>
        </sfComboBox:SfComboBox>

        <sfDataPager:SfDataPager   x:Name="dataPager" WidthRequest="600"
                                ButtonFontSize="12"
                                ButtonSize="24"
                                HorizontalOptions="EndAndExpand"
                                PageSize="5"
                                Source="{Binding Employees}"
                                VerticalOptions="Start" />
    </StackLayout>
</Grid>

C#
We can obtain the visual container property from the datagrid by utilizing the GetVisualContainer() method.

Syncfusion.Maui.DataGrid.VisualContainer visualContainer;
public MainPage()
{
    InitializeComponent();
    visualContainer = dataGrid.GetVisualContainer();
}

We can determine the total height of the rows by utilizing the ExtendedHeight property of the VisualContainer. By comparing the ExtendedHeight and the height of the datagrid, we can set the minimum value as the datagrid height.

dataGrid.HeightRequest = Math.Min(visualContainer.ExtendedHeight, 550);

NOTE: This example can only be utilized for a datagrid with a fixed height.

The height of the datagrid can be customized during the initial loading using the Loaded Event.

private void DataGrid_Loaded(object? sender, EventArgs e)
{
    dataGrid.HeightRequest = Math.Min(visualContainer.ExtendedHeight, 550);
}

The height of the datagrid can be customized when the page changes by utilizing the PageChanged Event.

private void DataPager_PageChanged(object? sender, PageChangedEventArgs e)
{
    dataGrid.HeightRequest = Math.Min(visualContainer.ExtendedHeight, 550);
}

We can utlize the SelectionChanged event of combo box to set the page size for the DataPager.

private void ComboBox_SelectionChanged(object? sender, SelectionChangedEventArgs e)
{
    if (e.AddedItems != null)
    {
        dataPager.PageSize = (int)e.AddedItems[0];
    }
}

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning how to customize the height of the datagrid based on row count using the SfDataPager in MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!