0

Let me start with demonstration example: StackBlitz primeng p-tree.

I am using primeng to create a poll & answers kind of structure using p-tree. So i have a herarchy like :

Participants --> Polls --> Questions --> Answers

Every Questions have answer options. Array of list of nodes and childrens is as follows:

"label": "Bollywood",
    "children": [   
     {
        "label": "Do you prefer hollywood? [single]",
        "children": [
          {
            "label": "Yes",
            "selected": false
          },
          {
            "label": "No",
            "selected": true
          }
         ]
       }
     ]

I have added selected value to each of the children of answer options, so that for true values we can apply css to disthinigh among other options.

Screenshot below for current scenario:

enter image description here

I just want to highlight the options from the answers for which selected value is true. Purely looking with prospective of primeng p-tree control, i am curios to know how we can provide styiling to tree nodes. Please help me out, it will be grateful if you can go through the stackblitz example mentioned above. Thank you.

Shashank S Chandel
  • 193
  • 1
  • 17
  • Does this answer your question? [CSS :selected pseudo class similar to :checked, but for – MaxiGui Oct 16 '20 at 22:19
  • @MaxiGui Thanks for going through, but i am sorry to tell you that i am looking mainly for providing styles to primmeng tree nodes on conditional basis, i am able to apply css to entire node but i am failing to apply on a particular innermost node, i have demonstrated in stackblitz example it will be helpul if someone can help me into it. – Shashank S Chandel Oct 17 '20 at 05:52

1 Answers1

3

You can achieve this by using type of node in p-tree please go through documentation of Tree Templating. But first you need to modify your tree-account.json file or do some mapping to add type in your json. Adding a Stackblitz for same. Here I changed selected items font color as green.

Arun
  • 468
  • 3
  • 6