Theme:
Processing...
Description & Source Code

The master detail feature allows a grid to behave like a tree, allowing a row to expand and show more details with respect to the row item.

Using <detail>, developers can embed detailed content (other ZK components) enclosed by it, and it is allowed to be expanded or collapsed to show/hide the detailed content.

master_detail.zul
<zk>
	<style src="/widgets/grid/master_detail/style.css" />
	<grid oddRowSclass="myodd">
		<columns>
			<column width="40px" />
			<column sort="auto" />
			<column width="100px" label="Price" sort="auto" />
			<column label="Item location" sort="auto" />
		</columns>
		<rows>
			<row>
				<detail open="true">
					<hlayout>
						<image sclass="myimg" width="100px" height="100px"
							src="/widgets/grid/master_detail/img/item1.jpg" />
						<vlayout>
							<label value="Item Specifics - Item Condition"
								sclass="heavy-italic" />
							<hlayout>
								<label value="Condition:" />
								<label value="Used" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Brand:" />
								<label value="Apple" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Technology:" />
								<label value="DVI" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Monitor Type:" />
								<label value="LCD/Flat Panel" sclass="heavy" />
							</hlayout>
						</vlayout>
					</hlayout>
				</detail>
				<label value="Apple 20-inch Aluminum Cinema Display M9177/A" />
				<label value="US $202.50" sclass="price" />
				<label value="Tulsa, OK, United States" />
			</row>
			<row>
				<detail fulfill="onOpen">
					<hlayout>
						<image sclass="myimg" width="100px" height="100px"
							src="/widgets/grid/master_detail/img/item2.jpg" />
						<vlayout>
							<label value="Item Specifics" 
								sclass="heavy-italic" />
							<hlayout>
								<label value="Condition:" />
								<label value="Used" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Brand:" />
								<label value="Kyocera" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Phone Type:" />
								<label value="Phones without Service Contrac" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Product Type:" />
								<label value="Cell Phones" sclass="heavy" />
							</hlayout>
						</vlayout>
					</hlayout>
				</detail>
				<label value="Kyocera Strobe K612B MetroPCS Metro PCS Cell Phone L@@K" />
				<label value="US $174.99" sclass="price" />
				<label value="Princeton, NJ, USA, United States" />
			</row>
			<row>
				<detail fulfill="onOpen">
					<hlayout>
						<image sclass="myimg" width="100px" height="100px"
							src="/widgets/grid/master_detail/img/item3.jpg" />
						<vlayout>
							<label value="Item Specifics - Video Game Systems" 
								sclass="heavy-italic" />
							<hlayout>
								<label value="Manufacturer:" />
								<label value="Microsoft" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Platform:" />
								<label value="Microsoft Xbox 360" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="MPN:" />
								<label value="52T-00013" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Condition:" />
								<label value="Used" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Condition:" />
								<label value="Used" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Media Type:" />
								<label value="DVD-ROM" sclass="heavy" />
							</hlayout>
						</vlayout>
					</hlayout>
				</detail>
				<label value="Halo 3 ed. xbox 360 bundle pack" />
				<label value="US $350.00" sclass="price" />
				<label value="Middletown, PA, United States" />
			</row>	
			<row>
				<detail fulfill="onOpen">
					<hlayout>
						<image sclass="myimg" width="100px" height="100px"
							src="/widgets/grid/master_detail/img/item4.jpg" />
						<vlayout>
							<label value="Item Specifics - Cell Phones &amp; Smartphones"
								sclass="heavy-italic"/>
							<hlayout>
								<label value="Carrier:" />
								<label value="AT&amp;T, Cingular" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Brand:" />
								<label value="Apple iPhone" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Technology:" />
								<label value="GSM" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Camera:" />
								<label value="1-2 Megapixels" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Condition:" />
								<label value="Used" sclass="heavy" />
							</hlayout>
							<hlayout>
								<label value="Features:" />
								<label  
									value="Bluetooth Enabled, Calendar, Color Screen, Email Access, GPS, Internet Browser, MP3 Player..." 
									sclass="heavy"/>
							</hlayout>
						</vlayout>
					</hlayout>
				</detail>
				<label value="Apple iPhone 8GB - 1st Generation, Version 2.0" />
				<label value="US $300.00" sclass="price" />
				<label value="Aspen, CO, United States" />
			</row>
		</rows>
	</grid>
</zk>