How to adjust row heights of each row based on their content?

1 min read

Xamarin.Forms DataGrid allows you to customize the row height of grid rows using the SfDataGrid.QueryRowHeight event. You can auto fit a row based on its content by using the SfDataGridHelpers.GetRowHeight method.

Note:

Handled property of the QueryRowHeightEventArgs must be set to true in the QueryRowHeight event for the height changes to take effect.

<sfGrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False"
                        ColumnSizer="Star">
  <sfGrid:SfDataGrid.Columns>
    <sfGrid:GridTextColumn MappingName="OrderId" />
    <sfGrid:GridTextColumn MappingName="CustomerId" />
    <sfGrid:GridTemplateColumn MappingName="CustomerQuery">
      <sfGrid:GridTemplateColumn.CellTemplate>
        <DataTemplate>
          <Label Text="{Binding CustomerQuery}" />
        </DataTemplate>
      </sfGrid:GridTemplateColumn.CellTemplate>
    </sfGrid:GridTemplateColumn>
    <sfGrid:GridTextColumn MappingName="Country" />
  </sfGrid:SfDataGrid.Columns>
</sfGrid:SfDataGrid>

private ViewModel viewModel;
public MainPage()
{
       InitializeComponent();
       viewModel = new ViewModel();
       dataGrid.ItemsSource = viewModel.OrdersInfo;
       dataGrid.QueryRowHeight += DataGrid_QueryRowHeight;
}
 
private void DataGrid_QueryRowHeight(object sender, Syncfusion.SfDataGrid.XForms.QueryRowHeightEventArgs e)
{
        if(e.RowIndex > 0)
        {
             e.Height = SfDataGridHelpers.GetRowHeight(dataGrid, e.RowIndex);
             e.Handled = true;
         }
}

Note:

To skip the header row the condition (e.RowIndex > 0) is added.

Screenshot

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-02-01-15-19-25.png$