Row Height Customization in .NET MAUI DataGrid (SfDataGrid)

27 Jun 20245 minutes to read

The .NET MAUI DataGrid provides an option to customize the header row height and the row height of all the grids or a particular row. To achieve this customization, see the following sections:

To get start quickly with customize the row height in .NET MAUI DataGrid, you can check on this video:

Customize the header row height

The DataGrid allows you to customize the height of the header row by setting the SfDataGrid.HeaderRowHeight pproperty. The default value of this property is 55. This property responds to runtime changes so that it can be customized. Setting SfDatagrid.HeaderRowHeight to zero will collapse the header row in the view.

To customize the header row height, follow the code example:

<syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding OrderInfoCollection }" HeaderRowHeight="60" />
//Customizing row height in SfDataGrid
dataGrid.HeaderRowHeight = 60;

Customize the row height for all data rows

The DataGrid allows you to customize the height of data rows in the scrolling region by setting the SfDataGrid.RowHeight property. The default value of this property is 47. This property responds to runtime changes so that it can be customized. Setting SfDataGrid.RowHeight to zero will collapse all rows in the grid.

To customize header row height, follow the code example:

<syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding OrderInfoCollection }" RowHeight="60" />
//Customizing row height in SfDataGrid
dataGrid.RowHeight = 60;

Auto fit the data rows based on content

The height of a row can be customized based on its cell content by using the SfDatagrid.QueryRowHeight event and the SfDatagrid.GetIntrinsicRowHeight method. The SfDatagrid.QueryRowHeight event returns the row height on demand. The SfDatagrid.GetIntrinsicRowHeight method returns the height of the row based on the content.

The GetIntrinsicRowHeight method provides some properties to customize the autofit calculation,

excludedColumns – By default, the GetIntrinsicRowHeight method calculates the row height based on all columns. To skip the specific columns from the row height calculation, add that column’s DataGridColumn.MappingName to the excludeColumns collection.

canIncludeHiddenColumns – The hidden columns (DataGridColumn.visible is false) can also be considered for the row height calculation by setting the canIncludeHiddenColumns as true.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage   
    . . .
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" >

    <syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding OrderInfoCollection }" QueryRowHeight="DataGrid_QueryRowHeight" />

</ContentPage>
private void DataGrid_QueryRowHeight(object sender, DataGridQueryRowHeightEventArgs e)
{
    if (e.RowIndex != 0)
    {
        //Calculates and sets the height of the row based on its content.
        e.Height = e.GetIntrinsicRowHeight(e.RowIndex);
        e.Handled = true;
    }
}

MAUI DataGrid AutoFit based on row content

Calculate height based on certain columns

The datagrid allows you to calculate the row height excluding certain columns using the ExcludeColumns property which is available as argument in GetIntrinsicRowHeight method.

The following code example illustrates calculating the height of grid rows based on certain columns:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage   
    . . .
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" >

    <syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding OrderInfoCollection }" QueryRowHeight="DataGrid_QueryRowHeight" />

</ContentPage>
private void DataGrid_QueryRowHeight(object sender, DataGridQueryRowHeightEventArgs e)
{
    if(e.RowIndex > 0)
    {
        e.Height = e.GetIntrinsicRowHeight(e.RowIndex,false,new List<string> { "Description" });        
        e.Handled = true;
    }
}

Customize header row height based on header content

The DataGrid allows you to customize the height of the header row based on its content using the SfDatagrid.QueryRowHeight event and SfDatagrid.GetIntrinsicRowHeight method.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage   
    . . .
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" >

    <syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding OrderInfoCollection }" QueryRowHeight="DataGrid_QueryRowHeight" />

</ContentPage>
private void DataGrid_QueryRowHeight(object sender, DataGridQueryRowHeightEventArgs e)
{
    if (e.RowIndex == 0)
    {
        e.Height = e.GetIntrinsicRowHeight(e.RowIndex);
        e.Handled = true;
    }
}