Enhance the Usage of Grid

Jumper Chen, Engineer, Potix Corporation
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.

Example in the following fragments,

...
  <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 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.