Frozen"

From Documentation
(20 intermediate revisions by 5 users not shown)
Line 1: Line 1:
init
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Frozen =
 +
 
 +
*Demonstration: [http://www.zkoss.org/zkdemo/grid/spreadsheet_functionalities Spreadsheet Functionalities]
 +
*Java API: <javadoc>org.zkoss.zul.Frozen</javadoc>
 +
*JavaScript API: <javadoc directory="jsdoc">zul.mesh.Frozen</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Frozen | Frozen]]
 +
 
 +
= Employment/Purpose =
 +
 
 +
A frozen component to represent frozen "columns" in a Grid or a Listbox, like MS Excel. Specify the <code>start</code> attribute to define the horizontal scroll starting position.
 +
 
 +
= Example =
 +
 
 +
[[Image: ZKComRef_Frozen_Example.png | center]]
 +
 
 +
<source lang="xml">
 +
<grid width="600px">
 +
<frozen columns="2" start="1"/>
 +
<columns>
 +
<column width="50px">ID</column>
 +
<column width="50px">Priority</column>
 +
<column width="50px">Status</column>
 +
<column width="150px">Summary</column>
 +
<column width="250px">Detail</column>
 +
<column width="100px">Group</column>
 +
<column width="50px">Assign</column>
 +
</columns>
 +
<rows>
 +
<row>
 +
<cell>0001</cell>
 +
<cell>1</cell>
 +
<cell>closed</cell>
 +
<cell>Fix login issue</cell>
 +
<cell>Login does not work at all</cell>
 +
<cell>Account</cell>
 +
<cell>Bob</cell>
 +
</row>
 +
<row>
 +
<cell>0002</cell>
 +
<cell>3</cell>
 +
<cell>open</cell>
 +
<cell>Button style broken</cell>
 +
<cell>Check main.css</cell>
 +
<cell>Styling</cell>
 +
<cell>Alice</cell>
 +
</row>
 +
<row>
 +
<cell>0003</cell>
 +
<cell>2</cell>
 +
<cell>open</cell>
 +
<cell>Client search result</cell>
 +
<cell>Search service returns incomplete result</cell>
 +
<cell>Service</cell>
 +
<cell>Bob</cell>
 +
</row>
 +
</rows>
 +
</grid>
 +
</source>
 +
 
 +
= Scroll to Hide Columns =
 +
By default, Grid will render extra space (larger width) after the last column. So that you can drag to hide all columns except the last one.
 +
[[File:hide-columns.png | center]]
 +
 
 +
= Frozen on the Right=
 +
{{ZK EE}} {{versionSince|8.6.2}}
 +
 
 +
<!-- https://tracker.zkoss.org/browse/ZK-4212 -->
 +
Make columns frozen at the right-hand side.
 +
<syntaxhighlight lang='xml' highlight='2'>
 +
<listbox>
 +
<frozen rightColumns="1"/>
 +
...
 +
</listbox>
 +
</syntaxhighlight>
 +
 
 +
=Supported Events=
 +
 
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| None
 +
| None
 +
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 +
 
 +
=Supported Children=
 +
 
 +
*ALL
 +
 
 +
=Use Cases=
 +
 
 +
{| class='wikitable' | width="100%"
 +
! Version !! Description !! Example Location
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
=Version History=
 +
{{LastUpdated}}
 +
 
 +
{| class='wikitable' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
{{ZKComponentReferencePageFooter}}

Revision as of 02:04, 8 March 2022

Frozen

Employment/Purpose

A frozen component to represent frozen "columns" in a Grid or a Listbox, like MS Excel. Specify the start attribute to define the horizontal scroll starting position.

Example

ZKComRef Frozen Example.png
<grid width="600px">
	<frozen columns="2" start="1"/>
	<columns>
		<column width="50px">ID</column>
		<column width="50px">Priority</column>
		<column width="50px">Status</column>
		<column width="150px">Summary</column>
		<column width="250px">Detail</column>
		<column width="100px">Group</column>
		<column width="50px">Assign</column>
	</columns>
	<rows>
		<row>
			<cell>0001</cell>
			<cell>1</cell>
			<cell>closed</cell>
			<cell>Fix login issue</cell>
			<cell>Login does not work at all</cell>
			<cell>Account</cell>
			<cell>Bob</cell>
		</row>
		<row>
			<cell>0002</cell>
			<cell>3</cell>
			<cell>open</cell>
			<cell>Button style broken</cell>
			<cell>Check main.css</cell>
			<cell>Styling</cell>
			<cell>Alice</cell>
		</row>
		<row>
			<cell>0003</cell>
			<cell>2</cell>
			<cell>open</cell>
			<cell>Client search result</cell>
			<cell>Search service returns incomplete result</cell>
			<cell>Service</cell>
			<cell>Bob</cell>
		</row>
	</rows>
</grid>

Scroll to Hide Columns

By default, Grid will render extra space (larger width) after the last column. So that you can drag to hide all columns except the last one.

Hide-columns.png

Frozen on the Right

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Since 8.6.2

Make columns frozen at the right-hand side.

<listbox>
	<frozen rightColumns="1"/>
...
</listbox>

Supported Events

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/03/08


Version Date Content
     



Last Update : 2022/03/08

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.