Alternating Row Styles in TreeView that auto update

2 posts, 0 answers
  1. Hamish Fraser
    Hamish Fraser avatar
    18 posts
    Member since:
    Jul 2004

    Posted 10 Oct 2006 Link to this post


    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

    browser support

    all browsers supported by r.a.d.controls

    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(){

    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(j == 0){
                    node.AllNodes[i].TextElement().parentNode.className = 'A';
                    j = 1;
                    node.AllNodes[i].TextElement().parentNode.className = 'B';
                    j = 0;
            for(k=i;k < theLength;k++){
            if(i >= theLength)clearInterval(interval_ID);
    function TestParents(node,theLength){
        for(k=0;k < theLength;k++){
                return true;
            }else if(!node.Parent.Expanded){
                return false;
                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.

  2. Paul
    Paul avatar
    4281 posts

    Posted 11 Oct 2006 Link to this post

    Hello Hamish,

    Thank you for the time you dedicated to assemble this application and post it in this code library thread. We have added 2000 telerik points to your account for the involvement - this solution will surely help other people which are looking for a similar implementation.

    Kind regards,

    the telerik team

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.