Hide Row and Column Titles"

From Documentation
m
m (correct highlight (via JWB))
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{ZKSpreadsheetEssentialsPageHeader}}
 
{{ZKSpreadsheetEssentialsPageHeader}}
 +
 +
 +
{{Deprecated|url=http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials}}
 +
  
 
__TOC__
 
__TOC__
  
ZK Spreadsheet can hide row or column use Range.setHidden()
+
===Purpose===
 
+
ZK Spreadsheet can hide row or column using <javadoc directory="zss" method="setHidden(java.lang.Boolean)">org.zkoss.zss.model.Range</javadoc>
==Scenario==
 
User can select row or column and right click on header to open menu popup, select '''hide''' to hide selected range.
 
  
===ZUML Example===
+
===ZUML===
  
<source lang="xml" high="4,5,8">
+
<source lang="xml" highlight="4,5,8">
 
<zk>
 
<zk>
 
<div height="100%" width="100%" apply="demo.HideHeaderComposer">
 
<div height="100%" width="100%" apply="demo.HideHeaderComposer">
Line 27: Line 29:
 
</source>
 
</source>
  
===Current range===
+
===Composer===
 +
====Current Range====
  
We can get user's selection range from onCellSelection event
+
We can get the user's selection range from onCellSelection event.
<source lang="java" high="3">
+
<source lang="java" highlight="3">
 
Range currentRange;
 
Range currentRange;
 
public void onCellSelection$spreadsheet(CellSelectionEvent event) {
 
public void onCellSelection$spreadsheet(CellSelectionEvent event) {
Line 38: Line 41:
 
</source>
 
</source>
  
===Open header menu===
+
====Open Header Menu====
We can open menu when user right click on header using onHeaderRightClick
+
We can open menu when the user right clicks on the header using onHeaderRightClick.
  
<source lang="java" high="3">
+
<source lang="java" highlight="3">
 
private Menupopup headerMenupopup;
 
private Menupopup headerMenupopup;
 
public void onHeaderRightClick$spreadsheet(HeaderMouseEvent event) {
 
public void onHeaderRightClick$spreadsheet(HeaderMouseEvent event) {
Line 47: Line 50:
 
}
 
}
 
</source>
 
</source>
 +
[[File:ZKSsEss_Spreadsheet_HideTitle_Menu.png]]
  
===Show header===
+
====Hide Header====
When user click '''show''' will show hidden header in selected range
+
When the user clicks '''hide''' it will hide the header in the selected range.
<source lang="java" high="4">
+
<source lang="java" highlight="4">
 +
private Menuitem hide;
 +
public void onClick$hide() {
 +
if (currentRange != null) {
 +
currentRange.setHidden(true);
 +
currentRange = null;
 +
}
 +
}
 +
</source>
 +
[[File:ZKSsEss_Spreadsheet_HideTitle_Hide.png]]
 +
 
 +
====Show Header====
 +
When the user clicks '''show''' it will show the hidden header in the selected range.
 +
<source lang="java" highlight="4">
 
private Menuitem show;
 
private Menuitem show;
 
public void onClick$show() {
 
public void onClick$show() {
Line 60: Line 77:
 
</source>
 
</source>
  
===
+
Select the range which includes hidden range<br/>
 +
[[File:ZKSsEss_Spreadsheet_HideTitle_HiddenRange.png]]<br/><br/>
 +
Show hidden range<br/>
 +
[[File:ZKSsEss_Spreadsheet_HideTitle_Show.png]]
 +
 
 +
[https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/WebContent/config/hideTitle.zul hideTitle.zul]
 +
[https://code.google.com/p/zkbooks/source/browse/trunk/zssessentials/examples/src/org/zkoss/zssessentials/config/HideHeaderComposer.java HideHeaderComposer.java]
  
 
=Version History=
 
=Version History=

Latest revision as of 12:55, 19 January 2022



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.


Purpose

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

ZUML

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

Composer

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.setHidden(true);
		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.setHidden(false);
		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.


Last Update : 2022/01/19

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