Adding a custom css class name to a tree node

4,862 views
Skip to first unread message

BabuMan

unread,
Jul 9, 2009, 1:36:08 PM7/9/09
to jsTree
Ivan,

I have a css class to change the font color of the node based on the
node's class name. So, I need to add a custom class name to the ancor
tag of the <li> tag (Or is it the right place to add the class to?).
I want to add this class name to the tag while I am dynamically
creating the node. I appreciate it if you can tell me where to insert
this code in and what exact code I insert?

And below is the code to create my tree nodes.

function PopulateChildren(tree, parentNode, nodes)
{
$.each(nodes, function(i, item)
{
tree.create
(
{
attributes:
{
id: item.attributes.id,
populated: item.attributes.populated,
key: item.attributes.key,
parentId: item.attributes.parentId,
taxId: item.attributes.taxId,
rel: item.attributes.rel,
mdata: item.attributes.mdata
},
data: item.data.title
},
$("#" + parentNode.id)
);
});
}


Thanks.

Babu.

vakata

unread,
Jul 9, 2009, 3:04:43 PM7/9/09
to jsTree
have you tried placing this in in the attributes object:

'class' : 'your-class-here'

NOTE the ' around class - make sure you put them!
Let me know if this works!

Cheers,
Ivan

BabuMan

unread,
Jul 11, 2009, 10:33:25 AM7/11/09
to jsTree
Ivan,

I tried your suggestion. But it didn't work. Here is my code

function PopulateChildren(tree, parentNode, nodes)
{
$.each(nodes, function(i, item)
{
tree.create
(
{
attributes:
{
id: item.attributes.id,
'class': item.attributes.cssClass, // for 'Taxonomy' and
'Category'
populated: item.attributes.populated,
key: item.attributes.key,
parentId: item.attributes.parentId,
taxId: item.attributes.taxId,
rel: item.attributes.rel,
mdata: item.attributes.mdata
},
data: item.data.title
},
$("#" + parentNode.id)
);
});
}

And my css is is below:
/* My custom color */
.tree li.Category { color:rgb(0,0,255)} // I tried with '#Hex'
notation too.

The class gets added properly and I can see it. Here is the
constructed html.

<li class="Category leaf" id="Cat30" jQuery1247322061802="52"
mdata="{creatable : true,draggable : true,clickable : true,deletable :
false,renameable : true,drag_copy : true}" populated="false" key="30"
rel="TaxCats" taxId="2" parentId="29" nodeIndex="2" sizcache="224"
sizset="0">

But the color does not get applied. Can you help please?

Babu.
> > Babu.- Hide quoted text -
>
> - Show quoted text -

vakata

unread,
Jul 11, 2009, 10:58:10 AM7/11/09
to jsTree
Hi,
just modify your css a bit - sorry I did not tell you that earlier.
Make your rule like this:
.tree li.Category a { color:rgb(0,0,255) !important; }

Notice the " a" and the " !important" parts - it may work without the !
important - I have not tried it.

Best regards,
Ivan

BabuMan

unread,
Jul 11, 2009, 12:06:13 PM7/11/09
to jsTree
Thanks Ivan,

That worked!!

Babu.

> > > - Show quoted text -- Hide quoted text -

Reply all
Reply to author
Forward
0 new messages