Introduction

In the upcoming ZK 8.5, we are glad to introduce you a new change in Frozen – smooth scrolling!
Frozen is a ZK component which can be used in Grid, Listbox and Tree. It can help you lock the specific certain columns that users can always see while browsing.
To accomplish this feature and to consider the browser compatibility, we use column resizing in the Frozen before ZK 8.5. That is to say, once user tried to scroll to the right, the next visible column after the last frozen column would be resized to 0.1 px. After the scrolling and resizing, the user will be able to see the next column.
In the following demo, we will demonstrate the difference between old and new Frozen.

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 FL version! Feel free to let us know if you have any question!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply