Processing...
Description & Source Code

The tree component can be configured to automatically generate checkboxes or radio buttons for selecting its tree items by setting its attributes.

For allowing selecting a single list item only, set checkmark="true", and each list item would be annotated with a radio button. For allowing the selection of multiple list items, additionally, set multiple="true".

multiple_selection.zul
<tree id="tree" rows="7" multiple="true" checkmark="true">
	<treecols>
		<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"/>
						<treecell label="Item 2.2 description"/>
					</treerow>
				</treeitem>
			</treechildren>
		</treeitem>
		<treeitem label="Item 3"/>
	</treechildren>
</tree>
			
multiple_selection_ctrl.zul
<vlayout>
	<checkbox label="Enable checkmark" checked="true" onCheck="tree.checkmark = self.checked" />
	<checkbox label="Multiple selection" checked="true" onCheck="tree.multiple = self.checked" />
</vlayout>