Change NodeFormatting based on tracking AND selection

5 posts, 0 answers
  1. Dave
    Dave avatar
    14 posts
    Member since:
    Jan 2005

    Posted 21 Sep Link to this post

    I have a RadTreeView with a blue background and white text.  This is problematic with the default bright yellow highlight colors, which I want to keep.  So in NodeFormatting I change the color of my elements to Black if the element is selected:

     

            private void radTreeView1_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)
            {
                // The text we want to change the color of is actually a text element inside a layout element within the
                // content of the node, so we need to parse down and find it

                StackLayoutElement layout = e.NodeElement.ContentElement.Children[0] as StackLayoutElement;
                LightVisualElement element = layout.Children[1] as LightVisualElement;

                if (e.Node.Selected)
                    element.ForeColor = Color.Black;
                else
                    element.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
            }

     

    That works great.  The only problem is I need it to black when it's hot-tracking as well, and I don't know how to tell if a node is currently highlighted from being hot tracked.

     

    How can I tell if the node his highlighted (hot tracking) but not actually selected?

  2. Dess
    Admin
    Dess avatar
    2101 posts

    Posted 26 Sep Link to this post

    Hello, Dave, 

    Thank you for writing.  

    The easiest way to achieve your goal is to customize the theme that you are using in Visual Style Builder. Thus, you can change the style for the MouseOver state according to your custom requirement. You can read more details about using the Visual Style Builder here:
    1.     Loading predefined themes
    2.     Working with Repository Items
    3.     Saving and Loading Theme Files
    4.     Loading Themes from an External File
    5.     Loading Themes from a Resource
    6.     Applying Theme to a Control
    7.     
    http://tv.telerik.com/watch/winforms/visualstylebuilder/whats-new-visual-style-builder-q1-2010

    Alternatively, you can use the NodeFormatting event and check the NodeElement.IsMouseOver property value in order to detect if the mouse is over the node.

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

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dave
    Dave avatar
    14 posts
    Member since:
    Jan 2005

    Posted 26 Sep in reply to Dess Link to this post

    I'm almost convinced there's a bug in the mouse tracking for treeview, as I get the same problem whether I do it via themes or programmatically with mouseenter/mouseleave events: things get highlighted on mouseover but not de-highlighted on mouse exit.

    To Repro:
    - Load Visual Style Builder, use Office 2010 Blue as the base theme
    - Select RadTreeView->TreeNodeElement
    - Create a new Repository item with red text
    - Drag that to the MouseOver state

    Now as you mouse over the preview, text will turn red.  But it stays red.  The default (non-mouseover) state is not reliably applied when the mouse leaves.

    Is this a bug in the style code, the treeview, or am I still doing something wrong?

    All I'm trying to achieve is a custom mouseover text color in RadTreeNode, and it's very hard to do!

  4. Dave
    Dave avatar
    14 posts
    Member since:
    Jan 2005

    Posted 26 Sep in reply to Dave Link to this post

    I found the issue with Theme Builder that I was hitting, which is that if you apply a border state (for example) on mouseover, you need to supply a default state with NO border, as the absence of a border on the default state is not the same and will not erase it.

    The only issue I'm having now is that I cannot get FullRowSelect to work; even though it's turned on, when drawing with my custom theme only the text word is highlighted, not the whole row.

     

  5. Dess
    Admin
    Dess avatar
    2101 posts

    Posted 28 Sep Link to this post

    Hello, Dave, 

    Thank you for writing back. 

    When you apply a specific style for a given state,e.g. MouseOver, note that it is necessary to reset this style in the default state of this element. For example, if you want to make the nodes red when you hover them, apply the red color for the MouseOver state, but add transparent or another color for the default state. Thus, the style will be properly reset when you leave the node.

    As to the full row select, since I am familiar with the exact custom style that you have I can't give you a very precise answer. But I can point you to check what style is applied to the states with FullRowSelect. It may be necessary to customize the style there as well.

    If you are still experiencing any further difficulties, it would be greatly appreciated if you can submit a support ticket and provide a sample project demonstrating the undesired behavior that you are facing. Thus, we would be able to investigate the precise case and assist you further.

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

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top