best way to change Selected Node Path CSS

[Ted]

What is the best way to change the CSS of the selected and Parent nodes in a tree?  Basically I want to mark the path to the current selected node in the tree by either making it Bold or setting it do a different font color.

[Stefan]

I had to do something similar (except I was modifying the expanded state). I ended up creating a recursive Javascript function that walked its way up the tree and modified each node.

This works for me:

function HighlightPath(treeNode) {

    $(treeNode.get_textElement()).css('color','orange');

    if (treeNode.get_parent() != treeNode.get_treeView())

        HighlightPath(treeNode.get_parent());

}

function NodeClicked(sender, e){
var node = e.get_node(); // gets a RadTreeNode object
HighlightPath(node);
}

<telerik:RadTreeView id="RadTreeView1" runat="server" OnClientNodeClicked="NodeClicked" />

There's probably a cleaner way to do it with a single jQuery selector.

[Ted]

Thanks Stefan,  that does work but since I am doing a post back with the tree view the post back resets the css changes.  is there a way to do this in C# in the NodeClick event?

[Stefan]

Hi Ted,

I haven't tested this, but I suspect this will work:

protected void Node_Click(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
{
    HighlightPath(e.Node);
}

private void HighlightPath(RadTreeNode node){
    node.Attributes["style"] = "color: orange";
    if (node.parentNode != null)
        HighlightPath(node.ParentNode);
}