How to show chinese characters in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

How to show chinese characters

8 Answers 41 Views

DataGrid

This is a migrated thread and some comments may be shown as answers.

Kevin asked on 30 Nov 2017, 09:37 AM

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>

<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

8 Answers, 1 is accepted

answered on 04 Dec 2017, 01:36 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 29 Mar 2019, 05:40 AM

screenshot.png

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

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

answered on 02 Apr 2019, 08:31 AM

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

answered on 04 Apr 2019, 06:28 AM

DataGridGroups.zip

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

answered on 11 Apr 2019, 01:19 PM

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