first sibling class

[barabas]

I want to add a class (dynatree-firstsib) to the first item of the whole tree, so the first child of the hidden dynatree rootnode. I tried to setup the code based on the code for adding the lastsib class, but i can't get it to work. So how can i add a css class to the first child of the hidden rootnode?

Thanks in advance

[barabas]

anyone with a solution for this?

Op woensdag 26 december 2012 16:44:19 UTC+1 schreef barabas het volgende:

[Shawn Crane]

Hi barabas,

var dtRoot = $("#tree").dynatree("getRoot");

var dtChildren = dtRoot.getChildren();        

dtChildren[0].data.addClass = 'redtext';

working example: http://jsfiddle.net/KUdtX/1/

Hope that helps.

Cheers,

Shawn.

[Shawn Crane]

Sorry got my link wrong:

http://jsfiddle.net/KUdtX/8/

[barabas]

Thanks shawn, solution works great but is it possible to add this class to the li of the first element?

<li class=""> <!-- <-- add class to this li -->
    <span class="dynatree-node dynatree-exp-c dynatree-ico-c">
       <span class="dynatree-connector"></span>
       <span class="dynatree-icon"></span>
       <a href="#" class="dynatree-title">Item 1</a>
    </span>
</li>


Thanks in advance!

Op donderdag 10 januari 2013 02:52:30 UTC+1 schreef Shawn Crane het volgende:

[Shawn Crane]

I don't think it is possible, although if the author is around he may be able to correct me.

 

I'm pretty sure I had that difficulty when I first started using Dynatree - wanting classes and id's to be stored on the LI. From memory once I accepted that I needed to use the Dynatree methods to work with the tree then everything became easier. It is still the best (free) javascript treeviewer that I've found, and one of the few that is maintained!

 

Is there a technical reason that it must be on the LI?

[barabas]

Yeah i tried to make some modifications to the dynatree.js file but i could make it work to determin the first item after the root item

I use the tree as forest control, so i mean not 1 node that extends from the hidden root node (dynatree root node) but multiple item that are visible root nodes, that's why i want to put a class on the very first li (item) after the hidden root node from dynatree, so i can manipulate the image before the item. So i can make it look like that item isn't connected to something above it. I hope you understand what i mean? :p

But indeed it's one of the best (free) jquery tree plugins you can find!

Op donderdag 10 januari 2013 20:00:10 UTC+1 schreef Shawn Crane het volgende:

[Shawn Crane]

Okay, I think I get you.  I think you're going to need to play with the CSS to get that to work.

Unfortunately the way it has been designed means that there are two separate styles that are applying the vertical lines, one on the LI and another on the connector span. The following jsfiddle uses the first-child pseudo selector to find the initial LI and hide the connector. You should be able to find some way to extend this to all the first LI's in the tree, it should hopefully get you moving in the right direction. 

http://jsfiddle.net/KUdtX/11/

This is a very good article on CSS selectors if you need it: http://www.w3.org/TR/CSS2/selector.html

[mar10]

I don't know if it helps in your case, but the onRender event passes you a HTML element that may be used with jQuery, for example:

onRender: function(node, nodeSpan) {
    $(nodeSpan).find("a.dynatree-title").css("color", "red");
}

Also, a DynaTreeNode has node.li, node.ul and node.span properties that you can access.

Hope this helps

Martin