Maui DataGrid ColumnHeader HorizontalTextAlignment "Center" doesnt work

[Ulrich]

 

Hi,

seems that the HorizontalTextAlignment="Center" isnt working for the DataGrid ColumnHeader, or at least I am unable to get it working.
For the cells it works.

NuGet Telerik.UI.for.Maui (6.7.0), latest VS2022 with latest Net8/Maui

I am new to Maui/Xaml.

Please help

Uli

Here is my MainPage.xaml and attached a screenshot of the running DataGrid:

 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="MaluTogo.MainPage">

    <ContentPage.Resources>
        <telerik:DataGridColumnHeaderStyle x:Key="ColumnHeaderStyle0" HorizontalTextAlignment="Center"/>
        <telerik:DataGridTextCellStyle x:Key="ColumnCellStyle0" HorizontalTextAlignment="Center"/>
    </ContentPage.Resources>    
    
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">

            <telerik:RadDataGrid x:Name="_radDataGridMarkets" AutoGenerateColumns="False" UserEditMode="None" UserFilterMode="Disabled" UserGroupMode="Disabled" UserSortMode="None" >
                <telerik:RadDataGrid.Columns>

                    <telerik:DataGridTextColumn PropertyName ="Symbol" HeaderText="symbol" HeaderStyle="{StaticResource ColumnHeaderStyle0}" CellContentStyle="{StaticResource ColumnCellStyle0}" />
                    <telerik:DataGridTextColumn PropertyName ="LocalTimestamp" HeaderText="time" CellContentFormat="{}{0:HH:mm:ss}" HeaderStyle="{StaticResource ColumnHeaderStyle0}"  CellContentStyle="{StaticResource ColumnCellStyle0}" />
                    <telerik:DataGridTextColumn PropertyName ="Bid" HeaderText="bid" HeaderStyle="{StaticResource ColumnHeaderStyle0}" CellContentStyle="{StaticResource ColumnCellStyle0}" />
                    <telerik:DataGridTextColumn PropertyName ="Ask" HeaderText="ask" HeaderStyle="{StaticResource ColumnHeaderStyle0}" CellContentStyle="{StaticResource ColumnCellStyle0}" />
                    <telerik:DataGridTextColumn PropertyName ="Units" HeaderText="units" HeaderStyle="{StaticResource ColumnHeaderStyle0}"  CellContentStyle="{StaticResource ColumnCellStyle0}" />

                </telerik:RadDataGrid.Columns>
            </telerik:RadDataGrid>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

 

[Yana]

Hi Ulrich,

Thank you for sharing the code you have.

In order to align the text in the column horizontally, you would need to set both TextHorizontalOptions and SortIndicatorHorizontalOptions properties to "Center" like this:

<telerik:DataGridColumnHeaderStyle x:Key="ColumnHeaderStyle0" 
                                   TextHorizontalOptions="Center"
                                   TextVerticalOptions="Center"
                                   SortIndicatorHorizontalOptions="Center"/>

This is required as the column header contains more elements than just the header title, such as sort indicator, options button and other, that need to be aligned as well.

Hope this helps. Let me know if you have any additional questions on this.

Regards,
Yana
Progress Telerik

[Ulrich]

Thx a lot Yana, works perfect now!

Have a nice day
Uli