flex expand and collapse icon in Tree control

Question

I am having some trouble with the flex Tree control. I have a control in my system and of course it is data driven.

I have a group which shows a folder icon and that's fine but it also shows an expand icon when the item has no children.

I don't what it to show the expand icon when the group has no children but I do want to show the folder icon, because it is different entities in my system.

here's an example of what I'm talking about. I still want to show the folder icon, the expand Icon should be hidden in this case only for the child icon.

Answer 1

It's easy to get this problem if you're trying to use a non-XML data provider (e.g. setting the dataProvider property of the Tree to a structure of nested ArrayCollections). In that case, the trick is to give each node a children() function that returns null (as opposed to an empty set) if there are no children.

However, assuming you're using a plain old XMLListCollection, what are you doing to make it display a folder icon at all? If you're giving the node an empty set of children, then once again, the expand icon will be displayed. The list of child nodes must be null. Alternatively, if you set the isBranch property of the node to true, it will display 'incorrectly' as you have it above.

The easiest way to display a folder icon without the expand icons is to just replace all the (really rather ugly) default icons with your own, which gives you complete control of how they appear. What you would do is set three properties: defaultLeafIcon, folderClosedIcon, and folderOpenIcon (good example at Flex Examples):

[Embed(source="folder.png")]
public var iconFolder:Class;

[Embed(source="folder.png")]
public var iconFolderOpen:Class;

<mx:Tree dataProvider="{yourData}"
    defaultLeafIcon="{iconFolder}"
    folderClosedIcon="{iconFolder}"
    folderOpenIcon="{iconFolderOpen}" />

I see you're already using the Silk icon set, which has a rather nice closed folder icon. For some reason it doesn't contain an open folder icon though, but you can just use a closed one or anything else.

You could also just use an iconFunction (Flex Examples again), though I think the approach above is easier for what you're trying to achieve.

If it's none of those problems, give us a bit more detail on the content of your data provider and existing tree properties and see if we can't figure it out then. Hope that helps a bit anyway.