Turn off highlights on specific nodes

7 posts, 0 answers
  1. Jerry
    Jerry avatar
    45 posts
    Member since:
    Mar 2012

    Posted 07 Dec 2016 Link to this post

    Hello,

    How can I turn off the highlighting on specific nodes in a radTreeView?  There are specific nodes that I don't want to change in any way when hovering over them.

    I'm using UI for ASP.NET AJAX, V2013.1.417.45

    Thank you.

  2.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1617 posts

    Posted 08 Dec 2016 Link to this post

    Hello Jerry,

    Here's how you can overwrite the default styles that are applied to a hovered node by setting a HoveredCssClass to the node:
    <style>
        html .RadTreeView .disableHighlight .rtIn {
            background-image: none;
            border-color: transparent;
            background-color: transparent;
        }
    </style>

    <telerik:RadTreeView runat="server" ID="RadTreeView1" Skin="Telerik">
        <Nodes>
            <telerik:RadTreeNode Text="Root1">
                <Nodes>
                    <telerik:RadTreeNode Text="Child1.1"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child1.2" HoveredCssClass="disableHighlight"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child1.3"></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Root2">
                <Nodes>
                    <telerik:RadTreeNode Text="Child2.1"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child2.2" HoveredCssClass="disableHighlight"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child2.3"></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>

    In the example, two of the nodes (Child1.2 and Child2.2) have a custom "disableHighlight" class set to them and it is used in the CSS rule's selector, which applies styles that overwrite the default ones.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  5. Jerry
    Jerry avatar
    45 posts
    Member since:
    Mar 2012

    Posted 08 Dec 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    I works and it doesn't.  The highlight goes away, but if you click on the node the text disappears.

    Then when I highlight the node above it then it shows the hidden text but highlighted.

    Thank you for your help and anything else you can advise me to fix this so it works correctly I would appreciate it.

  7. Jerry
    Jerry avatar
    45 posts
    Member since:
    Mar 2012

    Posted 08 Dec 2016 in reply to Jerry Link to this post

    I tried your example in a test page.  The highlight doesn't show on the 2 nodes but if you click on those 2 nodes and highlight the nodes either above or below the no highlight nodes highlight. 
  8.
  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1617 posts

    Posted 13 Dec 2016 Link to this post

    Hi Jerry,

    When a Node is selected different styles and class is applied to it than when it is hovered. So if you want to avoid it being highlighted in both cases, in addition to the HoveredCssClass you can set the SelectedCssClass property:
    <telerik:RadTreeNode Text="Child1.2" HoveredCssClass="disableHighlight" SelectedCssClass="disableSelectHighlight"></telerik:RadTreeNode>

    And modify accordingly the previously suggested CSS rule's selector:
    html .RadTreeView .disableHighlight .rtIn, html .RadTreeView .disableSelectHighlight .rtIn {
        background-image: none;
        border-color: transparent;
        background-color: transparent;
    }


    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  11. Jerry
    Jerry avatar
    45 posts
    Member since:
    Mar 2012

    Posted 20 Dec 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    This stops the highlight and the selecting but if I double click on it to open the nodes under it the text disappears.

    Is there a reason for this?  I did exactly what you did in your latest example.

    Thank you

  13. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1617 posts

    Posted 23 Dec 2016 Link to this post

    Hi Jerry,

    At my end the text does not disappear. I attached a sample runnable page. Could you reproduce this behavior in it and attach it back for further review? Also please specify if this is browser-specific, although I tested it in IE11, Firefox and Chrome and it behaved identically in all of them: Child1.2's child nodes expanded/collapsed on double click and all the nodes' text remained visible.

    Regards,
    Ivan Danchev
    Telerik by Progress
    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