HTML text

All text node controls (NodeTextBox, ExpandableTextBox, ExpandablePanel, etc.) and columns header allow you to show HTML text inside. To do that, enable the SupportHtml node control property.
Supported HTML tags:

• <b>Bold text</b> - Bold text;
• <i>Italic text</i> - Italic text;
• <u>Underlined text</u> - Underlined text;
• <s>Strikeout text</s> - Strikeout text;
• <br/> - inserts a single line break;
• <font color="ColorId">Colored text</font> - changes the text color where the ColorId is a text color and can be either a color name (from the System.Drawing.Color type) or hexadecimal RGB value in #RRGGBB format;
• <a href='url'>Hyperlink</a> - shows a clickable hyperlink. To handle the link click, subscribe to the LinkClicked treeview event. You can change the link appearance using the TextStyle treeview property.

Example:

Node node = new Node("<i>Some text</i><br/><b><font color='Blue'>Second</font> line</b>");

Values of all complex tags (font.color, a.href, etc.) should be quoted. If you have text without quotes, use the HtmlTextHelper.TextToHtml static method to convert it to valid HTML text.

Example:

string text = "<font color=Blue>Blue text</font>";
 
Node node = new Node(HtmlTextHelper.TextToHtml(text));

Display special characters

To show special characters in HTML text, replace them with the analogues specified below.

‘<’ and ‘>’ characters

To show < and > characters replace them with < and > respectively, or use << and >> characters in the text and call the HtmlTextHelper.TextToHtml method to convert them to a valid HTML text.

Example:

// using << and >> with auto–converting method call.
Node node = new Node();
// convert text to "if(a < 10 || b > 20) { return; }"
node.Text = HtmlTextHelper.TextToHtml("if(a << 10 || b >> 20) { return; }");
 
// using < and >
Node node = new Node();
node.Text = "if(a < 10 || b > 20) { return; }";

‘&’ character

To show the ‘&’ character, use the &amp; string.

HTML text auto-wrapping

Flexible TreeView supports HTML text auto–wrapping. See the Text wrapping article for details.

Html text inspection and customization

By default, Flexible TreeView displays html text according to the treeview theme`s settings. If you need to customize the html tag`s appearance before it will be displayed in the treeview, you can do that using the IHtmlTagInspector interface. It contains the ProcessHtmlTag method, where you can customize every tag`s appearance.
For example, to customize text appearance in a node control, use the code below:

Example:

// custom node control class to display all html links (<a href> tag) as italic.
class NodeTextBoxEx : NodeTextBox, IHtmlTagInspector
{
  protected override Size MeasureSize(Node pNode, DrawContext pContext)
  {
    // tell the engine that we`ll inspect all html text, displayed in this node control.
    pContext.Owner = this;
 
    // pass custom parameters to the ProcessHtmlTag method below.
    pContext.Parameters = pNode;
 
    // let the base class to measure text with enabled html inspector.
    Size sz = base.MeasureSize(pNode, pContext);
 
    pContext.Owner = null;
    pContext.Parameters = null;
 
    return sz;
  }
 
  protected override void Draw(Node pNode, DrawContext pContext)
  {
    pContext.Owner = this;
    pContext.Parameters = pNode;
 
    base.Draw(pNode, pContext);
 
    pContext.Owner = null;
    pContext.Parameters = null;
  }
 
  // inspect all html tags that`re appear in this node control.
  public void ProcessHtmlTag(HtmlTextTag pTag, DrawContext pContext)
  {
    Node node;
 
    // get the target node from the context custom parameters.
    node = (Node)pContext.Parameters;
    // if this is our node and this tag with a link, change the tag`s text appearance.
    if (node.Text == "My node" && pTag.Link != null)
    {
      pTag.Italic = true;
    }
  }
}</p>
<p>// you can use this node control class as any other node control in your treeview.
NodeTextBoxEx tb = new NodeTextBoxEx();
tb.DataFieldName = “Text”;
tb.AttachTo(tree);