We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfDataGrid |
Published Date: February 14, 2017 |
Last Revised Date: June 22, 2021

SfDataGrid 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

 

Sample Link

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

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Thomas Carney
Feb 23, 2021

This doesn't seem to be working anymore. Doing this exact code I get an IndexOutOfRangeException.

Reply
Thomas Carney
Feb 23, 2021

I get the exception on GetRowHeight(e.RowIndex) to get more precise

Pradeep Kumar Balakrishnan [Syncfusion]
Feb 24, 2021

Hi Thomas,

Thank you for using Syncfusion controls.

We have checked the reported issue “Application crashed when calling DataGrid helper method to calculate row height “dataGrid.GetRowHeight(e.RowIndex)” in Xamarin forms” unfortunately, we cannot be able to replicate the reported issue, and it is working fine from our end. Checked with Group summary, Table summary and unbound row use cases. We have attached the tested sample for your reference in the following link. Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridDemo519449693

Provide the following details to validate the reported issue further. • Complete code snippet of DataGrid settings. • Xamarin and Syncfusion product version. • Issue reproducing platform at your end.

If possible, please check the attached sample from your end and let us know the issue persist in the provided sample as well? If not kindly modify the sample based on your scenario and revert to us with the details. It will be helpful for us to check on it and provide you the solution.

Regards, Pradeep Kumar B

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile