Processing...
Description & Source Code

Rows in grid may be grouped to categorize data. Each group may be expanded or collapsed to control the amount of information shown for a particular category.

Grouping in grid is done by inserting the <group> tag; the scope of a declared group starts from the row immediate after the group tag to the beginning of following group tag. Groupings can be made without visible distinction by leaving out the labels in the group tags. A visible grouping can be collapsed by clicking on the small expansion button next to its label.

grouping.zul
<grid>
	<columns sizable="true">
		<column label="Brand" sort="auto" />
		<column label="Processor Type" width="150px" sort="auto" />
		<column label="Memory (RAM)" width="120px" sort="auto" />
		<column label="Price"  width="100px" sort="auto" />
		<column label="Hard Drive Capacity" width="150px" sort="auto" />
	</columns>
	<rows>
		<group label="Dell" />
		<row>
			<label value="Dell E4500 2.2GHz" style="padding-left:15px"/>
			<label value="Intel Core 2 Duo" />
			<label value="4GB RAM" />
			<label value="$261.00" style="color:green" />
			<label value="500GB" />
		</row>
		<row>
			<label value="XP-Pro Slim Dell-Inspiron-530-s" style="padding-left:15px" />
			<label value="Intel Core 2 Duo" />
			<label value="4GB RAM" />
			<label value="$498.93" style="color:green" />
			<label value="500GB" />				
		</row>
		<row>
			<label value="Dell P4 3.2 GHz" style="padding-left:15px" />
			<label value="Intel Pentium 4" />
			<label value="8GB RAM" />
			<label value="$377.99" style="color:green" />
			<label value="500GB" />				
		</row>
		<group label="Compaq" />
		<row>
			<label value="Compaq SR5113WM" style="padding-left:15px" />
			<label value="Intel Core Duo" />
			<label value="2GB RAM" />
			<label value="$279.00" style="color:green" />
			<label value="160GB" />				
		</row>
		<row>
			<label value="Compaq HP XW4200" style="padding-left:15px" />
			<label value="Intel Pentium 4" />
			<label value="8GB RAM" />
			<label value="$980.00" style="color:green" />
			<label value="500GB" />				
		</row>
		<groupfoot>
			<cell colspan="5">
				<label value="This a summary about Compaq Desktop PCs" />
			</cell>
		</groupfoot>
	</rows>
</grid>