Grid is a tabular component which is useful to display organized data. This demo shows how to work with Grid, how to separate data into pages, and how to sort data in Grid.

Access Controller's Variables in View

We may access variables in the controller from view by the use of an EL Expression:${expression}. The implicit variable win$composer is a reference to the controller which was assigned to the Window component with the ID: win. For instance, to assign the component attribute model with the a data model called carsModel in the controller, we write model="${win$composer.carsModel}".

Model Usage

When we access Grid data through a data model such as ListModelList using the EL expression as shown in the snippet below, we're in effect calling the controller's getCarsModel() method.

<grid model="${win$composer.carsModel}" ...>
	...
	<template name="model">
		<row>...</row>
	</template>
</grid>

The <template> tag generates components iteratively and the implicit object each references to each item being iterated in the model.

Column and Header

The number of columns to appear in a Grid depends on the number of Column components declared within the Columns component. The width of each column can be set by assigning a value, in percentage or pixels, to the width attribute for each column. The title to appear in each column header can be set through the label attribute. Each Row should contain as many children components as there are Columns.

An Auxhead component contains one or more Auxheader components which provides additional header bars to group the existing column headers. The attribute colspan dictates how many columns should the Auxheader span over and form a grouping. An Auxhead component may also be stacked on top of other Auxhead components.

<auxhead>
	...
	<auxheader label="Tech Specification" align="center" colspan="2" />
</auxhead>
<columns>
	...
	<column label="Transmission" ... />
</columns>

Paging

Paging allows overflowed items to be shown in subsequent pages. To enable a Grid's built in paging feature, simply assign the attribute mold="paging". The pageSize attribute is used to control the number of rows allowed per page (default is 20). Alternatively, we can set autopaging="true" so the number of rows will be determined by the available vertical space in Grid. For a complete discussion on Grid's paging features, please see reference.

<grid ... mold="paging" pageSize="5">

Sorting

Grid has built in sorting functionalities. To enable sorting, simply assign a Column's attribute sort="auto". auto accepts arguments as keys for sorting. For example, for a data model containing a list of individuals, the property make may be used to sort the list as such: auto(make). Hence, when users click the header of this particular column, Grid would sort the rows by individual's name.

<column label="Make" align="center" sort="auto(make)" />

We may also instruct the Listbox to sort in an ascending or descending manner, please consult here

Detail

Grid supports the master-detail feature which enables developers to attach additional content in each row. The detailed view is hidden until they are expanded. To implement master-detail, wrap the detailed content with the Detail component. The Detail component should be placed inside a Row component and Detail would be expanded when users click on the row header.

<row>
	<detail>...</detail>
	...
</row>

<zk>
	<style src="/widgets/getting_started/grid/style.css"/>
	<window id="win" title="Car List" width="650px" border="normal"
		apply="demo.getting_started.grid.CarListController">
		<grid model="${win$composer.carsModel}" mold="paging" pageSize="5">
			<auxhead>
				<auxheader />
				<auxheader label="General Specification" align="center" colspan="3" />
				<auxheader label="Tech Specification" align="center" colspan="2" />
			</auxhead>
			<columns>
				<column width="40px" />
				<column label="Model" align="center" sort="auto(model)" />
				<column label="Make" align="center" sort="auto(make)" />
				<column label="Cost" align="center" sort="auto(cost)"
					image="/widgets/getting_started/img/dollar.png" />
				<column label="Displacement" align="center" sort="auto(engineDisplacement)" />
				<column label="Transmission" align="center" sort="auto(autoTransmission)" />
			</columns>
			<template name="model">
				<row>
					<detail>
						<hlayout sclass="detail">
							<image width="128px" style="margin: 8px"
								src="/widgets/getting_started/img/${each.picture}.png" />
							<vlayout>
								<hlayout sclass="detail-row">
									<label value="Type :" sclass="title" />
									<label value="${each.type}" />
								</hlayout>
								<hlayout sclass="detail-row">
									<label value="Accessories :" sclass="title" />
									<label value="${each.accessories}" />
								</hlayout>
								<hlayout sclass="detail-row">
									<label value="Country :" sclass="title" />
									<hlayout>
										<label value="${each.country}" />
										<image src="/widgets/getting_started/img/${each.country}.png" />
									</hlayout>
								</hlayout>
								<hlayout sclass="detail-row">
									<label value="Salesmen :" sclass="title" />
									<label value="${each.salesmen}" />
								</hlayout>
							</vlayout>
						</hlayout>
					</detail>
					<label value="${each.model}" />
					<label value="${each.make}" />
					<label value="${each.cost}" />
					<label value="${each.engineDisplacement} c.c." />
					<hlayout>
						<image
							src="/widgets/getting_started/img/${each.autoTransmission ? 'at' : 'mt' }.png" />
						<label value="${each.autoTransmission ? 'AT' : 'MT'}" />
					</hlayout>
				</row>
			</template>
		</grid>
	</window>
</zk>

package demo.getting_started.grid;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import demo.getting_started.Car;
import demo.getting_started.CarService;
import demo.getting_started.CarServiceImpl;

public class CarListController extends SelectorComposer<Component> {
	private static final long serialVersionUID = 1L;

	private ListModel<Car> carsModel;

	public CarListController() {
		CarService carService = new CarServiceImpl();
		carsModel = new ListModelList<Car>(carService.findAll());
	}

	public ListModel<Car> getCarsModel() {
		return carsModel;
	}
}

package demo.getting_started;

import java.util.Set;

public class Car {

	private String carId;
	private String model;
	private String picture;
	private String make;
	private String country;
	private String type;
	private double cost;
	private int engineDisplacement;
	private boolean autoTransmission;
	private Accessories accessories;
	private Set<String> salesmen;

	public Car() {
	}

	public String getCarId() {
		return carId;
	}

	public void setCarId(String carId) {
		this.carId = carId;
	}

	public String getModel() {
		return model;
	}

	public void setModel(String model) {
		this.model = model;
	}

	public String getPicture() {
		return picture;
	}

	public void setPicture(String picture) {
		this.picture = picture;
	}

	public String getMake() {
		return make;
	}

	public void setMake(String make) {
		this.make = make;
	}

	public String getCountry() {
		return country;
	}

	public void setCountry(String country) {
		this.country = country;
	}

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public double getCost() {
		return cost;
	}

	public void setCost(double cost) {
		this.cost = cost;
	}

	public int getEngineDisplacement() {
		return engineDisplacement;
	}

	public void setEngineDisplacement(int engineDisplacement) {
		this.engineDisplacement = engineDisplacement;
	}

	public boolean isAutoTransmission() {
		return autoTransmission;
	}

	public void setAutoTransmission(boolean autoTransmission) {
		this.autoTransmission = autoTransmission;
	}

	public Accessories getAccessories() {
		return accessories;
	}

	public void setAccessories(Accessories accessories) {
		this.accessories = accessories;
	}

	public Set<String> getSalesmen() {
		return salesmen;
	}

	public void setSalesmen(Set<String> salesmen) {
		this.salesmen = salesmen;
	}

	public String toString() {
		return model;
	}
}

package demo.getting_started;

import java.util.List;

public interface CarService {

	/**
	 * Retrieve all cars in the car store.
	 * @return all cars.
	 */
	public List<Car> findAll();

	/**
	 * Store or modify a car in car store.
	 */
	void store(Car car);

	/**
	 * Store or modify a inventory item in car store.
	 */
	void store(InventoryItem inventoryItem);

	/**
	 * Order cars.
	 */
	void order(List<OrderItem> orderItems);

	/**
	 * Retrieve the root of car categories.
	 */
	Category getCarCategoriesRoot();

	/**
	 * Count cars by filter.
	 */
	int countByFilter(String filter);

	/**
	 * Query cars by filter.
	 */
	List<Car> queryByFilter(String filter);
}