Enhance the Usage of Grid"
| Line 54: | Line 54: | ||
Let's have a look at the demo of the master-details. | Let's have a look at the demo of the master-details. | ||
| − | <gflash width="600" height="600"> | + | <gflash width="600" height="600">Detail-demo.swf</gflash> |
Example in the following fragments, | Example in the following fragments, | ||
Revision as of 02:15, 14 September 2010
Jumper Chen, Engineer, Potix Corporation
July 31, 2008
Applicable to zk-3.5.0-FL-2008-07-31 and later.
Introduction
In this article, we will be looking at using two features: Column's Menu and Master-Details. As you might have experienced, Column's Menu appears in modern OS for example Vista. Column's Menu is a kind of Menupopup component and it allows the users to have more options with grid control, such as grouping, sorting, and hiding. Master-Details is used to display a detailed section where a master row and multiple detail rows are on the same row.
Live Demo - Column's Menu
Let's have a look at the demo of the column's menu.
...
<columns sizable="true" menupopup="auto">
...
As you can see, the use of menupopup property is the same as the use of the popup property, you can also specify an ID of a menupopup you customized into the columns component.
New Columns's attributes specification table
| Attribute | Usage | Value |
|---|---|---|
| menupopup | Sets the ID of the menupopup that should appear when the user clicks on the element of each column.
Default: "none". |
"none", "auto", and an ID |
| columnshide | Sets whether to enable hiding of columns with the header context menu.
Default: true. |
true and false |
| columnsgroup | Sets whether to enable grouping of columns with the header context menu.
Default: true. |
true and false |
Live Demo - Master-Details
Let's have a look at the demo of the master-details.
Example in the following fragments,
...
<row>
<detail>
<hbox>
<image sclass="myimg" width="150px" height="150px"
src="/img/item1.jpg" />
...
</detail>
<label
value="Apple 20-inch Aluminum Cinema Display M9177/A" />
<label style="color:green;float:right;"
value="US $202.50" />
<label value="tulsa, ok, United States" />
</row>
...
As you can see, the detail component, a new component, is used to show the master-details, it can employ any kind of ZK component as its child and displays them when the user clicks on the icon of the detail component.
Detail's attributes specification table
| Attribute | Usage | Value |
|---|---|---|
| image | Sets the URI of the button image.
Default: "~./zul/img/grid/row-expand.gif". |
an URI |
| open | Sets whether the detail is open.
Default: false. |
true and false |
Load on Demand with Detail Component
In ZK framework to do Load-on-Demand is very easy as follows.
...
<detail fulfill="onOpen">
...
As you can see, we merely specify the fulfill property to be "onOpen", an event supported by Detail component.
Download
Download the Download the enhance-grid-demo.war for the article here.
Summary
In this small talk, we have shown you the power of ZK Grid, and it promotes the user interface for ZK. If you came 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. |