Changing RadTreeNode backcolor at runtime

[Grigoriy]

Hi,

We are having issues with changing RadTreeNode backcolor at runtime. Setting the backcolor works fine, but resetting it back to transparent color messes up node highlight and selection highligh. We use Vista theme, so the selected node would normally have blue highlight with gradient, but after setting background color and resetting it back, the selected item highlight looses gradient and becomes just white with blue border. Is there a better way to permanently hightlight a node? We just swithed from standard .Net TreeView and used Status icon for that, which works differently in RadTreeView.

// Resetting color
node.BackColor = Color.FromArgb(0, 0, 0, 0);
node.BackColor2 = Color.FromArgb(0, 0, 0, 0);

// Setting custom background
node.BackColor = Color.FromArgb(0xEA, 0xF3, 0xFB);
node.BackColor2 = Color.FromArgb(0x1E, 0x77, 0xD3);

We use RadControls for WinForms 2009.1.414.

Thanks,

Gregory

[Victor]

Hi Grigoriy,

This turned out to be an issue in RadTreeView. You can do this as a workaround:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        this.radTreeView1.Nodes[0].BackColor = Color.FromArgb(0xEA, 0xF3, 0xFB);
        this.radTreeView1.Nodes[0].BackColor2 = Color.FromArgb(0x1E, 0x77, 0xD3);

        TreeNodeUI uiNode = FindUINode(this.radTreeView1, this.radTreeView1.Nodes[0]);
        uiNode.ResetValue(VisualElement.BackColorProperty);
        uiNode.ResetValue(TreeNodeUI.BackColor2Property);
    }


    private static TreeNodeUI FindUINode(RadTreeView treeView, RadTreeNode node)
    {
        if (treeView != null && node != null)
        {
            RadItemOwnerCollection uiItems = treeView.TreeViewElement.Items;
            int count = uiItems.Count;
            for (int i = 0; i < count; i++)
            {
                TreeNodeUI currentNode = uiItems[i] as TreeNodeUI;
                if (currentNode != null && currentNode.AssociatedTreeNode == node)
                {
                    return currentNode;
                }
            }
        }
        return null;
    }
}

Please write back if you need further assistance.

Regards,
Victor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Grigoriy]

Hi Victor,

The sample that you provided didn't fix the problem and made the node highlighting even worse. With your update the node backcolor becomes gray and chnages to the blue color after changing selected node. You can use my sample app to reproduce the problem:

  public partial class Form1 : Form
  {
    public Form1()
    {
      InitializeComponent();

      for (int i = 0; i < 20; i++)
          radTreeView1.Nodes.Add(new RadTreeNode("Node " + i.ToString()));

      _contextMenu = new RadDropDownMenu();
      _menuItem = new RadMenuItem("Highlight item");
      _menuItem.Click += new EventHandler(_menuItem_Click);
      _contextMenu.Items.Add(_menuItem);

      radTreeView1.RadContextMenu = _contextMenu;
    }

    private void _menuItem_Click(object sender, EventArgs e)
    {

      RadTreeNode highlightNode = radTreeView1.GetNodeAt(_contextMenu.Location.X, _contextMenu.Location.Y);

      if (highlightNode != null)
      {
         TreeNodeUI nodeUI = null;
         if (_highlightedNode != null)
         {
            _highlightedNode.BackColor = Color.FromArgb(0, 0, 0, 0);
            _highlightedNode.BackColor2 = Color.FromArgb(0, 0, 0, 0);

            //nodeUI = FindUINode(_highlightedNode);
            //if (nodeUI != null)
            //{
            //   nodeUI.ResetValue(VisualElement.BackColorProperty);
            //   nodeUI.ResetValue(TreeNodeUI.BackColor2Property);
            //}
         }
         _highlightedNode = highlightNode;

         highlightNode.BackColor = Color.FromArgb(0xEA, 0xF3, 0xFB);
         highlightNode.BackColor2 = Color.FromArgb(0x1E, 0x77, 0xD3);

         nodeUI = FindUINode(highlightNode);
         if (nodeUI != null)
         {
            nodeUI.ResetValue(VisualElement.BackColorProperty);
            nodeUI.ResetValue(TreeNodeUI.BackColor2Property);
         }
      }
    }

    private TreeNodeUI FindUINode(RadTreeNode node)
    {

      if (node != null)
      {
         foreach (RadElement element in node.TreeView.TreeViewElement.Items)
         {
           TreeNodeUI nodeUI = element as TreeNodeUI;
           if (nodeUI != null && nodeUI.AssociatedTreeNode == node)
              return nodeUI;
         }
      }

      return null;
    }

    private RadDropDownMenu _contextMenu;
    private RadMenuItem _menuItem;
    private RadTreeNode _highlightedNode;
  }

You will need to add a RadTreeView control to the form and call it radTreeView1 for the sample to work.

Steps to reproduce the problem:

1. Move over any node, let say "Node 8", right click and select "Highlight item" from the context menu,

2. If i use the ResetValue calls, the node backcolor turns gray, instead of blue (issue #1), otherwise if i remove the ResetValue calls it works fine,

3. Move over any other node, let say "Node 2", right click and select "Highlight item" from the context menu,

4. The "Node 2" changes the backcolor and "Node 8" backcolor changes back to the default color,

5. Hover over the "Node 8" node, the highlight now only has blue border and white hightlight, instaed of normal highlight (issue #2),

6. Select "Node 8", the selected node highligh has the same problem as the hover over highlight (issue #3).

I've tried to call the ResetValue calls after resetting the backcolor back to default value (see the commented out code), but it didn't help.

Thanks,

Grigoriy

[Victor]

Hello Grigoriy,

Thank you for writing.

Please excuse me, I forgot to add the other important action. Before calling ResetValue on TreeNodeUI you have to set the corresponding RadTreeNode's BackColor and BackColor2 properties to Color.Empty.
For example:

TreeNodeUI uiNode = FindUINode(this.radTreeView1, this.radTreeView1.Nodes[0]);
uiNode.AssociatedTreeNode.BackColor = Color.Empty;
uiNode.AssociatedTreeNode.BackColor2 = Color.Empty;
uiNode.ResetValue(VisualElement.BackColorProperty);
uiNode.ResetValue(TreeNodeUI.BackColor2Property);

 
Do not hesitate to write back if anything else pops up.

Regards,
Victor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Grigoriy]

Using the Color.Empty constant instead of Color.FromArgb(0, 0, 0, 0) almost fixed the problem, but it only worked properly in the resetting background color part. I was also going to ask you how to force the node to repaint, since resetting the node backcolor was leaving a grey background, which would go away after hovering over the node. But looks like a found a solution, calling ForceReApplyStyle after the ResetValue calls fixed the problem. I'm not sure that it the right way to do it, but it works.

Here is the working code:

  public partial class Form1 : Form
  {
    public Form1()
    {
      InitializeComponent();

      for (int i = 0; i < 20; i++)
          radTreeView1.Nodes.Add(new RadTreeNode("Node " + i.ToString()));

      _contextMenu = new RadDropDownMenu();
      _menuItem = new RadMenuItem("Highlight item");
      _menuItem.Click += new EventHandler(_menuItem_Click);
      _contextMenu.Items.Add(_menuItem);

      radTreeView1.RadContextMenu = _contextMenu;
    }

    private void _menuItem_Click(object sender, EventArgs e)
    {

      RadTreeNode highlightNode = radTreeView1.GetNodeAt(_contextMenu.Location.X, _contextMenu.Location.Y);

      if (highlightNode != null)
      {
         TreeNodeUI nodeUI = null;
         if (_highlightedNode != null)
         {
            _highlightedNode.BackColor = Color.Empty;
            _highlightedNode.BackColor2 = Color.Empty;

            nodeUI = FindUINode(_highlightedNode);
            if (nodeUI != null)
            {
               nodeUI.ResetValue(VisualElement.BackColorProperty);
               nodeUI.ResetValue(TreeNodeUI.BackColor2Property);
               nodeUI.ForceReApplyStyle();
            }
         }
         _highlightedNode = highlightNode;

         highlightNode.BackColor = Color.FromArgb(0xEA, 0xF3, 0xFB);
         highlightNode.BackColor2 = Color.FromArgb(0x1E, 0x77, 0xD3);
      }
    }

    private TreeNodeUI FindUINode(RadTreeNode node)
    {

      if (node != null)
      {
         foreach (RadElement element in node.TreeView.TreeViewElement.Items)
         {
           TreeNodeUI nodeUI = element as TreeNodeUI;
           if (nodeUI != null && nodeUI.AssociatedTreeNode == node)
              return nodeUI;
         }
      }

      return null;
    }

    private RadDropDownMenu _contextMenu;
    private RadMenuItem _menuItem;
    private RadTreeNode _highlightedNode;
  }

[Victor]

Hello Grigoriy,

Thank you for writing. This solution should probably be ok. Please note that ForceReApplyStyle is generally a slow operation. Avoid calling it in loops or on form resize or all other kinds of frequent actions. If you do not have a noticeable slow down of your application it should be ok. Please write back if you have other questions.

Kind regards,
Victor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.