ZK 5: Frozen Column, In-place Editing and Rowspan
Jumper Chen, Engineer, Potix Corporation
September 10, 2009
ZK 5.0.0 and above
Today, we're really pleased to launch several new ZK 5 features, including Frozen Column, In-place-editing and Rowspan within a grid. These features can enhance the usage of ZK to establish a flexible grid table to let the user modify and navigate the data quickly and easily, like a spreadsheet.
This is an annual report like a spreadsheet.
In ZK5, both components grid and listbox can use frozen columns.
<grid> <frozen style="background: #dfded8" columns="3"> ... </frozen> </grid>
In the above example, we add a new component called Frozen to freeze columns within Grids and Listboxs. The Frozen component can have any child component.
In ZK5, all input elements can have the in-place-editing functionality, like the combobox, textbox, datebox, and so on.
<textbox inplace="true"/> <combobox inplace="true"/> <datebox inplace="true"/>
The inplace property is used to enable or disable the in-place-editing function for the input element.
In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style, in the same manner as we demonstrated in the demo above.
You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows.
<row> <cell sclass="years" rowspan="12"> ... </cell> </row>
The demo could be downloaded here.
In this article, we demonstrated how to combine the three new features within the Grid component to improve the user experience, layout and navigation of your applications. Furthermore, in the upcoming ZK5 release, we will endeavour to make Zk even better and faster than it already is!
|Copyright © Jumper Chen. This article is licensed under GNU Free Documentation License.|