Enhance the Usage of Grid"

From Documentation
m (Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=July 31, 2008 |version=Applicable to zk-3.5.0-FL-2008-07-31 and later. }} =Introducti…')
 
 
(2 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
Let's have a look at the demo of the column's menu.
 
Let's have a look at the demo of the column's menu.
 
   
 
   
<gflash width="600" height="300">http://docs.zkoss.org/images/a/ad/Menu-demo.swf</gflash>
+
<gflash width="600" height="300">Menu-demo.swf</gflash>
 
Example in the following fragments,
 
Example in the following fragments,
  
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">http://docs.zkoss.org/images/9/96/Detail-demo.swf</gflash>
+
<gflash  width="600" height="600">Detail-demo.swf</gflash>
  
 
Example in the following fragments,
 
Example in the following fragments,

Latest revision as of 07:45, 20 September 2010

DocumentationSmall Talks2008JulyEnhance the Usage of Grid
Enhance the Usage of Grid

Author
Jumper Chen, Engineer, Potix Corporation
Date
July 31, 2008
Version
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.