ZK 5: Frozen Column, In-place Editing and Rowspan"
m (Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=September 10, 2009 |version=ZK 5.0.0 and above }} =Introduction= Today, we're really pleased …') |
m (correct highlight (via JWB)) |
||
(3 intermediate revisions by 2 users not shown) | |||
Line 7: | Line 7: | ||
=Introduction= | =Introduction= | ||
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. | 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. | ||
+ | |||
+ | See Also | ||
+ | * [[ZK Component Reference/Supplementary/Frozen|The frozen component]] | ||
=Live Demo= | =Live Demo= | ||
This is an annual report like a spreadsheet. | This is an annual report like a spreadsheet. | ||
− | <gflash width="850" height="400"> | + | <gflash width="850" height="400">FrozenGridWithInplaceEditing.swf</gflash> |
= Features Overview= | = Features Overview= | ||
== Frozen Columns == | == Frozen Columns == | ||
− | In ZK5, both components < | + | In ZK5, both components <code>grid</code> and <code>listbox</code> can use ''frozen columns''. |
For example. | For example. | ||
Line 26: | Line 29: | ||
</source> | </source> | ||
− | In the above example, we add a new component called ''Frozen'' to freeze columns within < | + | In the above example, we add a new component called ''Frozen'' to freeze columns within <code>Grids</code> and <code>Listboxs</code>. The Frozen component can have any child component. |
== In-place Editing == | == In-place Editing == | ||
Line 41: | Line 44: | ||
== Rowspan == | == Rowspan == | ||
− | In ZK5, we have introduced a new component named ''Cell'' which can be embedded into a < | + | In ZK5, we have introduced a new component named ''Cell'' which can be embedded into a <code>Grid</code> or <code>Box</code> (<code>Hbox</code> and <code>Vbox</code>) to fully control the layout and the style, in the same manner as we demonstrated in the [[#Live Demo | demo]] above. |
− | You can now use the rowspan or the colspan property to layout your < | + | You can now use the rowspan or the colspan property to layout your <code>Grid</code>, for example a content cell can now cross over multiple rows. |
<source lang="xml"> | <source lang="xml"> | ||
Line 59: | Line 62: | ||
=Summary= | =Summary= | ||
− | In this article, we demonstrated how to combine the three new features within the < | + | In this article, we demonstrated how to combine the three new features within the <code>Grid</code> 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! |
<comment>http://docs.zkoss.org/wiki/ZK5:Frozen_Column_Inplace_Editing_And_Rowspan</comment> | <comment>http://docs.zkoss.org/wiki/ZK5:Frozen_Column_Inplace_Editing_And_Rowspan</comment> |
Latest revision as of 04:17, 20 January 2022
Jumper Chen, Engineer, Potix Corporation
September 10, 2009
ZK 5.0.0 and above
Introduction
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.
See Also
Live Demo
This is an annual report like a spreadsheet.
Features Overview
Frozen Columns
In ZK5, both components grid
and listbox
can use frozen columns.
For example.
<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-place Editing
In ZK5, all input elements can have the in-place-editing functionality, like the combobox, textbox, datebox, and so on.
For example,
<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.
Rowspan
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>
Download
The demo could be downloaded here.
Summary
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. |