Ability to style entire selected treenode

[ceottaki]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

When a node is selected in a tree, the class ui-state-highlight is added to the span inside the node that contains the text, allowing just the text to be styled when selected. The div that contains the entire node does not change:

Expected behavior

It is desirable to allow users to optionally style the entire tree node content when selected:

I would suggest that a new class is added, not ui-state-highlight which would contain style already, but an empty class like ui-treenode-content-selected which would allow the user (and theme creators) to add their custom style to it.

I will submit a pull request shortly with this minor change.

What is the motivation / use case for changing the behavior?

The flexibility of styling is a great characteristic of PrimeNG and is great for most components but the tree component is generally less flexible and our designer would like to "flex his muscles" and apply a design change for a selected node in the tree that is applied to the entire node as displayed above.

Please tell us about your environment:
OS: Windows 7 Pro SP1 64-bit
IDE: Visual Studio Code (latest)
node: 6.9.5
npm: 4.3.0

• Angular version: 4.2.4

• PrimeNG version: 4.0.3

• Browser: all

• Language: TypeScript 2.3.4

[bublai]

@ceottaki
I have created a project using template "Building Single Page Applications on ASP.NET Core with JavaScriptServices" and used PrimeNg for Tree component.

The environment used:
OS: Windows 8.1, 64-bit
IDE: Visual Studio 2017 Community
node: 7.4.0
npm: 4.0.5
Angular version: 4.1.2
PrimeNG version: 4.1.2
Target Browser: Chrome, IE 9, 10, 11 & Edge
Language: TypeScript 2.3.2

I used the basic Tree i.e. <p-tree [value]="files">
Tree collapse & Expand don't work in IE. Chrome its working fine. I have added recommended JS file but no help,

<script src="~/lib/es6-shim.min.js"></script> <script src="~/lib/system-polyfills.js"></script> <script src="~lib/shims_for_IE.js"></script>

am i missing anything to be added for IE to work !!

[mkroeschel]

@ceottaki @cagataycivici
Is it possible, that you post an example how I can select the full row when selecting the node?