Row Height Customization
This section explains you how to customize the height of row in on demand based on all columns data or certain column data.
QueryRowHeight
QueryRowHeight is the event that returns row heights in demand. This is raised for the row that comes to view. Refer to the following code example for the QueryRowHeight event.
// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
/// <summary>
/// The event that is used to set height of row on-demand,
/// </summary>
/// <param name="sender">Gets the object that raising this event</param>
/// <param name="e">QueryRowHeightEventArgs</param>
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
}This event receives two arguments namely the sender that handles the SfDataGrid and the QueryRowHeightEventArgs. The QueryRowHeightEventArgs has the following properties.
- RowIndex: The property RowIndex helps you identify the particular row’s index.
- Height: This property sets and returns the row height in demand. Default line size of the row
Height is 45d.
- Handled: This property decides whether the specified height can be set to row or not. Default value is false. When this event is not handled, the decided height is not set to the row.
The following is the code example of the QueryRowHeight event.
<syncfusion:SfDataGrid x:Name="sfDataGrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
Width="900"
NavigationMode="Cell"
AllowEditing="True"
ShowRowHeader="True"
AutoExpandGroups="True"
AllowResizingColumns="True"
ShowGroupDropArea="True"
ItemsSource="{Binding OrderDetails}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Customer ID"
MappingName="CustomerID"
TextAlignment="Left"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Product Name"
MappingName="ProductName"
TextWrapping="Wrap"/> </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
if(e.RowIndex == 1) //Sets Height to the first row.
{
e.Height = 55;
e.Handled = true;
}
}The following screenshot displays the output.
AutoRowHeight
By default, the RowHeight is not adjusted based on the text located in the GridCell. When large text in collection is loaded to the SfDataGrid and columns have defined Text Wrapping, it looks like the content is wrapped and clipped with the default row height.
SfDataGrid enables fitting the height of the row based on its content on-demand based on all columns or certain columns of SfDataGrid by calling GetAutoRowHeight method in QueryRowHeight event. This improves the readability of the content and occurs on-demand basis and does not affect the loading performance of the SfDataGrid.
GetAutoRowHeight
The GetAutoRowHeight method returns true or false by which the row height can be calculated. It returns false for index that does not belong to the recorded rows. This method is specifically implemented in the GridColumnSizer class. It calculates height by the column that has large data. The following are the parameters for calculation of height.
- RowIndex: The index of the row for which the height is to be resized based on record.
- GridRowSizingOptions: This option allows you to customize the row height calculation based on the following properties:
- ExcludeColumns.
- CanIncludeHiddenColumns.
ExcludeColumns: This is a type of string collection. Apart from the ExcludeColumns from the ItemsSource, all other columns added in the list of string collection are not taken for calculation. The ExcludeColumns helps you reduce the count of loop run for height calculation. By default GetAutoRowHeight method calculates row height based on all columns data. You can calculate height for a row, based on the column you choose.
CanIncludeHiddenColumns: This is the Boolean parameter and the default value is false. If you enable this property it allows the hidden column to calculate the resizing of rows.
RowHeight: You can get the calculated height from the out rowHeight parameter. The returned height is based on the large data in columns for the queried row.
You can get the calculated height of rows through the out parameter (rowHeight) of the GetAutoRowHeight method and then assign it to the Height property of the QueryRowHeightEventArgs in the QueryRowHeight event.
The following code example explains how to use the GetAutoRowHeight method in the QueryRowHeight event.
<syncfusion:SfDataGrid x:Name="sfDataGrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
Width="900"
NavigationMode="Cell"
AllowEditing="True"
ShowRowHeader="True"
AutoExpandGroups="True"
AllowResizingColumns="True"
ShowGroupDropArea="True"
ItemsSource="{Binding OrderDetails}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Customer ID"
MappingName="CustomerID"
TextAlignment="Left"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Product Name"
MappingName="ProductName"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Order Id"
MappingName="OrderID"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Contact Number"
TextWrapping="Wrap"
MappingName="ContactNumber"/>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>As a result of TextWrapping, the text is wrapped but the height is not increased as illustrated in the following screenshot.
By adding the following code example, you can improve the readability of the content.
public partial class MainWindow
{
// The option that decides Calculation of all the columns or certain columns with or without Hidden columns.
GridRowSizingOptions gridRowResizingOptions = new GridRowSizingOptions();
//Gets the calculated height from the GetAutoRowHeight method.
double Height = double.NaN;
public MainWindow()
{
InitializeComponent();
// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
}
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
if (this.sfDataGrid.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out Height))
{
// This code is run when the row index passes for record alone.
e.Height = Height;
e.Handled = true;
}
}
}Now, you can see that the height of the row is resized based on the large text content in the following output.
The height of the row is calculated based on all the column values. With the GridRowSizingOptions, you can restrict the calculation to only a few columns that have large data instead of doing it for all the columns. You can also improve the performance of row height calculation with the GridRowSizingOptions.
The following code example explains how to use the GridRowSizingOptions.
<syncfusion:SfDataGrid x:Name="sfDataGrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
Width="900"
NavigationMode="Cell"
AllowEditing="True"
ShowRowHeader="True"
AutoExpandGroups="True"
AllowResizingColumns="True"
ShowGroupDropArea="True"
ItemsSource="{Binding OrderDetails}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Customer ID"
MappingName="CustomerID"
TextAlignment="Left"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Product Name"
MappingName="ProductName"
IsHidden="True"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Order Id"
MappingName="OrderID"
TextWrapping="Wrap"/>
<syncfusion:GridTextColumn HeaderText="Contact Number"
TextWrapping="Wrap"
MappingName="ContactNumber"/>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>The columns that need not be included in the calculation of height can be added to the ExcludeColumns list of the GridRowSizingOptions.
public partial class MainWindow
{
// The options that decide Calculation by all columns or certain columns, with or without Hidden columns.
GridRowSizingOptions gridRowResizingOptions = new GridRowSizingOptions();
//Gets the calculated height from the GetAutoRowHeight method.
double Height = double.NaN;
// The list contains the column names that is excluded from the height calculation in GetAutoRowHeight method.
List<string> excludeColumns = new List<string>();
public MainWindow()
{
InitializeComponent();
// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
excludeColumns.Add("CustomerID");
excludeColumns.Add("OrderID");
excludeColumns.Add("ContactNumber");
// The above columns are excluded from calculation.
gridRowResizingOptions.ExcludeColumns = excludeColumns;
// Hidden columns are also included in the height calculation.
gridRowResizingOptions.CanIncludeHiddenColumns = true;
}
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
if (this.sfDataGrid.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out Height))
{
// This code is run when the row index passes for record alone.
e.Height = Height;
e.Handled = true;
}
}
}In the above code example, CustomerID, ContactName and ContactTitle are excluded from the calculation and only the CompanyName is taken into account. When the CompanyName column is hidden and when you want the hidden column also to participate in the Height calculation, you can set the CanIncludeHiddenColumns to true. The following display depicts the output of above codes. In the following image, the row is resized even though the column is hidden.
How to Customize the Height of Header Row
The SfDataGrid provides support to customize the height of the Header row also. You can achieve this by the following ways:
By using HeaderRowHeight Property
The SfDataGrid control provides direct property to set height for the header row. You have to enable the HeaderRowHeight property in the SfDataGrid definition.
<syncfusion:SfDataGrid x:Name="sfDataGrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
Width="900"
NavigationMode="Cell"
AllowEditing="True"
ShowRowHeader="True"
AutoExpandGroups="True"
HeaderRowHeight="55"
AllowResizingColumns="True"
ShowGroupDropArea="True"
ItemsSource="{Binding OrderDetails}"/>By using QueryRowHeight Event
By using QueryRowHeight event, you can match the RowIndex from QueryRowHeightEventArgs with GetHeaderIndex () helper method that returns index of the Header. You can refer to the following link to get more resolver methods of the SfDataGrid.
NOTE
Need to add Syncfusion.UI.Xaml.Grid.Helper namespace to use GetHeaderIndex () method.
The following code example explains how to customize the header rowHeight,
<syncfusion:SfDataGrid x:Name="sfDataGrid"
AutoGenerateColumns="False"
ColumnSizer="Star"
Width="900"
NavigationMode="Cell"
AllowEditing="True"
ShowRowHeader="True"
AutoExpandGroups="True"
AllowResizingColumns="True"
ShowGroupDropArea="True"
ItemsSource="{Binding OrderDetails}"/>// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
// GetHeaderIndex returns the index of header row.
if (sfDataGrid.GetHeaderIndex() == e.RowIndex)
{
e.Height = 55;
e.Handled = true;
}
}The following screenshot displays the output.
How can the row height auto grow with text length
When you utilize the special feature AutoRowHeight support of the SfDataGrid control, the row height grows automatically with the text length you type. You need to raise the QueryRowHeight event and invalidate the row when you complete the editing.
If you want the row to be resized with text that you have typed after editing, you can call InValidateRowHeight (int RowIndex) method in the CurrentCellEndEdit event of the SfDataGrid and it resets the row height internally.
Then call the InvalidateMeasureInfo method in VisualContainer to refresh the view. The QueryRowHeight event is called again for that row alone and it resizes the row based on the edited content. This measures the row again and arrange it for you.
When you pass the row index to the InValidateRowHeight method, that specific rowIndex is added to the Dictionary as a reference to calculate the height of that row again when the InvalidateMeasureInfo is called. Then it raises the QueryRowHeight event for row index that you have invalidated.
NOTE
Need to add this Syncfusion.UI.Xaml.Grid.Helpers namespace to use the InvalidateMeasureInfo method.
// The options that decide the Calculation by all columns or certain columns with or without the Hidden columns.
GridRowSizingOptions gridRowResizingOptions = new GridRowSizingOptions();
//Gets the calculated height from the GetAutoRowHeight method.
double Height = double.NaN;
// Hooks event for the SfDataGrid.
sfDataGrid.CurrentCellEndEdit += sfDataGrid_CurrentCellEndEdit;
void sfDataGrid_CurrentCellEndEdit(object sender, CurrentCellEndEditEventArgs args)
{
sfDataGrid.InvalidateRowHeight(args.RowColumnIndex.RowIndex);
sfDataGrid.GetVisualContainer().InvalidateMeasureInfo();
}
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
if (this.sfDataGrid.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out Height))
{
// This code is run when the row index passes for record alone.
e.Height = Height;
e.Handled = true;
}
}Run the above code example. Edit with large text and complete editing. Press Tab or Enter key to end the edit mode. The following screenshot displays the output.
NOTE
If the InvalidateMeasureInfo method is not called, SfDataGrid does not refresh automatically. You need to explicitly refresh the SfDataGrid though this method.
How to customize the Height of the TableSummaryRow control
The SfDataGrid control provides support to customize the height of the Table summary row. By utilizing the QueryRowHeight event, you can check whether the RowIndex is a table summary index from the QueryRowHeightEventArgs or not, by using helper method IsTableSummaryIndex in GridIndexResolver class. You can refer to the following link to get more resolver methods of the SfDataGrid.
NOTE
Need to use the namespace Syncfusion.UI.Xaml.Grid.Helper.
The following code example explains how to customize the Height of TableSummaryRow control in the QueryRowHeight event.
// Hooks event for the SfDataGrid.
sfDataGrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
void sfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
// IsTableSummaryIndex returns true or false for a RowIndex. If it is true, the assigned height is applied to the header.
if(sfDataGrid.IsTableSummaryIndex(e.RowIndex))
{
e.Height = 55;
e.Handled = true;
}
}The following screenshot displays the output of customized TableSummaryRow control Height.
Limitations
- Details View is not supported with QueryRowHeight event. If you have Details View with the QueryRowHeight event, the event does not raise any record row. If you have TableSummary with Details View, then you can resize the TableSummary alone.
- As of now there is no support for Printing.
- The column width expands based on the content when you try to fit that column, but it does not wrap the text in view. If you refresh the SfDataGrid also, the row is not resized.