Hide Row and Column Titles

From Documentation

Stop.png This article is out of date, please refer to http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials for more up to date information.


ZK Spreadsheet can hide row or column using Range.setHidden(Boolean)


<div height="100%" width="100%" apply="demo.HideHeaderComposer">
	<menupopup id="headerMenupopup">
		<menuitem id="show" label="Show"/>
		<menuitem id="hide" label="Hide"/>
	<div height="3px"></div>
	<spreadsheet id="spreadsheet" src="/demo_sample.xls"	


Current Range

We can get the user's selection range from onCellSelection event.

Range currentRange;
public void onCellSelection$spreadsheet(CellSelectionEvent event) {
	currentRange = Ranges.range(event.getSheet(), event.getTop(), event.getLeft(), 
			event.getBottom(), event.getRight());

Open Header Menu

We can open menu when the user right clicks on the header using onHeaderRightClick.

private Menupopup headerMenupopup;
public void onHeaderRightClick$spreadsheet(HeaderMouseEvent event) {
	headerMenupopup.open(event.getPageX(), event.getPageY());

ZKSsEss Spreadsheet HideTitle Menu.png

Hide Header

When the user clicks hide it will hide the header in the selected range.

private Menuitem hide;
public void onClick$hide() {
	if (currentRange != null) {
		currentRange = null;

ZKSsEss Spreadsheet HideTitle Hide.png

Show Header

When the user clicks show it will show the hidden header in the selected range.

private Menuitem show;
public void onClick$show() {
	if (currentRange != null) {
		currentRange = null;

Select the range which includes hidden range
ZKSsEss Spreadsheet HideTitle HiddenRange.png

Show hidden range
ZKSsEss Spreadsheet HideTitle Show.png

hideTitle.zul HideHeaderComposer.java

Version History

Last Update : 2022/01/19

Version Date Content

All source code listed in this book is at Github.

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