How to RadTreeview Text Alignment

4 posts, 0 answers
  1. ner
    ner avatar
    8 posts
    Member since:
    Oct 2014

    Posted 21 Oct 2014 Link to this post

    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 ?


  2. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 24 Oct 2014 Link to this post

    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.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. ner
    ner avatar
    8 posts
    Member since:
    Oct 2014

    Posted 24 Oct 2014 in reply to Dess Link to this post

    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
  5. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 29 Oct 2014 Link to this post

    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.

     
Back to Top