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.

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.