Tree

Listbox

• Demonstration: N/A
• Style Guide: N/A
• Available in ZK EE only

 since 9.5.0

Related components

Auxhead, Auxheader, Treecell, Treecol, Treefooter, Treeitem, Treerow

Required Settings

Attributes	Description
aria-label	Describe the tree.

Keyboard Support

Key	Description
ArrowUp/ArrowDown	Select Treeitems or focus on Treecols.
ArrowLeft/ArrowRight	If the treeitem is openable, toggle the open status. Focus on Treecell or Treecols.

Example

<zk xmlns:ca="client/attribute">
    <tree ca:aria-label="Option tree">
        <treecols>
            <treecol width="100px" id="tcola" label="A" />
            <treecol label="B" />
            <treecol label="C" />
        </treecols>
        <treechildren>
            <treeitem id="ti0" selected="true">
                <treerow>
                    <treecell label="A" />
                    <treecell label="B" />
                    <treecell label="C" />
                </treerow>
                <treechildren>
                    <treeitem selected="true">
                        <treerow>
                            <treecell label="A-1" />
                            <treecell label="B" />
                            <treecell label="C" />
                        </treerow>
                    </treeitem>
                    <treeitem>
                        <treerow>
                            <treecell label="A-2" />
                            <treecell label="B" />
                            <treecell label="C" />
                        </treerow>
                    </treeitem>
                </treechildren>
            </treeitem>
        </treechildren>
    </tree>
</zk>