Setting font color in Fancytree "extraClasses" not applying

Question

I have a tree in my web app that utilises fancytree. It all works very well except that for some nodes I need to set the font color to red. I'm using extraClasses in my JSON which is all applying perfectly against the appropriate nodes and can be verified using the browser's debugger.

However, while I can easily apply font-style and background-color CSS attributes, for some reason the font color is not being carried down to the base span.fancytree-title. Instead all nodes are black.

CSS:

span.OrgDataTreeNotChecked
{
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

C# generating the relevant extraClasses:

if (org.Status == "NotChecked")
    item.extraClasses = "OrgDataTreeNotChecked";

In the browser debugger I can see this clearly:

You can see here that the color has made its way into the attributes for the element:

However, when I highlight the span.fancytree-title I can see that the color is being overridden and using black instead.

I've tried various things like trying to override the color for those nodes in jQuery in both the .init event of the Fancy tree and in the document ready function:

$(".OrgDataTreeNotChecked").closest(".fancytree-title").css({ "color": "red" });

I even tried the brute force approach of setting the color for all .fancytree-title elements:

$(".fancytree-title").css({ "color": "red" });

This also had no effect. I'm fresh out of ideas. It just doesn't want to apply the font color and only the font color. Every other attribute works just fine. Help!

Answer 1

After much trial and error, and using Chrome's "Inspect element" functionality, here's what worked for me:

span.OrgDataTreeNotChecked > span.fancytree-title {
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

It seems that the class specified in the extraClasses string gets applied to a fancytree-node span that wraps a fancytree-title span, so "drilling down" with the right angle bracket operator did the trick.

Answer 2

After considerable effort, I finally solved it. I wouldn't say it's a perfect solution but it works.

The nodes are not loaded into the DOM until each parent is expanded, so the set contained in $(".OrgDataTreeNotChecked") is actually zero length on the init event of the tree and obviously in the ready function of the document.

There is, however, an expand event on the tree which fires as each node is expanded. On first load populates the DOM with the child nodes. So I had to put into the tree the following event handler:

expand: function(data) {
    $(".OrgDataTreeNotChecked").children(".fancytree-title").css({ 'color': 'red' });
},
...

which then sets everything red. The reason why I say it isn't a perfect solution is because on each load the text appears black first for just a moment, then turns red that is supposed to be red.

It will do for now, but if anyone has a better suggestion, please say so :)

Answer 3

in your css file add this:

span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title,
span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title:hover {
    color: red;
}

your custom class must be applied to li element:

<li class="folder expanded">Override CSS style per node
    <ul>
        <li class="OrgDataTreeNotChecked">item</li>
        <li class="folder OrgDataTreeNotChecked">item</li>
    </ul>

working example here: http://wwwendt.de/tech/fancytree/demo/sample-theming.html

Answer 4

Try like this way. Hopefully it will fix the problem.

span.fancytree-title.OrgDataTreeNotChecked
{
background-color: #EFFAFA;
color:red !important;
font-style: italic;
}