The Auto Paging feature determines the page size based on the dynamic height of the Grid component; ridding developers the need to specify the page size for the Grid. This feature is also built-in in the Listbox component.

<zk>
	<zscript><![CDATA[
		Integer[] orderArray = demo.data.NumberGenerator.getSerialIntegerArray(25, 1234);
	]]></zscript>
	<panel id="panel" framable="true" height="400px">
		<panelchildren>
			<grid id="demoGrid" autopaging="true" mold="paging" vflex="true" pagingPosition="both">
				<columns>
					<column width="80px" label="Order #" align="left" />
					<column label="Item Purchased" align="center" />
					<column label="Purchased Time" align="center" />
					<column width="80px" label="Paid" align="center" />
				</columns>
				<rows>
					<row forEach="${orderArray}">
						<label value="${each}" />
						<listbox mold="select">
							<listitem label="Java" />
							<listitem label="Latte" />
							<listitem label="Lungo" />
							<listitem label="Macchiato" />
							<listitem label="Mocha" />
						</listbox>
						<timebox cols="12" format="a hh:mm:ss" onCreate="self.setValue(new Date());" mold="rounded" />
						<checkbox label="No" onCheck='self.setLabel(self.isChecked()?"Yes" : "No");' />
					</row>
				</rows>
			</grid>
		</panelchildren>
	</panel>
</zk>

<zk>
	<vlayout>
		<radiogroup onCheck="panel.height = self.selectedItem.label;">
			<vbox>
			<label value="Select Container's Height"/>
			<radio label="200px" />
			<radio label="300px" />
			<radio label="400px" checked="true" />
			<radio label="500px" />
			<radio label="600px" />
			</vbox>
		</radiogroup>		
	</vlayout>
	<separator height="10px"/>
	<checkbox label="Switch Paging Mold">
		<attribute name="onCheck">
		demoGrid.pagingChild.mold = "os".equals(demoGrid.pagingChild.mold) ? "default" : "os";
		</attribute>
	</checkbox>
</zk>