Tree: make a click on a folder's label expand it

Ignition
, ,
1

Hello folks,

I have a tree. It’s a beautiful tree. But the handles are tiny, and I’d like to make it easier for my users to expand a folder, by clicking on the folder’s label.

Can it be done ?

Thanks and good day to you !

2

Hi @pascal.fragnoud you can only very slightly do it via the properties, but literally only by a couple of pixels. It seems to be constrained by one of it’s parents which is cannot be styled as far as I can see.

This may be possible via theming but I have not tried this myself so :man_shrugging:. If I give it a try at some point I will let you know the results.

3

Thanks Matthew, what properties would that be ?

I kind of worked around this with a change script on props.selection. The value property of my folders is an empty string.

if self.props.selectionData[0].value == "":
	self.props.items[int(self.props.selection[0])].expanded = not self.props.items[int(self.props.selection[0])].expanded

The first problem was that the initial value for selection being 0, this didn’t work when clicking on the first folder. So I changed the initial value to “-1”. And it works.
Now, the problem is that once you’ve clicked on a folder and it expanded, it is still selected, and so clicking on it again to collapse it (or expanding it if you just collapsed it) doesn’t change the value of selection, and thus doesn’t trigger the change script.
Resetting the value to “-1” in the script makes it trigger itself, you can imagine what happens then :wink:

I’m trying to find a way to make it behave better than this, I’'ll update here if I figure something out.

Ignition people, please make this easier !

4

Firstly, I completely misread your OP and thought it was around making the icons bigger to make them more selectable, so apologies (me = FAIL :sweat_smile:).

I’m sure I’ve attempted something similar in the past :thinking: I will see if I can find what I did and have a play.

5

Well, I made something that works… BUT it prints a huge red error message in the browser console :smiley:
So I set up the folder’s values to "folder", check for that value in the value change script on selection, and if it matches I expand the item at the index found in selection, then change selection and selectionData.value to “-1” and “” respectively. I suspect it’s that last part that gives the error, but… it works.
I’ll keep toying with this to see if I can find an error-less way of doing it.

1 Like
6

Hi @pascal.fragnoud, finally had a chance to play properly. The following code works if you put it on the onItemClicked event for the tree:

	# Get a reference to the items property
	items = self.props.items
	
	# Loop through the items to get the correct item (ignore the last iteration)
	for index in event.itemPath[:-1]:
		items = items[index].items
		
	# Last iteration, so toggle the expanded property
	items[event.itemPath[-1]].expanded = not items[event.itemPath[-1]].expanded
1 Like
7

Oh cool, I totally missed that onItemClicked event !
Thanks for the script, though I can simplify it a lot, since my tree has only one level of depth - only the very first level can be expanded.

1 Like
8

Personally, I would use the script as is. It will work for a single level of depth and there really isn’t a performance hit or anything for using it as is. An added bonus is that the script can handle multiple layers of depth and if it’s ever needed, it’s already there.

Never say never.

9

Well in this case I can confidently say it will never go deeper than one level, so there’s not much point in handling more.
Maybe someday for another tree… but not right now !