<!-- replace the http://www.zkoss.org/zksandbox/#g11 example with the following code -->
<hlayout width="100%" height="500px">
<vlayout hflex="1" vflex="1">
	Four style of trees :
	<radiogroup
		onCheck='tree.setZclass("z-"+self.selectedItem.value)'>
		<vlayout>
			<radio label="Default" value="tree" selected="true"/>
			<radio label="Dot Tree" value="dottree" />
			<radio label="XP Explorer" value="filetree" />
			<radio label="Vista Explorer" value="vfiletree" />
		</vlayout>
	</radiogroup>
</vlayout>
<tree id="tree" hflex="2" vflex="1">
	<treecols sizable="true">
		<treecol label="Name" />
		<treecol label="Description" />
	</treecols>
	<treechildren>
		<treeitem>
			<treerow>
				<treecell label="Item 1" />
				<treecell label="Item 1 description" />
			</treerow>
		</treeitem>
		<treeitem>
			<treerow>
				<treecell label="Item 2" />
				<treecell label="Item 2 description" />
			</treerow>
			<treechildren>
				<treeitem>
					<treerow>
						<treecell label="Item 2.1" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow>
								<treecell label="Item 2.1.1" />
							</treerow>
						</treeitem>
						<treeitem>
							<treerow>
								<treecell label="Item 2.1.2" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>
				<treeitem>
					<treerow>
						<treecell label="Item 2.2" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow>
								<treecell label="Item 2.2.1" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>
			</treechildren>
		</treeitem>
		<treeitem label="Item 3" />
	</treechildren>
</tree>
</hlayout>