# Setting selected item programmatically in Perspective tree

**URL:** <https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [November 12, 2019, 2:08pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875 "2019-11-12T14:08:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [November 12, 2019, 2:08pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875/1 "2019-11-12T14:08:35Z")

</div>

I’m trying to set the selected item programmatically in a Tree component but am having trouble finding any documentation on how to do this. It didn’t seem to work when I tried setting `selection`/`selectionData`. Specifically, I’m doing this within an `onStartup` event script so that on page load (or component load), one of the rows is selected automatically.

---

<div class="post-metadata">

**Author:** ![RadicalRumin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/radicalrumin/32/11543_2.png) [@RadicalRumin](https://forum.inductiveautomation.com/u/RadicalRumin)\
**Post date:** [November 12, 2019, 2:34pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875/2 "2019-11-12T14:34:20Z")

</div>

You should be able to set the `selection` prop with a list containing the path for your item. The path consists of index numbers and / for every level of selection. So for example `0/0/0` = `Item 1/Child 1/Grandchild1` and `0/0/1` = `Item 1/Child 1/Grandchild2`

This code worked for me on a button. If you want to use an onStartup event make sure your component path is correct.

```auto
selectionList = ['0/0/0', '0/0/1']
self.getSibling("Tree").props.selection = selectionList

```

Edit: For clarification, the `selectionData` handles itself automatically.

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [November 12, 2019, 2:51pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875/3 "2019-11-12T14:51:06Z")

</div>

Well huh, I thought that’s what I was doing before but I must have been doing something wrong. That worked, thank you!

---

<div class="post-metadata">

**Author:** ![RadicalRumin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/radicalrumin/32/11543_2.png) [@RadicalRumin](https://forum.inductiveautomation.com/u/RadicalRumin)\
**Post date:** [November 12, 2019, 3:58pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875/4 "2019-11-12T15:58:45Z")

</div>

The only problem you could experience is that the selection won’t show up if the path is collapsed. You’ll just have to make sure the `expanded` prop inside of `items` is set to true for the correct paths. Simple enough.

```auto
self.getSibling("Tree").props.items[index]["expanded"] = 1
#for any children there is another items list
self.getSibling("Tree").props.items[index]["Items"][index]["expanded"] = 1

```

---

<div class="post-metadata">

**Author:** ![Ajay\_Gupta](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Ajay\_Gupta](https://forum.inductiveautomation.com/u/Ajay_Gupta)\
**Post date:** [March 11, 2025, 6:10pm UTC](https://forum.inductiveautomation.com/t/setting-selected-item-programmatically-in-perspective-tree/29875/5 "2025-03-11T18:10:10Z")

</div>

This worked for me as well.  
But after selection property is correctly updated, the appearance.selectedStyle property does not get applied.

I want the selected node's background color to be blue and text color to be white. Without the programmatical change to the selection property this styling works correctly but not with selection property set through script.

Is there any suggestion on this?

Thanks,  
Ajay