Customize Row and Column Titles"

From Documentation
Line 28: Line 28:
 
====Current Title====
 
====Current Title====
  
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get the current header that user clicked. Here, we use onHeaderDoubleClick as a example.
+
We can use onHeaderClick, onHeaderRightClick or onHeaderDoubleClick to get the current header that user clicked. Here, we use onHeaderDoubleClick as an example.
  
 
1. we can get clicked header type by   
 
1. we can get clicked header type by   

Revision as of 09:02, 30 August 2011



Purpose

ZK Spreadsheet can set customized 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 the current header that user clicked. Here, we use onHeaderDoubleClick as an 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 : 2011/08/30


Version Date Content
     


All source code listed in this book is at Github.


Last Update : 2011/08/30

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