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

Adding an expanded css class to the node (not the link)

1 Answer 65 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Milkman Dan
Top achievements
Rank 1
Milkman Dan asked on 22 Jul 2008, 09:06 PM
I'd like to have a class dynamically added to the topmost LI in the hierarchy when a descendant page is the current page. The default behavior adds the .rpExpanded class to the first anchor of the topmost node, but this does me no good as I need to style the whole LI, not just the anchor. Has anyone found a solution to this?

Just in case any of this is unclear, I'll attempt to diagram the node I'd like to dynamically class:

UL
    |.... LI.rpItem
    |.... LI.rpItem (I need a class! this node contains the current page but how am I to show this with styling?)
            |.... A.rpExpanded (why am I classed? I could easily be styled with descendant selectors!)
                   |....UL.rpGroup
                          |.... LI.rpItem
                                  |.....A.rpSelected (I'm the current page)
                          |.... LI.rpItem
                                  |.....A
    |.... LI.rpItem

My PanelBar is databound, so templating probably isn't going to be an option. Thanks in advance for any help!

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Jul 2008, 01:06 PM
Hello Milkman Dan,

You make a good point about the location of the CSS classes, however many of our clients are frustrated with descendant selectors; furthermore, there is the problem that link elements do not inherit the color CSS property correctly under IE.

Having that said, you can add the following script to your page and it will set the CSS styles to the necessary ones:
function pageLoad() 
    (function iterateTreeView (root) { 
        var treeNodes = root.get_nodes(); 
         
        var item, textElement; 
         
        for (var i = 0, len = treeNodes.get_count(); i < len; i++) 
        { 
            item = treeNodes.getItem(i); 
 
            var textElement = item.get_textElement(); 
             
            if (textElement.className != "rtIn"
            { 
                item.get_element().className += " " + textElement.className.replace('rtIn'''); 
                 
                textElement.className = "rtIn"
            } 
             
            if (item._hasChildren()) 
            { 
                iterateTreeView(item); 
            } 
        } 
    })($find('<%= RadTreeView1.ClientID %>')); 


As a side note, you could also use templates for data-bound items, as described in our online help.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
PanelBar
Asked by
Milkman Dan
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or