Enhance the Usage of Grid

From Documentation
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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.