Learn About Grouping with Listbox and Grid
Jumper Chen, Engineer, Potix Corporation
May 2, 2008
Applicable to zk-3.1.0-FL-2008-05-02 and later.
Introduction
In ZK 3.1.0 version, we introduce the grouping function, showing collapsible data groups that can be customized via the Listgroup/Group component, to both Listbox and Grid. In the past, if you want such feature, you have to write a lot of plumbing code yourself, but now you can use both wieldy components to achieve the task without extra efforts. The grouping function can only be a single level grouping, unlike Tree, however we still keep the great ability of Listitem/Row that developer can manipulate any various child into them.
Live Demo
Let's take a look at a real case, a mail application which groups the mail whose received date are the same as a group in a Listbox.
The following sketch is a Listbox example,
...
<listbox fixedLayout="true">
<listhead sizable="true">
<listheader width="150px" label="From" sort="auto" />
<listheader label="Subject" sort="auto" />
<listheader width="150px" label="Received" sort="auto" />
<listheader width="50px" label="Size" sort="auto" />
</listhead>
<listgroup>
<listcell label="Date:Today [From]"/>
<listcell label="[Subject]"/>
<listcell label="[Received]"/>
<listcell label="[Size]"/>
</listgroup>
<listitem forEach="${datas}" forEachBegin="0" forEachEnd="9">
<listcell label="${each[0]}" image="img/mail_read.png" sclass="mailitem"/>
<listcell label="${each[1]}" />
<listcell label="${each[2]}" />
<listcell label="${each[3]}" />
</listitem>
<listgroup label="Date:Yesterday" />
<listitem forEach="${datas}" forEachBegin="10" forEachEnd="14">
<listcell label="${each[0]}" image="img/mail_read.png" sclass="mailitem"/>
<listcell label="${each[1]}" />
<listcell label="${each[2]}" />
<listcell label="${each[3]}" />
</listitem>
<listgroup label="Date:Sunday" />
<listitem forEach="${datas}" forEachBegin="15" forEachEnd="20">
<listcell label="${each[0]}" image="img/mail_read.png" sclass="mailitem"/>
<listcell label="${each[1]}" />
<listcell label="${each[2]}" />
<listcell label="${each[3]}" />
</listitem>
</listbox>
...
As you can see, we use two ways to express Listgroup component, one is like Listitem with some Listcell, and the other is a single component, which is easier used.
- Listgroup: It's a kind of Listitem, and also provides the onOpen event.
Note: This demo code can be found in the grouping-demo.war file, but we don't prepare the demo code of Group with Grid inside the war file, if you are still interested, you can copy the following code and run it.
...
<grid fixedLayout="true">
<columns sizable="true">
<column width="200px" label="From"/>
<column label="Subject"/>
<column width="150px" label="Received"/>
<column width="50px" label="Size"/>
</columns>
<rows>
<group>
<label value="Date:Today [From]"/>
<label value="[Subject]"/>
<label value="[Received]"/>
<label value="[Size]"/>
</group>
<row forEach="${datas}" forEachBegin="0" forEachEnd="9">
<div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value="${each[0]}"/></div>
<label value="${each[1]}"/>
<label value="${each[2]}"/>
<label value="${each[3]}"/>
</row>
<group label="Date:Yesterday" />
<row forEach="${datas}" forEachBegin="10" forEachEnd="14">
<div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value="${each[0]}"/></div>
<label value="${each[1]}"/>
<label value="${each[2]}"/>
<label value="${each[3]}"/>
</row>
<group label="Date:Sunday" />
<row forEach="${datas}" forEachBegin="15" forEachEnd="20">
<div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value="${each[0]}"/></div>
<label value="${each[1]}"/>
<label value="${each[2]}"/>
<label value="${each[3]}"/>
</row>
</rows>
</grid>
...
- Group: It's a kind of Row, and also provides the onOpen event, and all the Label children are automatically applied the group-cell CSS.
Download
Download the grouping-demo.war for the article here.
Summary
Supporting the grouping feature into Listbox and Grid can enhance the flexibility of both components, and be used more powerful than before. If you come up with any problem, please feel free to ask us on ZK forum.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |