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

How to RadTreeview Text Alignment

3 Answers 195 Views

Treeview

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

ner asked on 21 Oct 2014, 06:59 PM

ali.png

Please see my attach screenshot.

As you can see i have 3 nodes and values.
All i want to achieve is to order all 3 values in same position for example:

Destination address: FF:FF:FF:FF:FF:FF
Source address: 00:00:00:00:00:00
Protocol: ARP (0x0806)

My current behavior is:

Destination address: FF:FF:FF:FF:FF:FF
Source address: 00:00:00:00:00:00
Protocol: ARP (0x0806)

How can i do that ?

3 Answers, 1 is accepted

answered on 24 Oct 2014, 11:52 AM

Hello Ner,

Thank you for writing.

It is appropriate to store the name in the RadTreeNode.Name property and the value in the RadTreeNode.Value property. You can use the NodeFormatting event and construct the NodeElement.ContentElement.Text by concatenating RadTreeNode.Name and RadTreeNode.Value with the desired empty spaces between them. Note that different chars require different space and you can measure the text in order to calculate how many empty intervals you need. Here is a sample implementation:

public Form1()

{

InitializeComponent();

RadTreeNode node1 = new RadTreeNode();

node1.Name = "Destination address:";

node1.Value = "FF:FF:FF:FF:FF:FF";

radTreeView1.Nodes.Add(node1);

RadTreeNode node2 = new RadTreeNode();

node2.Name = "Source address: ";

node2.Value = "00:00:00:00:00:00";

radTreeView1.Nodes.Add(node2);

RadTreeNode node3 = new RadTreeNode();

node3.Name = "Protocol: ";

node3.Value = "ARP (0x0806)";

radTreeView1.Nodes.Add(node3);

radTreeView1.NodeFormatting += radTreeView1_NodeFormatting;

}

// int padRightCount = 30;

int spaceWidth;

string title = string.Empty;

Size nameTextSize;

private void radTreeView1_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)

{

spaceWidth = (TextRenderer.MeasureText(" ", e.NodeElement.ContentElement.Font)).Width;

nameTextSize = TextRenderer.MeasureText(e.Node.Name, e.NodeElement.Font);

//let's consider 300 for maximal node's text width

int numberOfSpacesToFill = (300 - nameTextSize.Width) / spaceWidth;

title = e.Node.Name + new String(' ', numberOfSpacesToFill);

e.NodeElement.ContentElement.Text = title + e.Node.Value;

}

Note that TextRenderer.MeasureText method does not return absolutely correct results and may result in a slight deviation between text's size.

In order to create absolutely precise alignment, you can create a custom TreeNodeElement and place the RadTreeNode.Name and RadTreeNode.Value text into separate RadLabelElements. You can refer to our TreeView >> Custom Nodes help article which demonstrates a sample approach on this topic.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 24 Oct 2014, 01:49 PM

Thanks you for your help this is works fine for me and i have another question:

When i populate my first node i set this node forecolor to blue:

RadTreeNode ethernetNode = new RadTreeNode();

ethernetNode.Name = "Ethernet";

Font myFont = new Font("Segoe UI", 10, FontStyle.Bold);

ethernetNode.Font = new Font(myFont, FontStyle.Underline);

ethernetNode.ForeColor = Color.Blue;

ethernetNode.Expanded = true;

radTreeView1.Nodes.Add(ethernetNode);

And radTreeView1_NodeFormatting probably change this color and font because in this function i set the node name and node color to different colors:

e.NodeElement.ContentElement.Text = "<html><color=goldenrod>" + e.Node.Name + "<color=black>" + e.Node.Value;

So i try to handle if with simple if statement:

if (e.NodeElement.Data.Name == "Ethernet")

{

e.NodeElement.Font = new Font("Segoe UI", 10, FontStyle.Bold);

e.NodeElement.ForeColor = Color.Blue;

}

And although via debugger i can see that this if statement is execute the node color and font remain the same as the other nodes

answered on 29 Oct 2014, 09:58 AM

NodeStyle.png

Hello Ner,

Thank you for writing back.

The NodeFormatting event is the appropriate way to customize node elements. Hence, it is recommended to set the ForeColor and Font properties of the NodeElement.ContentElement in the referred event. However, note that the HTML-like text formatting functionality can also apply the fore color and font for different text parts. You should decide which of the two approaches to follow according to the required look. If you want to display the Name part and the Value part with different fore color, it is suitable to use the HTML-like text formatting. Otherwise, you can just set the node's text concatenating the Node.Name and the Node.Value and apply the desired formatting to the NodeElement.ContentElement. Here is an example:

private void radTreeView1_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)

{

if (e.Node.Name == "Protocol:")

{

e.NodeElement.ContentElement.Font = new Font("Segoe UI", 10, FontStyle.Bold);

e.NodeElement.ContentElement.ForeColor = Color.Blue;

e.NodeElement.ContentElement.Text = e.Node.Name + " " + e.Node.Value;

}

else

{

e.NodeElement.ContentElement.Text = "<html><font=Times New Roman><size=12><color=goldenrod>" +

e.Node.Name + "<color=black>" + e.Node.Value;

}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Desislava
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.