ZK Spreadsheet Essentials/Working with ZK Spreadsheet/Configure and Control ZK Spreadsheet/Customize Row and Column Titles

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

Scenario

User can double click on header to edit the title, user can click Enter to confirm change or click Ecs to cancel title editing.

ZUML Example

<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>

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();
}

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();
}

Click Enter to change title

Cancel editing

Close popup when user click Esc

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

Version History

Version	Date	Content

All source code listed in this book is at Github.