How to show chinese characters

[Kevin]

I am just doing some test with this control. I found an issue that Grid header text can't show chinese characters correctly.

Here is my XAML.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
             xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
             x:Class="TelerikXamarinApp2.Portable.StartPage">
    <StackLayout>
        <Label Text="You are ready to use all controls from UI for XamarinForms suite." HorizontalOptions="Center" VerticalOptions="Center"/>
        <telerikInput:RadMaskedInput></telerikInput:RadMaskedInput>
        <!--<telerikInput:RadCalendar></telerikInput:RadCalendar>-->
        <telerikDataGrid:RadDataGrid x:Name="DataGrid" UserEditMode="Cell" AutoGenerateColumns="False">
            <telerikDataGrid:RadDataGrid.Columns>
                <telerikDataGrid:DataGridTextColumn PropertyName="Country"
                                            HeaderText="国家">
                    <telerikDataGrid:DataGridTextColumn.CellContentStyle>
                        <telerikDataGrid:DataGridTextCellStyle TextColor="Green" 
                                                       FontSize="15" 
                                                       SelectedTextColor="Orange"  />
                    </telerikDataGrid:DataGridTextColumn.CellContentStyle>
                </telerikDataGrid:DataGridTextColumn>
                <telerikDataGrid:DataGridTextColumn PropertyName="Capital"
                                                HeaderText="Capital">
                    <telerikDataGrid:DataGridTextColumn.CellContentStyle>
                        <telerikDataGrid:DataGridTextCellStyle TextColor="Green" 
                                                           FontSize="15" 
                                                           SelectedTextColor="Orange"  />
                    </telerikDataGrid:DataGridTextColumn.CellContentStyle>
                </telerikDataGrid:DataGridTextColumn>
            </telerikDataGrid:RadDataGrid.Columns>
        </telerikDataGrid:RadDataGrid>
    </StackLayout>
</ContentPage>

Please give me some advice.

Thanks.

Kevin

 

[Stefan Nenchev]

Hello, Kevin,

I have managed to reproduce the behavior and logged it as a bug at our end. Here is the public item which you can follow - DataGrid: [Android][UWP]Some languages are not properly rendered by SkiaSharp elements. You can subscribe to the item in order to automatically receive notifications when some updates are available.

Basically, the issue is present in Android and UWP and not in iOS because the first two platforms we are using SkiaSharp to render the elements within the RadDataGrid. In iOS, on the other hand, we are creating native UILabels. As a workaround, you can set a template to the Header of the column instead of the HeaderText. For example:

<telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>
    <DataTemplate>
        <Label Text="国家"></Label>
    </DataTemplate>
</telerikDataGrid:DataGridTextColumn.HeaderContentTemplate>

Have a great week.

Regards,
Stefan Nenchev
Progress Telerik

[Petrushka]

<grid:RadDataGrid.GroupDescriptors>
    <common:PropertyGroupDescriptor PropertyName="DeptChnName"/>
</grid:RadDataGrid.GroupDescriptors>

 

The Grouping header text also cannot display chinese characters. See the attached file.

[Stefan Nenchev]

Hi, Petrushka,

Indeed, this would be the case with the group headers as well. I have increased the priority of the issue at our end according to your report. In the meantime, here is what you can do in order to show the correct values:

<telerikGrid:RadDataGrid.GroupHeaderTemplate>
    <DataTemplate>
        <Label Text="{Binding Group.Key}"/>
    </DataTemplate>
</telerikGrid:RadDataGrid.GroupHeaderTemplate>

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Petrushka]

Thanks!!!  <GroupHeaderTemplate> helps!

Another question: when RadDataGrid has more than 6 columns, scroll the grid right and left. The column headers does not display properly. How to fix it?

 

[Stefan Nenchev]

Hello, Petrushka,

Can you please share more information on the issue as I was not able to reproduce it? On which platform do you observe it? What is the exact setup at your end. I have attached a sample which shows a RadDataGrid control with more than 6 columns and the undesired behavior is not reproduced. Do you use the latest version of the Telerik UI for Xamarin suite?

Regards,
Stefan Nenchev
Progress Telerik

[Petrushka]

1. https://drive.google.com/open?id=1oJql7FaRcspFDrHwsZL3iICwaL5UHsDg

2. https://drive.google.com/open?id=1S70VxBlqTLWtNDbo6tPmj87t15tcqCt0

The links are video and my example project.

The column headers does not display properly when scroll the grid right and left.

[Stefan Nenchev]

Hello,

Thank you for the project and the video. I was able to reproduce the behavior with it. Actually, after some further investigation, I came across the following thread where a solution to the problem is provided - https://www.telerik.com/forums/can-you-turn-off-ui-virtualization#rHyX0PVnskCX4l0Lmy7kZg. Basically, you can take the following approach in order to avoid the issue:

<telerikDataGrid:DataGridTemplateColumn HeaderText="Col1">
            <telerikDataGrid:DataGridTemplateColumn.HeaderStyle>
                <telerikDataGrid:DataGridColumnHeaderStyle BackgroundColor="{StaticResource colorBackgroundGrey}"
                                                                       BorderColor="{StaticResource colorBorder}"
                                                                       BorderThickness="1"
                                                                       OptionsButtonTextColor="Transparent" />
            </telerikDataGrid:DataGridTemplateColumn.HeaderStyle>
            <telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>
                <DataTemplate>
                    <Label Text="{Binding HeaderText}"
                           Margin="8,8,8,8"
                           VerticalOptions="Center"
                           LineBreakMode="WordWrap"
                           WidthRequest="100"
                           TextColor="{StaticResource textColorPrimary}" />
                </DataTemplate>
            </telerikDataGrid:DataGridTemplateColumn.HeaderContentTemplate>

We have the issue logged as a bug and you can track its progress on the following link - https://feedback.telerik.com/xamarin/1366379-datagrid-columnheaders-are-inaccurately-visualized-when-headercontenttemplate-is-set-and-horizontal-scrolling-is-performed. I have increased its priority as per your report.

I hope the information provided will be useful.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Petrushka]

The information provided is very useful.

Binding label's text property to the HeaderText works.

Thanks!!!