Customize Row and Column Titles"

From Documentation
Line 5: Line 5:
  
 
===Purpose===
 
===Purpose===
ZK Spreadsheet can set customize title by <javadoc method="setColumntitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc> or <javadoc method="setRowtitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc>
+
ZK Spreadsheet can set customize title by <javadoc directory="zss" method="setColumntitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc> or <javadoc directory="zss"  method="setRowtitles(java.util.Map)">org.zkoss.zss.ui.Spreadsheet</javadoc>
  
 
===ZUML===
 
===ZUML===

Revision as of 01:05, 20 December 2010



Purpose

ZK Spreadsheet can set customize title by Spreadsheet.setColumntitles(Map) or Spreadsheet.setRowtitles(Map)

ZUML

<zk>
<div height="100%" width="100%" apply="demo.HeaderTitleComposer">
	<popup id="inputTitlePopup">
		<textbox id="titleEditor"/>
	</popup>
	<div height="3px"></div>
	<spreadsheet id="spreadsheet" src="/Untitled"	
			maxrows="200" 
			maxcolumns="40"
			width="100%"
			height="450px"></spreadsheet>
</div>
</zk>

Composer

Current Title

We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get current header that user clicked, in here, we use onHeaderDoubleClick as a example.

1. we can get clicked header type by

HeaderMouseEvent.getType();

2. we can get header title by

public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
	String currentTitle = null;
	int headerType = event.getType();
	if (headerType == HeaderEvent.TOP_HEADER) {
		currentTitle = spreadsheet.getColumntitle(currentIndex);
	} else {
		currentTitle =  spreadsheet.getRowtitle(currentIndex);
	}
...

3. Then, set the current header title to textbox and open the popup.

Popup inputTitlePopup;
Textbox titleEditor;

public void onHeaderDoubleClick$spreadsheet(HeaderMouseEvent event) {
...
	inputTitlePopup.open(event.getPageX(), event.getPageY());
	titleEditor.setText(currentTitle);
	titleEditor.focus();
}

ZKSsEss Spreadsheet HeaderTitle DClick.png

Edit Title

We can change column title when use click Enter

public void onOK$titleEditor() {
	HashMap<Integer, String> titles = new HashMap<Integer, String>();
	titles.put(Integer.valueOf(currentIndex), titleEditor.getText());
	
	if (isColumnHeader) {
		spreadsheet.setColumntitles(titles);
	} else {
		spreadsheet.setRowtitles(titles);
	}
	inputTitlePopup.close();
}

ZKSsEss Spreadsheet HeaderTitle Edit.png Click Enter to change title
ZKSsEss Spreadsheet HeaderTitle Result.png

Cancel Editing

Close popup when user click Esc

public void onCancel$titleEditor() {
	inputTitlePopup.close();
}

View complete source of ZUML headerTitle.zul

View complete source of composer HeaderTitleComposer.java

Version History

Last Update : 2010/12/20


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2010/12/20

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