tree node mouse hover

[Pooja]

Hi,

My requirement is to highlight the entire row when user hovers over any part of the row( i.e. either at plus/minus icon or node image or node text or even the empty space left in the row). But, the problem is that row is highlighted only when user hovers over the input text of the node, when user hovers over any other part of node the row is not highlighted.
I am using this style
.RadTreeView_Default .rtHover
{
color: #000;
border-color: #a79d87 #b89f73;
background-color: #FFE086;
padding: 0px 2px 0px 2px;
}
.RadTreeView_Default .rtSelected
{
color: #000;
border: 0;
background-color: #fcdb89;
}

Is there a way to achieve this?

[Princy]

Hello,

Try the following CSS.
CSS:

<style type="text/css">
 .rtBot:hover, .rtTop:hover,.rtMid:hover
   {
     background-color : Red !important;
   }
</style>

Thanks,
Princy.

[Bozhidar]

Hi Princy,

The solution you offered is right, but it would work only on the last sibling of nodes with the same parent. To make the highlight work with all nodes, you should use the following selectors:

.RadTreeView_Default .rtTop:hover,
.RadTreeView_Default .rtMid:hover,
.RadTreeView_Default .rtBot:hover
{
    ...
}

Kind regards,
Bozhidar
the Telerik team

[Pooja]

Thanks! the problem got resolved.

But there is a related problem. Now when I hover over any part of the node and I press enter or try selecting the node, node doesn't get selected. However if I select the text part of the node it gets selected. Is there a workaround. When I am hovering over any part of the node and I press enter or try selecting the node using mouse , node should get selected.

[Bozhidar]

Hi Pooja,

Add the following function to the OnClientLoad event of the treeview:

function clientLoad(sender){
    //alert('foo');
    $telerik.$('.rtTop, .rtMid, .rtBot').bind("click", function(e){
        var treeView = $find("RadTreeView1");
        var node = treeView._extractNodeFromDomElement(e.target);
        node.select();
        //If you want to expand and collapse the node on click, add this as well
        //node.toggle();
    });
}

Best wishes,
Bozhidar
the Telerik team

[Pooja]

Thanks Bozidhar!

This solution works for nodes that are initially loaded in the tree, but after that I am using Load On Demand feature where data is bound thru web service. This solution does not work for nodes bound thru Load on Demand. Any idea?

Also, does this solution have any impact on performance as I might have thousands of nodes in my tree.

[Bozhidar]

Hi Pooja,

To add the click event to the newly added nodes, you should use the OnClientNodeDataBound event. Here's the function that handles it:

function onNodeDataBound(sender, eventArgs) {
    var node = eventArgs.get_node();
    var element = node.get_element().children[0];

    $telerik.$(element).bind("click", function(e){
        var treeView = $find("RadTreeView1");
        var node = treeView._extractNodeFromDomElement(e.target);
        node.select();
    });
}

I tested this with a tree that loads 8000 nodes at a time and the time for the additional work done by the function was minimal.

Regards,
Bozhidar
the Telerik team

[Pooja]

Got it Thanks!