How to apply different style for tree component in individual item

[senthilpandi.v]

Hi Team,

I am using the Tree component in one of my applications. I need to apply different fonts for parent items and their child items. However, the Tree component currently supports only one common style, which applies to all items.

[nminchin]

Style Tree Items programmatically

Yes, but not without some stylesheet CSS. Some examples: Note: these examples will apply to ALL Tree components if used as. To limit these to Trees with a specific Perspective Style applied, prefix the selectors with the Perspective Style path like this: /* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */ .psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] { background-color: aliceblue; } /***********************/ /* Tree Vi…

[senthilpandi.v]

Thank you for your response. This is great. I would like to assign different icons to individual parent and child items—would it be possible to customize the icons accordingly?

[ryan.white]

You should be able to define the icons for each item in the tree structure. You have to specify it per item when building the items property.

Each item in items needs to have the icon key added, and then you can provide the path to the icon that you want to use there.

{
  "data": {
  },
  "icon": {
    "color": "#005EB8",
    "path": "material/apartment",
    "style": {}
  },
  "label": "Place A",
  "expanded": false,
  "items": []
}

Different icons per tree item