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?
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?
7 Answers, 1 is accepted
0
Accepted
Princy
Top achievements
Rank 2
answered on 20 Dec 2011, 11:43 AM
Hello,
Try the following CSS.
CSS:
Thanks,
Princy.
Try the following CSS.
CSS:
<style type=
"text/css"
>
.rtBot:hover, .rtTop:hover,.rtMid:hover
{
background-color : Red
!important
;
}
</style>
Thanks,
Princy.
0
Accepted
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:
Kind regards,
Bozhidar
the Telerik team
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Pooja
Top achievements
Rank 1
answered on 21 Dec 2011, 01:17 AM
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.
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.
0
Hi Pooja,
Best wishes,
Bozhidar
the Telerik team
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();
});
}
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Pooja
Top achievements
Rank 1
answered on 21 Dec 2011, 01:09 PM
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.
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.
0
Accepted
Hi Pooja,
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
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Pooja
Top achievements
Rank 1
answered on 22 Dec 2011, 12:38 PM
Got it Thanks!