This is a migrated thread and some comments may be shown as answers.

Turn off highlights on specific nodes

6 Answers 132 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 07 Dec 2016, 08:41 PM

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.

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 08 Dec 2016, 07:08 AM
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.
0
Jerry
Top achievements
Rank 1
answered on 08 Dec 2016, 02:46 PM

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.

0
Jerry
Top achievements
Rank 1
answered on 08 Dec 2016, 02:52 PM
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. 
0
Ivan Danchev
Telerik team
answered on 13 Dec 2016, 09:19 AM
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.
0
Jerry
Top achievements
Rank 1
answered on 20 Dec 2016, 07:02 PM

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

0
Ivan Danchev
Telerik team
answered on 23 Dec 2016, 12:39 PM
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.
Tags
TreeView
Asked by
Jerry
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Jerry
Top achievements
Rank 1
Share this question
or