Rank 1
Iron
Iron
Veteran
I'm using the new TreeMap control and when I change the font to say Segoe UI 12 - for the boxes - it doesn't seem to have any effect.
So, I searched for the common VisualItemFormatting method but it does not exist on this control.
How can I change the text in the boxes and perhaps use HTML formatting as well?
1 Answer, 1 is accepted
Hello, Martin,
In RadTreeMap each item uses the Font of the TreeMapElement. If you want to change the font of all items you need to set it like this:
this.radTreeMap1.TreeMapElement.Font = new Font("Segoe UI", 12f);
In RadTreeMap control to customize the appearance, you can use the ItemPainting event.
private void RadTreeMap1_ItemPainting(object sender, TreeMapItemPaintingEventArgs e)
{
if (e.Text == "Item 1")
{
e.Text = "Custom Text";
}
}The text can also be set in this event or directly to the data item.
this.radTreeMap1.Items[0].Text = "Custom Text";The RadTheeMap control has a limited amount of visual elements to increase the performance. The items/leaves are painted directly in the RadTreeMapElement. This is why HTML text is not supported out of the box but can be implemented with a TextPrimitiveHtmlImpl and using the ItemPainting and ItemPainted events. In the ItemPainting event, we will stop the text from being painted, but the other styles like border and background will be drawn. Then in the ItemPainted event, we will paint the HTML text using the TextPrimitiveHtmlImpl. Here is a code sample:
this.radTreeMap1.ItemPainting += this.RadTreeMap1_ItemPainting;
this.radTreeMap1.ItemPainted += this.RadTreeMap1_ItemPainted;
...
private void RadTreeMap1_ItemPainting(object sender, TreeMapItemPaintingEventArgs e)
{
if (e.Item.Text == "Item 1")
{
e.Text = string.Empty;
}
}
private void RadTreeMap1_ItemPainted(object sender, TreeMapItemPaintedEventArgs e)
{
if (e.Item.Text == "Item 1")
{
string text = "<html>Custom <b>Text</b>";
TextPrimitiveHtmlImpl imlp = new TextPrimitiveHtmlImpl();
TextParams textParams = new TextParams();
textParams.foreColor = Color.Black;
textParams.font = this.radTreeMap1.TreeMapElement.Font;
textParams.text = text;
textParams.paintingRectangle = e.Bounds;
textParams.paintingRectangle.Inflate(-2, -2);
imlp.PaintPrimitive(new RadGdiGraphics(e.Graphics), textParams);
}
}More information about the treemap customizations is available here: https://docs.telerik.com/devtools/winforms/controls/treemap/customizing-appearance
Please, don't hesitate to contact us again if any other questions or concerns arise.
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/.