Frozen"

From Documentation
 
Line 65: Line 65:
  
 
= Column scrolling =
 
= Column scrolling =
{{ZK CE}}
+
{{ZK All}}
 
The frozen columns positions are maintained, and the other columns are replaced while the scroll position is updated.
 
The frozen columns positions are maintained, and the other columns are replaced while the scroll position is updated.
  
Line 71: Line 71:
 
== Scroll to Hide Columns ==
 
== Scroll to Hide Columns ==
 
{{ZK EE}}{{versionSince|8.5.0}}
 
{{ZK EE}}{{versionSince|8.5.0}}
 
 
With smooth scrolling, the Grid does not add white space to the last column by default.
 
With smooth scrolling, the Grid does not add white space to the last column by default.
  
{{ZK CE}}
+
{{ZK All}}
 
With column scrolling, Grid will render extra space (larger width) after the last column. So that you can drag to hide all columns except the last one.
 
With column scrolling, 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]]
 
[[File:hide-columns.png | center]]

Latest revision as of 13:05, 27 March 2024

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>

Smooth scrolling

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

Since 8.5.0

The frozen columns position are maintained, and the other columns uses CSS scrolling to move smoothly while the scroll position is updated.

Column scrolling

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

The frozen columns positions are maintained, and the other columns are replaced while the scroll position is updated.


Scroll to Hide Columns

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

Since 8.5.0

With smooth scrolling, the Grid does not add white space to the last column by default.

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

With column scrolling, 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 : 2024/03/27


Version Date Content
     



Last Update : 2024/03/27

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