Turn off highlights on specific nodes

[Jerry]

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.

[Ivan Danchev]

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

[Jerry]

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.

[Jerry]

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. 

[Ivan Danchev]

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

[Jerry]

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

[Ivan Danchev]

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