ZK 5: Frozen Column, In-place Editing and Rowspan"

From Documentation
m (correct highlight (via JWB))
 
(One intermediate revision by one other user 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=
Line 14: Line 17:
 
= Features Overview=
 
= Features Overview=
 
== Frozen Columns ==
 
== Frozen Columns ==
In ZK5, both components <tt>grid</tt> and <tt>listbox</tt> can use ''frozen columns''.
+
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 <tt>Grids</tt> and <tt>Listboxs</tt>. The Frozen component can  have any child component.
+
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 <tt>Grid</tt> or <tt>Box</tt> (<tt>Hbox</tt> and <tt>Vbox</tt>) to fully control the layout and the style, in the same manner as we demonstrated in the [[#Live Demo | demo]] above.
+
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 <tt>Grid</tt>, for example a content cell can now cross over multiple rows.
+
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 <tt>Grid</tt> 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!  
+
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

DocumentationSmall Talks2009SeptemberZK 5: Frozen Column, In-place Editing and Rowspan
ZK 5: Frozen Column, In-place Editing and Rowspan

Author
Jumper Chen, Engineer, Potix Corporation
Date
September 10, 2009
Version
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.