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

[Milkman Dan]

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!

[Alex Gyoshev]

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.