Skip to content

Commit 036180f

Browse files
Merge pull request #3 from SyncfusionExamples/MAUI-978225-ReadMeFile
MAUI-978225 - [Others] Updated README file
2 parents 54c75af + 3f0ab8f commit 036180f

1 file changed

Lines changed: 36 additions & 9 deletions

File tree

‎README.md‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,46 @@
11
# How-to-hide-the-header-in-MAUI-DataGrid-SfDataGrid-
22

3-
The .NET [MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid)(SfDataGrid) allows to customize the height of the header row by setting the SfDataGrid.HeaderRowHeight property.
3+
This short guide shows how to hide (collapse) the header row in the Syncfusion .NET MAUI DataGrid (SfDataGrid) by setting the `HeaderRowHeight` property. The sample project in this repository demonstrates the technique; see the `MainPage.xaml` sample for a minimal implementation.
44

5-
## XAML
5+
To learn more about these features, check out the official user guide topics:
6+
- [Getting Started with .NET MAUI DataGrid](https://help.syncfusion.com/maui/datagrid/getting-started)
67

7-
When Setting [HeaderRowHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_HeaderRowHeight) to 0 will collapse the header row in the view.
8+
## XAML
9+
10+
Set the header row height to 0 in XAML to collapse the header row visually. The snippet below is taken from the sample `MainPage.xaml` in this repo and demonstrates the exact property to change:
11+
12+
```xml
13+
<ContentPage.BindingContext>
14+
<local:ViewModel x:Name="ViewModel"></local:ViewModel>
15+
</ContentPage.BindingContext>
816

9-
```XML
1017
<syncfusion:SfDataGrid x:Name="dataGrid"
11-
HeaderGridLinesVisibility="Both"
12-
GridLinesVisibility="Both"
13-
HeaderRowHeight="0"
14-
ItemsSource="{Binding OrderInfoCollection}" >
15-
</syncfusion:SfDataGrid>
18+
HeaderGridLinesVisibility="Both"
19+
GridLinesVisibility="Both"
20+
HeaderRowHeight="0"
21+
ItemsSource="{Binding OrderInfoCollection}">
22+
</syncfusion:SfDataGrid>
1623
```
24+
**Reference Image**
1725

1826
![HideHeaderRow](HideHeaderRow.png)
1927

28+
## How it works
29+
30+
- The `SfDataGrid.HeaderRowHeight` property controls the height of the header row. Setting it to `0` instructs the control to collapse the header row so it does not occupy any vertical space in the rendered UI.
31+
- Grid line visibility properties such as `HeaderGridLinesVisibility` and `GridLinesVisibility` are independent and control whether grid lines are drawn for header/body cells.
32+
- Hiding the header can be useful for very compact presentations or when column headers are redundant (for example, when using labeled UI or tooltips elsewhere).
33+
34+
35+
36+
## Conclusion
37+
38+
I hope you enjoyed learning about how to hide the header row in .NET MAUI DataGrid (SfDataGrid).
39+
40+
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.
41+
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.
42+
43+
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!
44+
45+
46+

0 commit comments

Comments
 (0)