hide-column-headers-maui-datagrid.md

title	description	type	page_title	slug	tags	res_type
How to Hide Column Headers in a DataGrid for MAUI	Learn how to hide the column headers in a Telerik UI for .NET MAUI DataGrid.	how-to	Hide Column Headers in DataGrid for MAUI	hide-column-headers-maui-datagrid	maui, datagrid, column-headers, hide	kb

Environment

Version	Product	Author
6.7.0	Telerik UI for .NET MAUI DataGrid	Dobrinka Yordanova

Description

I want to hide the column headers in a DataGrid for MAUI. Is there a way to achieve this?

Solution

To hide the column headers in a DataGrid for .NET MAUI, you can use the ColumnHeaderStyle property and customize the style of the column headers by setting the FontSize to 0 and the Color to Transparent.

Here is an example:

1. If you are using C#, create a new instance of the DataGridColumnHeaderStyle class and set the following properties:

   • TextFontSize to 0
   • FilterIndicatorFontSize to 0
   • BackgroundColor to Colors.Transparent
   • BorderColor to Colors.Transparent
   • BorderThickness to a new Thickness with a value of 0.

   The HeaderStyle customization in C#:

   var dataGrid = new RadDataGrid();
   dataGrid.ItemsSource = new List<Data>
   {
       new Data { Country = "India", Capital = "New Delhi"},
       new Data { Country = "South Africa", Capital = "Cape Town"},
       new Data { Country = "Nigeria", Capital = "Abuja" },
       new Data { Country = "Singapore", Capital = "Singapore" }
   };
   dataGrid.AutoGenerateColumns = false;
   var headerStyle = new DataGridColumnHeaderStyle
   {
       TextFontSize = 0,
       FilterIndicatorFontSize = 0,
       BackgroundColor = Colors.Transparent,
       BorderColor = Colors.Transparent,
       BorderThickness = new Thickness(0),
   };
   var column1 = new DataGridTextColumn { PropertyName = "Country" };
   column1.HeaderStyle = headerStyle;
   
   dataGrid.Columns.Add(column1);

2. If you are using XAML code, add the HeaderStyle property to the DataGridTextColumn and set its value to a new instance of DataGridColumnHeaderStyle with the following properties:

   • BackgroundColor to "Transparent"
   • BorderColor to "Transparent"
   • FilterIndicatorFontSize to 0
   • TextFontSize to 0
   • BorderThickness to a new Thickness with a value of 0.

   The HeaderStyle customization in XAML:

   <telerik:RadDataGrid>
       <telerik:RadDataGrid.Columns>
           <telerik:DataGridTextColumn PropertyName="Country">
               <telerik:DataGridTextColumn.HeaderStyle>
                   <telerik:DataGridColumnHeaderStyle BackgroundColor="Transparent" BorderThickness="0"
                                                       BorderColor="Transparent"
                                                       FilterIndicatorFontSize="0"
                                                       TextFontSize="0"/>
               </telerik:DataGridTextColumn.HeaderStyle>
           </telerik:DataGridTextColumn>
       </telerik:RadDataGrid.Columns>
   </telerik:RadDataGrid>