best way to change Selected Node Path CSS

4 posts, 0 answers
  1. Ted
    Ted avatar
    47 posts
    Member since:
    Jan 2008

    Posted 02 Feb 2011 Link to this post

    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.
  2.
  3. Stefan
    Stefan avatar
    16 posts
    Member since:
    Jun 2010

    Posted 03 Feb 2011 Link to this post

    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.
  5. Ted
    Ted avatar
    47 posts
    Member since:
    Jan 2008

    Posted 03 Feb 2011 Link to this post

    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?
  7. Stefan
    Stefan avatar
    16 posts
    Member since:
    Jun 2010

    Posted 04 Feb 2011 Link to this post

    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);
    }

  8.
Back to Top