Skip to content
Open
Changes from all commits
Commits
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
66 changes: 65 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,66 @@
# Customize-rows-and-columns-in-.NET-MAUI-DataGrid
This sample demonstrate how to customize rows and columns in the .NET MAUI data grid.
In this article, we show how to customize rows and columns in the .NET MAUI DataGrid (SfDataGrid) using freeze panes and dynamic row height. The sample demonstrates freezing the first row and first column, drawing a visible freeze line, and measuring row heights at runtime so longer text displays without clipping. These techniques are helpful when you need key identifiers to stay visible while scrolling horizontally, or when your data includes multi-line fields that should auto-size vertically.

To learn more about these features, check out the official user guide topics:

- [Freeze Panes](https://help.syncfusion.com/maui/datagrid/freeze-panes)
- [Row Height Customization](https://help.syncfusion.com/maui/datagrid/row-height-customization)

## xaml
```
<ContentPage.BindingContext>
<local:TicketInfoRepo />
</ContentPage.BindingContext>

<StackLayout>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding Tickets}"
AutoGenerateColumnsMode="None"
GridLinesVisibility="Both"
HeaderGridLinesVisibility="Both"
FrozenColumnCount="1"
FrozenRowCount="1"
QueryRowHeight="dataGrid_QueryRowHeight">
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle FreezePaneLineColor="Orange" />
</syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridTextColumn MappingName="ID"
HeaderText="ID"></syncfusion:DataGridTextColumn>
<syncfusion:DataGridTextColumn MappingName="CustomerName"
HeaderText="Customer Name"></syncfusion:DataGridTextColumn>
<syncfusion:DataGridTextColumn MappingName="Query"
HeaderText="Query"></syncfusion:DataGridTextColumn>
<syncfusion:DataGridTextColumn MappingName="Country"
HeaderText="Country"></syncfusion:DataGridTextColumn>
</syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>
</StackLayout>
```

## C#
The following event handler calculates row height on demand. By returning the intrinsic height for each row, cells with multi-line content (such as the Query column) will expand to show all text without truncation.
```
private void dataGrid_QueryRowHeight(object sender, Syncfusion.Maui.DataGrid.DataGridQueryRowHeightEventArgs e)
{
e.Height = e.GetIntrinsicRowHeight(e.RowIndex);
e.Handled = true;
}
```

## How it works
- Frozen regions: FrozenRowCount="1" keeps the first row fixed during vertical scrolling, and FrozenColumnCount="1" pins the first column during horizontal scrolling. This is effective for rows/columns that should always remain in view (like headers or key identifiers).
- Visual separator: FreezePaneLineColor in DefaultStyle provides a clear line between the frozen and scrollable areas. In this sample it is set to Orange for strong visibility.
- Manual column definitions: AutoGenerateColumnsMode="None" ensures you fully control column order, headers, and bindings. Here, four DataGridTextColumn elements map to ID, CustomerName, Query, and Country fields.
- Grid lines: GridLinesVisibility="Both" and HeaderGridLinesVisibility="Both" add consistent cell borders for readability in both header and body.
- Adaptive row height: The QueryRowHeight event is triggered for row measurement. Using GetIntrinsicRowHeight(rowIndex) calculates the best height based on actual content and available width. Setting e.Handled = true finalizes the measured height for the grid.

##### Conclusion

I hope you enjoyed learning about how to customize rows and columns in .NET MAUI DataGrid (SfDataGrid).

You can refer to our [.NET MAUI DataGrid’s feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to learn about its other groundbreaking feature representations. You can also explore our [.NET MAUI DataGrid Documentation](https://help.syncfusion.com/maui/datagrid/getting-started) to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components on the [License and Downloads](https://www.syncfusion.com/sales/teamlicense) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads/maui) to explore our .NET MAUI DataGrid and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/create) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. We are always happy to assist you!