ZK Spreadsheet Essentials/Working with Spreadsheet/Advanced/Custom Context Menu

Overview

This section describes how to pop up a new customized context menu in a Spreadsheet. The steps are simple:

1. Disable built-in context menu
2. Create your own context menu
3. Show custom context menu
4. Add application logic on custom context menu

Disable Built-in Context Menu

We should hide built-in context menu in order to show our customized one only.

Extracted from customContext.zul

	<window apply="org.zkoss.zss.essential.advanced.customization.CustomContextMenuComposer"
		width="100%" height="100%">
		<spreadsheet id="ss" width="100%" height="100%" showFormulabar="true"
			showContextMenu="false" showToolbar="true" showSheetbar="true" maxVisibleRows="100"
			maxVisibleColumns="20" src="/WEB-INF/books/blank.xlsx" />
	<!-- other components -->
	</window>

• Line 4: Specify showContextMenu="false" to hide built-in context menu.

Create Your Own Context Menu

Menupopup is the most suitable component to build a context menu.

Extracted from customContext.zul

			<menupopup id="myContext">
				<menuitem id="display" label="Display Information" />
				<menuitem id="open" label="Open Dialog" />
			</menupopup>

Show Custom Context Menu

We can listen CellMouseEvent to open our Menupopup.

package org.zkoss.zss.essential.advanced.customization;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.*;
import org.zkoss.zss.ui.event.CellMouseEvent;
import org.zkoss.zul.Menupopup;

public class CustomContextMenuComposer extends SelectorComposer<Component> {

	@Wire
	private Menupopup myContext;

	@Listen("onCellRightClick = #ss")
	public void doContext(CellMouseEvent event) {
		myContext.open(event.getClientx(), event.getClienty());
		myContext.setAttribute("event", event);
	}
}

• Line 17: We could set CellMouseEvent as a Menupopup's attribute, and it could be used as a context information when implementing application logic for custom context menu.