Different Style/color depending on node.nodeType

[mdawood1991]

Hi,

Thanks for this Tree-Control.

I'm having a bad day and need some help. I want to apply a different color to a group depending on Group type. the Group Type is returned from the server under node.nodeType

the nodeType is either 1, 2, 3 or 4

I need to apply a different color when the nodeType == 1 , different for nodeType == 2 and so on.

Is this possible using the Tree config options?

Kind Regards Dawood Awan

[yoavaa]

I think you can do that using a node template. Use ng-class in the template with condition on node type and have the type icon as part of the template. (Use the tree icons for just open close icons - [+] [-]

On Wed, Aug 24, 2016, 6:03 PM Dawood Awan [email protected] wrote:

Hi,

Thanks for this Tree-Control.

I'm having a bad day and need some help. I want to apply a different color to a group depending on Group type. the Group Type is returned from the server under node.nodeType

the nodeType is either 1, 2, 3 or 4

I need to apply a different color when the nodeType == 1 , different for nodeType == 2 and so on.

Is this possible using the Tree config options?

Kind Regards Dawood Awan

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wix/angular-tree-control/issues/248, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlJ3HJ3GAw-n9B5iM4qy5XJbmB0my0ks5qjF0qgaJpZM4JsGzM .

[mdawood1991]

This is what I trie:

<style>
    .site {color: #0099CC;}
    .category {color: #007E33;}
    .asset {color: #FF8800;}
</style>
<script type="text/ng-template" id="treeTemplate.html">

    <ul {{options.ulClass}}>

        <li ng-repeat="node in node.{{options.nodeChildren}} | filter:filterExpression:filterComparator {{options.orderBy}}"
            ng-class="{'site': node.nodeType == 2, 'category': site.nodeType == 3}"

            {{options.liClass}}
            set-node-to-data>

            <i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)"></i>

            <i class="tree-leaf-head {{options.iLeafClass}}"></i>

            <i>
                <b>
                    <div class="tree-label {{options.labelClass}} " ng-class="[selectedClass(), unselectableClass()]; {'site': node.nodeType == 2, 'category': node.nodeType == 3, 'asset': node.nodeType == 4  }"
                         ng-click="selectNodeLabel(node)" tree-transclude></div>
                </b>
            </i>

            <treeitem ng-show="nodeExpanded()"></treeitem>

        </li>
    </ul>
</script>

but the tree doesn't expand any more when I click on the node

[yoavaa]

you dropped the headClass logic in your ng-class attribute of li. The problem you see is caused because headClass adds the classes tree-leaf, tree-expanded and tree-collapsed classes as well as an optional selection class (from the options.liSelected option).

The tree-expanded and tree-collapsed classes place the display:none and display:block on the li element. Because you do not place those classes anymore, no-one is placing the display CSS and the tree does not expand anymore.