DataGrid: FontFamily is not respected in header, cell text styles

Progress® Telerik® UI for .NET MAUI Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 07 Jun 2023 07:41 by ADMIN

Release 5.2.0

Ender

Created on: 29 Jan 2023 12:04

Category: DataGrid

Type: Bug Report

DataGrid: FontFamily is not respected in header, cell text styles

Hi,

I'am testing Telerik .NET MAUI controls for windows and android. FontFamily property of columns (both for xaml and app.xaml) not working. If an embedded font is choosen for whole application, DataGrids look different from other parts of the application

here is my xaml, "fnt_bold" is a MauiFont in resources. All other ui components are shown in my font

                <telerik:RadDataGrid x:Name="dataGrid" AutoGenerateColumns="False" UserEditMode="None" UserGroupMode="Disabled" SelectionMode="Single" SelectionUnit="Row"  >
                    <telerik:RadDataGrid.Columns>
                        <telerik:DataGridTextColumn PropertyName="ID" HeaderText="RefID" Width="60" SizeMode="Fixed">
                            <telerik:DataGridTextColumn.CellContentStyle>
                                <telerik:DataGridTextCellStyle FontFamily="fnt_bold" FontSize="12.25"/>
                            </telerik:DataGridTextColumn.CellContentStyle>
                        </telerik:DataGridTextColumn>
                        <telerik:DataGridTextColumn PropertyName="CODE" HeaderText="Code" Width="80" SizeMode="Fixed">
                            <telerik:DataGridTextColumn.CellContentStyle>
                                <telerik:DataGridTextCellStyle FontFamily="fnt_bold" FontSize="12.25"/>
                            </telerik:DataGridTextColumn.CellContentStyle>
                        </telerik:DataGridTextColumn>
                        <telerik:DataGridTextColumn PropertyName="NAME" HeaderText="Name" Width="250" SizeMode="Fixed">
                            <telerik:DataGridTextColumn.CellContentStyle>
                                 <telerik:DataGridTextCellStyle FontFamily="fnt_regular" FontSize="12.25"/>
                            </telerik:DataGridTextColumn.CellContentStyle>
                        </telerik:DataGridTextColumn>
                    </telerik:RadDataGrid.Columns>
                </telerik:RadDataGrid>

I have attached a screenshot from my test app.

I also checked the sample telerik android app (Telerik UI for .NET MAUI Controls). DataGrid components in Telerik Sample app also dont use the expected font unlike all other ui components.

Just one of the DataGrid samples of one column in the sample app has the correct fontfamily property. I have attached that screenshot also. I couldn't figure out how to implement it.

Am i missing something?

Thanks in advance.

Ender

Attached Files:

2 comments

ADMIN

Didi

Posted on: 09 Mar 2023 13:10

Hello,

The font family is not respected for sorting and filtering indicators. There isn't a workaround for this case.

Regards,
Didi
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/.

ADMIN

Didi

Posted on: 30 Jan 2023 13:42

Hello Ender,

Thank you for the provided files and detailed explanation of the behavior. I changed the status of the item to "Unplanned". In general, the behavior is related to the SkiaSharp which DataGrid uses internally.

Workaround:

Use CellContentTemplate and add a Label in it and set the FontFamily to the Label. The same is valid for the header and group

<telerik:DataGridTextColumn PropertyName="Name" 
                            Width="100"
                            SizeMode="Fixed"
                            HeaderText="Name">
    <telerik:DataGridColumn.CellContentTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" 
                    LineBreakMode="TailTruncation"
                    VerticalOptions="Center"/>
        </DataTemplate>
    </telerik:DataGridColumn.CellContentTemplate>
    <telerik:DataGridTextColumn.HeaderContentTemplate>
        <DataTemplate>
            <Label />
        </DataTemplate>
    </telerik:DataGridTextColumn.HeaderContentTemplate>
</telerik:DataGridTextColumn>

and the group header template:

<telerik:RadDataGrid x:Name="dataGrid"
                        ItemsSource="{Binding People}">
    <telerik:RadDataGrid.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Group.Key}" 
                        FontAttributes="Bold" 
                        TextColor="DarkBlue" 
                        FontSize="{OnPlatform MacCatalyst=Default, Default=Small}" />
        </DataTemplate>
    </telerik:RadDataGrid.GroupHeaderTemplate>        
</telerik:RadDataGrid>

Regards,
Didi
Progress Telerik