HTML-like Text Formatting supported font

2 Answers 81 Views
GridView
Paul
Top achievements
Rank 1
Iron
Paul asked on 07 Jul 2021, 03:14 PM | edited on 07 Jul 2021, 03:15 PM

I have tried to use <span style="font-family: 'Segoe UI'; color:gray; font-size: 12">Forename</span> but I do not believe the font is being applied. I use this style when the row is selected within a WinForms RadGridView. If the row is not selected (as a test) I have the same HTML markup without the font-family style and a different font is loaded (not sure which).  

The screenshot shows the highlighted row in purple. Notice the lower curl of the g and y is present - whereas on the unselected rows - these letters have that part missing.

 

Note: The rendering of the grid take a very long time - as if it is failing to render rows with this font and so falls back to a default

 

Could you explain the problem?

2 Answers, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 08 Jul 2021, 02:33 PM

Hi, Paul,

According to the pink color from the screenshot, I assume you have applied the Material Pink theme which uses the Roboto font.

In the string "<span style="font-family: 'Segoe UI'; color:gray; font-size: 12">Forename</span>" the single quotes are breaking the HTML text parse operation and thus the style attribute cannot be correctly parsed. When I remove the single quotes the font name, color and size are correctly parsed.

As to the clipped "g" and "j" letters from your screenshot, I have tested it on my side, by removing the font and font-size from the style attribute, and here is the result on my side(no text clipping).

Here is the code I am using to test this case:

public RadForm1()
{
    InitializeComponent();

    this.radGridView1.DataSource = this.GetData();
    this.radGridView1.TableElement.RowHeight = 50;
    this.radGridView1.Columns[0].DisableHTMLRendering = false;
    this.radGridView1.Columns[1].TextAlignment = ContentAlignment.MiddleLeft;

    var theme = new MaterialPinkTheme();
    ThemeResolutionService.ApplicationThemeName = theme.ThemeName;
}

private DataTable GetData()
{
    DataTable table = new DataTable();
    table.Columns.Add("Name", typeof(string));
    table.Columns.Add("Number", typeof(int));

    //string text = "<html>{0}<br><span style=\"font-family:Segoe UI; color:gray; font-size:12\">Offline</span>";
    string text = "<html>{0}<br><span style=\"color:gray;\">Offline</span>";
    table.Rows.Add(string.Format(text, "Jade Gillman"), 0);
    table.Rows.Add(string.Format(text, "Simon Gregory"), 621);
    table.Rows.Add(string.Format(text, "Benji Gregory"), 055222);
    table.Rows.Add(string.Format(text, "Neal Hamington"), 740);
    return table;
}

Can you please modify it in a way to replicate the described problem with text clipping on your side and send it back to me, so I can investigate the case further?

I am looking forward to your reply.

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

Paul
Top achievements
Rank 1
Iron
commented on 08 Jul 2021, 02:49 PM

thanks for your considered response. I found the issue to be the row height in the RadGridView was being calculated on a set of content which used a smaller and more condensed font. When the font is switched - the RadGridView was not resizing to accommodate it - thus the clipping. I resolved this by stopping the initialization of the smaller font.
Todor
Telerik team
commented on 09 Jul 2021, 07:24 AM

I am glad you managed to solve the problem with clipped text on your side.

For more information about the HTML formatting visit our online documentation: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/html-like-text-formatting

0
Paul
Top achievements
Rank 1
Iron
answered on 08 Jul 2021, 02:49 PM
See my response
Tags
GridView
Asked by
Paul
Top achievements
Rank 1
Iron
Answers by
Todor
Telerik team
Paul
Top achievements
Rank 1
Iron
Share this question
or