ZK Component Reference/Data/Grid/Columns

Columns

• Demonstration: Grid (Simple Grid)
• Java API: Columns
• JavaScript API: Columns
• Style Guide: Columns

Employment/Purpose

Defines the columns of a grid.

Each child of a columns element should be a org.zkoss.zul.Column element.

Example

<window title="Grid Demo" border="normal" width="360px">
	<zscript> class Comp implements Comparator { private boolean _asc;
		public Comp(boolean asc) { _asc = asc; } public int compare(Object o1,
		Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 =
		o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return
		_asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false);
	</zscript>
	<grid>
		<columns sizable="true">
			<column label="Type" sortAscending="&#36;{asc}"
				sortDescending="&#36;{dsc}" width="50px"/>
			<column label="Content" />
		</columns>
		<rows>
			<row>
				<label value="File:" />
				<textbox width="99%" />
			</row>
			<row>
				<label value="Type:" />
				<hbox>
					<listbox rows="1" mold="select">
						<listitem label="Java Files,(*.java)" />
						<listitem label="All Files,(*.*)" />
					</listbox>
					<button label="Browse..." />
				</hbox>
			</row>
			<row>
				<label value="Options:" />
				<textbox rows="3" width="99%" />
			</row>
		</rows>
	</grid>
</window>

Properties

Menupopup

By default, the none is assumed, you can specify the auto to appear a default menu for the columns. Or you can provide your own menupopup for the component.

Auto

	<grid>
		<columns menupopup="auto">
			<column label="Author" sort="auto"/>
			<column label="Title" sort="auto"/>
			<column label="Publisher" sort="auto"/>
			<column label="Hardcover" sort="auto"/>
		</columns>

Customized Menupopup

<window title="Column's Menu Demo" border="normal" width="500px">
	<menupopup id="editPopup">
        <menuitem label="Group" image="~./zul/img/grid/menu-group.png"/>
        <menuitem label="Sort Ascending" image="~./zul/img/grid/menu-arrowup.png"/>
        <menuitem label="Sort Descending" image="~./zul/img/grid/menu-arrowdown.png"/>
	</menupopup>
	<grid>
		<columns sizable="true" menupopup="editPopup">
			<column id="col" label="Type" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
			<column id="col1" label="Type1" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}"/>
			<column id="col2" label="Content"/>
		</columns>
	</grid>
</window>

As you can see, the example above specify a customized menupopup to the columns as its column menu.

Supported Events

Name	Event Type
None	None

• Inherited Supported Events: HeadersElement

Supported Children

* Column

Use Cases

Grid

Version History

Version	Date	Content