r.a.d.controls version
|
Treeview (only got V.6)
|
.NET version |
.NET 2.0 (but should work for all)
|
Visual Studio version |
(Doesn't matter)
|
programming language |
Javascript
|
browser support |
all browsers supported by r.a.d.controls
|
PROJECT DESCRIPTION
A completely client side solution using Javascript to solve the alternating row colours in the TreeView. My example uses a SetInterval instead of a loop to execute it to create a fun cascading affect when the rows need to change colour and to also prove what is happening.
It's very easy...
In your <body onLoad=""> function (I use a technique that doesn't need that) place the following line:
if($('t_wrapper'))setTimeout('PrepareTreeView()', 30);
t is the name of the TreeView and is the best way I could establish that the tree existed. t_wrapper is the name of the surrounding <div> that the control creates - so if it's there - so is the TreeView.
The Timeout is probably not necessary but I like it.
function AfterClientToggle(){
setTimeout('PrepareTreeViewAlt(t,0)', 30);
}
You need the AfterClientToggle to keep it updating each time a expand/contract is hit.
function PrepareTreeView(){
if($('t_wrapper'))PrepareTreeViewAlt(t,0);
//if($('p_wrapper'))PrepareTreeViewAlt(p,0);
}
I had this function PrepareTreeView because I had multiple TreeViews - I included it in case it was helpful.
Now here is the main function - it assigns the parentNode of the TextElement an alternating class - I've used 'A' and 'B' - you can the use
.A{background-color:#CCC;} etc. in your css file
It also uses a TestForParents function (at bottom) which essentially determines if the node can be seen at all and whether to include it in the sweep through assigning of class names.
The small loop at the bottom checks ahead for the next visible node.
The setInterval(tween,10) fires the command every 0.01 of a second which creates a nice ripple down effect - feel free to make it 0 or slow it down with a 20 or 30.
function PrepareTreeViewAlt(node,j){
var i = 0;
var theLength = node.AllNodes.length;
var interval_ID = setInterval(tween, 10);
function tween() {
if(TestParents(node.AllNodes[i],theLength)){
if(j == 0){
node.AllNodes[i].TextElement().parentNode.className = 'A';
j = 1;
}else{
node.AllNodes[i].TextElement().parentNode.className = 'B';
j = 0;
}
}
i++;
for(k=i;k < theLength;k++){
if(TestParents(node.AllNodes[i],theLength)){
break;
}else{
i++;
}
}
if(i >= theLength)clearInterval(interval_ID);
}
}
function TestParents(node,theLength){
for(k=0;k < theLength;k++){
if(!node.Parent){
return true;
}else if(!node.Parent.Expanded){
return false;
}else{
node = node.Parent;
}
}
}
Hope that makes someone's day - it sure made mine when I cracked it - if anyone is interested I've also managed to pull off columns in the treeview although it still has one bug when using dragging.