In some cases, for convenience, user wishes to freeze both columns and rows. To freeze specific columns, you can simply use ZK Frozen component to specify the number of columns you wish to freeze, however, Frozen component does not support row freeze. In this blog, I will show you how you can freeze not only columns but also rows. I have here combined 4 grid components into a composite component, the frozenGrid component to represent the freeze effect. With this technique you can now freeze both columns and rows for more flexibility and friendlier user experience.

Below is what a FrozenGrid would look like

Following are the tips on how you can use this frozenGrid:

1. Place desired column and row component in the frozenGrid component:

<frozenGrid height="200px" width="300px" columns="1" rows="2">
		<template name="columns">
           	<columns>
           		<column label="col 1" width="80px"/>
           		<column label="col 2" width="80px"/>
           		<column label="col 3" width="80px"/>
           		<column label="col 4" width="80px"/>
           		<column label="col 5" width="80px"/>
           	</columns>
        </template>
        <template name="rows">
           	<rows>
	            <row>
	            	<label value="item 11"/>
	            	<label value="item 12"/>
	            	<label value="item 13"/>
	            	<label value="item 14"/>
	            	<label value="item 15"/>
	            </row>
	            <row>
	            	<label value="item 21"/>
	            	<label value="item 22"/>
	            	<label value="item 23"/>
	            	<label value="item 24"/>
	            	<label value="item 25"/>
	            </row>
	            .............
	        </rows>
        </template>
</frozenGrid>

Similar to the Grid component, you can place Columns component in the “columns” template, and Rows component in the “rows” template.

2. Customize the left bottom area ( the area next to the horizontal scrollbar)

<frozenGrid height="200px" width="300px" columns="1" rows="2">
	.....................
	<template name="toolbar">
		<label value="my text"/>
	</template>
</frozenGrid>

You can place any component in the “toolbar” template such as a label or a menu to customize this area.

3. Set a model and rowRenderer in frozenGrid:

<frozenGrid height="200px" width="500px" columns="3" rows="2"
			model="${model}" rowRenderer="${renderer}">
	<template name="columns">
		<columns>
			<column label="col 1"/>
			<column label="col 2"/>
			<column label="col 3"/>
		</columns>
	</template>
</frozenGrid>

4. Set a model and render using a model template in frozenGrid:

<frozenGrid height="200px" width="500px" columns="3" rows="2"
		model="${model}" >
	<template name="columns">
          	<columns>
          		<column label="col 1" width="80px"/>
          		<column label="col 2" width="80px"/>
          		<column label="col 3" width="80px"/>
           	</columns>
        </template>
       	<template name="model">
       		<row>
       			<label value="${each[0]}"/>
       			<label value="${each[1]}"/>
       			<label value="${each[2]}"/>
       		</row>
       	</template>
</frozenGrid>

5. ZK bind is not supported yet, but you can use EL to render the Template instead:

<frozenGrid width="500px" height="400px" columns="1" rows="2" model="@load(vm.model)">
	<template name="columns">
		<columns>
			<column label="state" width="100px" />
			<column label="cases" width="50px" />
			<column label="deaths" width="60px"/>
			<column label="description" width="350px"/>
			<column label="latitude" width="70px"/>
			<column label="longitude" width="70px"/>
		</columns>
	</template>
	<template name="model" var="info">
		<row>
			<label value="${info.state}"/>
			<label value="${info.cases}"/>
			<label value="${info.cases}"/>
			<label value="${info.deaths}"/>
			<label value="${info.description}"/>
			<label value="${info.latitude}"/>
			<label value="${info.longitude}"/>
		</row>
	</template>
</frozenGrid>

I hope you find this frozenGrid component useful.  Note that this component requires ZK 6+ so if you are using ZK 5 you will need to first upgrade your project to ZK 6.

Download:

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.

One Response to “FrozenGrid Component: Tips on how to freeze both Columns and Rows”

  1. sboscolo says:

    Really good.
    I made something alike using ZK and Javascript.
    Yet a ZK component like this is very usefull.
    I noticed a thing missing: there is no synch between row highlight in frozen panel and mobile panel.
    e.g. : right panel has its own row highlight and left panel has its own.
    It would be great to have a unique row higlight.
    Can you provide this feature?
    Thanks!

Leave a Reply