Introduction

In the upcoming ZK 8.5.0, we are glad to introduce you all a new change in Frozen – smooth scrolling! Frozen, is a ZK component that was first introduced in 2015, which can be used in Grid, Listbox and Tree. Its function is to help you lock the specific certain columns that users can always see while browsing.

Before ZK 8.5.0, since we need to consider the compatibility for legacy browsers, we used column resizing in Frozen to accomplish this feature. With column resizing, the scrolling is presented more like scrolling column by column. That is to say, once the user scrolls to the left (or right), the next visible column after the last frozen column will be resized to 0.1 px and the rest of the columns will thus be shifted to the left (or right).

In the new Frozen, the scrolling of the columns will be smooth and continuous. Rather than seeing the scrolling column by column, you will see an easy scrolling! We will demonstrate the difference between old and new Frozen in the following demo, have a look!

ZK Frozen Demo

Required Configuration

Versions:

• ZK FL: 8.5.0.FL.20170519-Eval
• Browser: Chrome, Firefox, Safari, IE11 and Microsoft Edge

In the demo, you can see the scroll bar in the new Frozen is more accurate than in the original one. So the user can easily estimate how many columns are in the right side.

Example (ZUL)

<grid width="700px">
	<frozen columns="1"/>
	<columns>
		<column label="first column" width="300px"/>
		<column label="second column" width="400px"/>
		<column label="third column" width="400px"/>
	</columns>
	<rows>
		<row>
			<cell> data 1 </cell>
			<cell> data 2 </cell>
			<cell> data 3 </cell>
		</row>
	</rows>
</grid>

In ZK 8.5, smooth scrolling in Frozen is the default setting. You can specify the following property “org.zkoss.zul.frozen.smooth” to change the behavior.
This property supports three scopes:

• Application (Library property)

  <library-property>
     <name>org.zkoss.zul.frozen.smooth</name>
     <value>false</value>
  </library-property>
  

  or

  	Library.setProperty("org.zkoss.zul.frozen.smooth", false);
  

• Page

  <zk>
  	<custom-attributes org.zkoss.zul.frozen.smooth="false">
  	<!-- frozen grid/listbox/tree -->
  </zk>

• Component

  <grid width="700px">
  	<custom-attributes org.zkoss.zul.frozen.smooth="false">
  	<frozen columns="1"/>
  	<!-- columns/rows -->
  </grid>

Downloads

The whole demo project is totally based on basic usage of ZK Frozen.

You can have a try in the ZK 8.5.0 FL version! Feel free to let us know if you have any question!