Skip to content

ES-965180 Include documentation for GetVisualContainer() helper method in WINUI-DataGrid #1105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 24, 2025
Merged

ES-965180 Include documentation for GetVisualContainer() helper method in WINUI-DataGrid #1105

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c1c37e
ES-965180 Include documentation for GetVisualContainer() helper metho…
sethuramkumar Jun 23, 2025
c4e40e2
Updated the contents.
sethuramkumar Jun 24, 2025
cab0641
ES-965180 Updated the code changes.
sethuramkumar Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions winui/DataGrid/Row-Height-Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,24 @@ void SfDataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

You can also change the particular row height using [VisualContainer.RowHeights](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.VisualContainer.html#Syncfusion_UI_Xaml_DataGrid_VisualContainer_RowHeights) property.

{% tabs %}
{% highlight c# %}
using Syncfusion.UI.Xaml.DataGrid.Helpers;
this.sfDataGrid.Loaded += SfDataGrid_Loaded;

private void SfDataGrid_Loaded(object sender, RoutedEventArgs e)
{
var visualContainer = this.sfDataGrid.GetVisualContainer();

//Sets Height to the first row.
visualContainer.RowHeights[1] = 50;
visualContainer.InvalidateMeasure();
}
{% endhighlight %}
{% endtabs %}

<img src="Row-Height-Customization_images/winui-datagrid-specfic-row-height.png" alt="Changing RowHeight based on Row Index in WinUI DataGrid" width="100%" Height="Auto"/>

### Limitations
Expand Down Expand Up @@ -157,6 +175,69 @@ Here `CustomerID` and `Country` columns are excluded from height calculation and

<img src="Row-Height-Customization_images/winui-datagrid-auto-fit-row-height.png" alt="Auto Fit RowHeight in WinUI DataGrid" width="100%" Height="Auto"/>

## Reset Row Height at runtime

You can reset height of the particular or all rows in View at runtime to get the updated height from `QueryRowHeight` event handler using below methods. You have to call [InvalidateMeasureInfo](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.VisualContainer.html#Syncfusion_UI_Xaml_DataGrid_VisualContainer_InvalidateMeasureInfo) method of `VisualContainer` to refresh the View.

* [InvalidateRowHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_InvalidateRowHeight_System_Int32_) - Resets the height of particular row.

{% tabs %}
{% highlight c# %}
using Syncfusion.UI.Xaml.DataGrid.Helpers;

this.sfDataGrid.InvalidateRowHeight(1);
this.sfDataGrid.GetVisualContainer().InvalidateMeasureInfo();
{% endhighlight %}
{% endtabs %}


* [RowHeightManager.Reset](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.RowHeightManager.html#Syncfusion_UI_Xaml_DataGrid_RowHeightManager_Reset) - Resets the height for all rows in View.

{% tabs %}
{% highlight c# %}
using Syncfusion.UI.Xaml.DataGrid.Helpers;

this.sfDatagrid.GetVisualContainer().RowHeightManager.Reset();
this.sfDataGrid.GetVisualContainer().InvalidateMeasureInfo();
{% endhighlight %}
{% endtabs %}

### Update Row Height while editing

You can set the height of the row based on the content after editing by refreshing the row height in [SfDataGrid.CurrentCellEndEdit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_CurrentCellEndEdit) event.

You can call the `InvalidateRowHeight` method in [CurrentCellEndEdit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.SfDataGrid.html#Syncfusion_UI_Xaml_DataGrid_SfDataGrid_CurrentCellEndEdit) event to reset the particular row height. Then call the `InvalidateMeasureInfo` method of `VisualContainer` to refresh the view. Now the `QueryRowHeight` event is called again for edited row alone and row height is calculated based on edited content.

{% tabs %}
{% highlight c# %}
using Syncfusion.UI.Xaml.DataGrid.Helpers;

GridRowSizingOptions gridRowResizingOptions = new GridRowSizingOptions();

//To get the calculated height from GetAutoRowHeight method.
double autoHeight = double.NaN;

this.sfDatagrid.QueryRowHeight += sfDataGrid_QueryRowHeight;
this.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.ColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out autoHeight))
{
e.Height = (autoHeight > this.sfDataGrid.RowHeight) ? autoHeight : this.sfDataGrid.RowHeight;
e.Handled = true;
}
}
{% endhighlight %}
{% endtabs %}

## Changes header row height based on its Content

By default, auto height is supported for the headers is `QueryRowHeight` event. If you want to set the auto height to header row alone, you can use the [GetHeaderIndex](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.GridIndexResolver.html#Syncfusion_UI_Xaml_DataGrid_GridIndexResolver_GetHeaderIndex_Syncfusion_UI_Xaml_DataGrid_SfDataGrid_) method to decide whether the row index is header or not in `QueryRowHeight` event.
Expand Down