Styling individual nodes on the tree

[K]

Hi,

I've been going through the docs, trying different things and skimming
though this discussion group, but cannot find an answer to the
following question: how can I style individual nodes?

For example: I want to set the forground/background color, the icon
etc. on a node by node basis. Is this possible?

Also: Can I disable Icons on the tree altogether?

Tnx,

K.

[John Arrowwood]

The answer depends on what you mean by the question.  For example, if you have a particular node that should always look a certain way, give that node an ID, and then you can do styling using CSS.  Or you can give nodes a 'class' and style it that way.  You can also put id/class/style information in the definition of the node.  So, as you feed the node information to the script, you can embed the style information.  Or, like what I am doing: create a plugin that generates custom HTML.  Lots of options!

There are several ways of turning off icons.  If you use a theme that doesn't provide any, you won't get any.  If you override the theme CSS, you can also turn them off.  Or you can turn them off in the call to init().  Or you can set the appropriate value in the node definition to turn them off.  Pick your favorite! :)

--
You received this message because you are subscribed to the Google Groups "jsTree" group.
To post to this group, send email to jst...@googlegroups.com.
To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jstree?hl=en.

--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/

[K]

Hi John,

Tnx for the response.

So, what do I mean... :-)

My tree is database record driven and is very dynamic in nature, so
each view of the tree can can have a completely different structure.

All nodes do have an ID though. Serverside I generate the initial JSON
data for the nodes and there I have the info for the styling per node.
I'd like to include the styling info directly in the JSON string and
not generate a custom stylesheet for each time the tree is viewed.

I tried adding style info through the attributes of the node, but that
styling info goes into the style attribute of the corresponding LI
element, whereas I'd like it to go into the A element, as I need to be
able to set the color style attribute and that doesn't cascade down
from the LI element to it's child A element containing the node's
text. Am I missing something?

You also say: "Or you can set the appropriate value in the node

definition to turn them off."

What is the "appropriate value" for turning the icon off in the node
info?

Tnx,

K.

> > jstree+un...@googlegroups.com<jstree%2Bunsu...@googlegroups.com>

[John Arrowwood]

On Mon, Jan 11, 2010 at 12:17 PM, K <kyd...@gmail.com> wrote:

Hi John,

Tnx for the response.

So, what do I mean... :-)

My tree is database record driven and is very dynamic in nature, so
each view of the tree can can have a completely different structure.

All nodes do have an ID though. Serverside I generate the initial JSON
data for the nodes and there I have the info for the styling per node.
I'd like to include the styling info directly in the JSON string and
not generate a custom stylesheet for each time the tree is viewed.

I tried adding style info through the attributes of the node, but that
styling info goes into the style attribute of the corresponding LI
element, whereas I'd like it to go into the A element, as I need to be
able to set the color style attribute and that doesn't cascade down
from the LI element to it's child A element containing the node's
text. Am I missing something?

Yep.  Here's a quote from the documentation:

If you need to specify some attributes for the <a> node in the output, or want to set a custom icon instead of a string, pass an object for the data section. Like so:

{ 
	attributes: { id : "node_identificator", some-other-attribute : "attribute_value" }, 
	data: { title : "Node title", icon : "path_to/icon.pic", attributes : {"key" : "value" } }, 


	// Properties below are only used for NON-leaf nodes
	state: "closed", // or "open"
	children: [ /* an array of child nodes objects */ ]
}

The key/value can be 'style'.  Or any other html attribute, for that matter, like 'class' or 'target'.

You also say: "Or you can set the appropriate value in the node

definition to turn them off."

What is the "appropriate value" for turning the icon off in the node
info?

To turn the icon off, use icon:false, I believe.  See above.

--

John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com