The baseline alignment is offset by lowercase letters where a descender letter (g, j, y, p, q) is present. In the image below, you can see some fields are floating a little higher than others. This occurs in the header and body of the grid.
1 Answer, 1 is accepted
Hi Matthew and Teddy,
As promised, I spent some time experimenting with different ways to handle the issue until there's an official resolution with the logged bug report. I have some success to share.
Option 1 (easier): Change Vertical Options
I found that the best-looking one was to use DataGridColumnHeaderStyle TextVerticalOptions="Center" because it cut the visual discrepancy in half.
Here's what it looks like in the ControlsSample demo:
Here's the code change in AggregateSupportView.xaml
Note that there are a ton of other properties in the DataGridColumnHeaderStyle that you can tweak, too. For example, you can also modify the FilterIndicatorMargin or SortIndicatorMargin to shift them a little bit, but I found the best results with the vertical alignment
Option 2 (advanced) - Custom HeaderContentTemplate
The only other option I can propose is that you take full control over the Label that renders the header text. This is done by defining your own DataTemplate, then using that DataTemplate for the column's HeaderContentTemplate property.
The BindingContext is the column instance, so you can bind to the HeaderText property,
<telerik:DataGridNumericalColumn.HeaderContentTemplate>
<DataTemplate>
<!-- You have full control over the appearance now. -->
<Label Text="{Binding HeaderText}" />
</DataTemplate>
</telerik:DataGridNumericalColumn.HeaderContentTemplate>Here's what that looks like at runtime:
> Note: You do not need to worry about the sort or filter indicators, the ContentView that is used for the header text lies between them.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Matthew,
I have tested on WinUI and cannot reproduced the behavior. Also it seems gird lines in the header are not visible, filter indicator, etc. Do you have any customization in the DataGrid header?
I will need more details on the exact setup you have and on which platform the issue occurs?
Also what are the Telerik .NET MAUI version and .NET version used in the project?
Hi Matthew, can you please reply back to this comment with the code you're using for the DataGrid? This will help Didi replicate the issue.
From your screenshot, it appears as if you've set a custom HeaderTemplate that doesn't have the default Padding. This padding usually accounts for the kerning, descenders and ascenders. You can learn more about column header customization here .NET MAUI DataGrid Documentation - Columns Header.
If you are indeed using your own DataTemplate, I recommend making sure you've added enough Margin or Padding. Here's a very simple example:
<DataTemplate x:Key="MyColumnHeaderTemplate"> <MyRootElement Padding="4,2,2,4"> ... </MyRootElement> </DataTemplate>This is once again evident in your own SDK Browser sample. Here's a zoomed in screenshot of the Property Aggregates data grid sample, running v4.0.0 on .NET 7. In Windows. Notice Price has no descenders, but Delivery Price does. The baselines are not even:
And to your point, no, we are not setting the Header Template or margins, or messing around with anything in the Style that might be changing this. We are just setting HeaderText, same as this SDK Browser sample is.
Thank you for the excellent explanation, Teddy!
I have created the following Bug Report on your behalf in Matthew's account => [DataGrid] Column header text is offset by char descenders, causing misaligned.
In the meantime, as a workaround, you might be able to use the HeaderStyle object to set a vertical alignment of center or top, but I think this might require a DataTemplate. I'll need to investigate this a little further to see which option provided the best results. If I do develop a decent solution, I'll post it in the Bug Report thread.
Side Notes