[Tree] Node highlight colors

[DKPlugins]

Hi.

I need to change the color of the line selection (p-highlight) depending on whether the node is fully or partially selected.
Green for the full node and orange for the partial node.

How can I do this?

[qwadrox]

Hi @DKPlugins!

I assumed you wanted to change the colors of the nodes when they're focused. On different level, different colors.

.mytree.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
  box-shadow: inset 0 0 0 0.15rem green !important; /* Green */
}

/* Nesting */
.mytree.p-tree
  .p-tree-container
  .p-treenode
  .p-treenode:focus
  > .p-treenode-content {
  box-shadow: inset 0 0 0 0.15rem orange !important; /* Orange */
}

Example code:
https://stackblitz.com/edit/t5i47h?file=src%2Findex.css

This approach uses the cascading nature of CSS, but there are many other ways, for instance:

• Applying inline style or classes on the treeNode itself: https://primereact.org/tree/#api.TreeNode
• Using nth-child

[DKPlugins]

Hi @DKPlugins!

I assumed you wanted to change the colors of the nodes when they're focused. On different level, different colors.

.mytree.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
  box-shadow: inset 0 0 0 0.15rem green !important; /* Green */
}

/* Nesting */
.mytree.p-tree
  .p-tree-container
  .p-treenode
  .p-treenode:focus
  > .p-treenode-content {
  box-shadow: inset 0 0 0 0.15rem orange !important; /* Orange */
}

Example code: https://stackblitz.com/edit/t5i47h?file=src%2Findex.css

This approach uses the cascading nature of CSS, but there are many other ways, for instance:

• Applying inline style or classes on the treeNode itself: https://primereact.org/tree/#api.TreeNode
• Using nth-child

No, I meant changing the highlighting of nodes that are partially or fully selected, as in the screenshot below.

[qwadrox]

I see. Then you can apply inline styles or classes on the treeNode itself, as I said. When the selection changes, you can update the node array. I don't know exactly how the highlights or background colors should be on the different deps according to your requirements, but here is a sample, and you can play with it further:
https://stackblitz.com/edit/ymebpg?file=src%2FApp.jsx

Another way you might be able to achieve this is using the nodeTemplate:
There is an example in the documentation how to use templating: https://primereact.org/tree/#template

Here is another solution made by me using templating:
https://stackblitz.com/edit/c127qh?file=src%2Findex.css

For most scenarios, especially with larger trees or frequently changing selections, the templating approach is likely to be more performant.

[DKPlugins]

I see. Then you can apply inline styles or classes on the treeNode itself, as I said. When the selection changes, you can update the node array. I don't know exactly how the highlights or background colors should be on the different deps according to your requirements, but here is a sample, and you can play with it further: https://stackblitz.com/edit/ymebpg?file=src%2FApp.jsx

Thank you very much! The first option is what I need!