This example leverages the row selection feature of the extended data table to re-use a single contextMenu with for the entire table. Activating the contextMenu triggers a row selection, allowing programmatic access to the object backing the row. In this example, the context menu is displayed when one right-clicks on the image.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <rich:extendedDataTable value="#{extTableSelectionBean.inventoryItems}" var="car" selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2" style="height:300px; width:310px;"> <a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}" render=":res"/> <f:facet name="header"> <h:outputText value="Cars marketplace"/> </f:facet> <rich:column> <f:facet name="header"> <h:outputText value="Vendor"/> </f:facet> <h:outputText value="#{car.vendor}"/> </rich:column> <rich:column> <f:facet name="header"> <h:outputText value="Model"/> </f:facet> <h:outputText value="#{car.model}"/> </rich:column> <rich:column> <f:facet name="header"> <h:outputText value="Price"/> </f:facet> <h:outputText value="#{car.price}"/> </rich:column> </rich:extendedDataTable> <rich:contextMenu target="table" mode="ajax"> <rich:menuItem label="View" render="popupContent" oncomplete="#{rich:component('popup')}.show();" mode="ajax" icon="/images/icons/open.gif"/> </rich:contextMenu> </h:form> <rich:popupPanel id="popup" modal="true" autosized="true" resizeable="false"> <f:facet name="header"> <h:outputText value="Car details"/> </f:facet> <f:facet name="controls"> <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;" style="color: inherit">X</h:outputLink> </f:facet> <h:panelGrid columns="2" id="popupContent" columnClasses="col1, col2"> <h:outputText value="Vendor"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.vendor}"/> <h:outputText value="Model"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.model}"/> <h:outputText value="Price"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.price}"/> <h:outputText value="Mileage"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.mileage}"/> <h:outputText value="VIN Code"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.vin}"/> <h:outputText value="Items stock"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.stock}"/> <h:outputText value="Days Live"/> <h:inputText style="border:solid 0.5px black; width: 10em" value="#{extTableSelectionBean.selectionItem.daysLive}"/> </h:panelGrid> <br /> <h:button value="Close" onclick="#{rich:component('popup')}.hide(); return false;"/> </rich:popupPanel> </ui:composition>
package org.richfaces.demo.tables; import java.io.Serializable; import java.util.ArrayList; import java.util.Collection; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.ViewScoped; import javax.faces.event.AjaxBehaviorEvent; import org.richfaces.component.AbstractExtendedDataTable; import org.richfaces.demo.tables.model.cars.InventoryItem; @ManagedBean @ViewScoped public class ExtTableSelectionBean implements Serializable { private String selectionMode = "multiple"; private Collection<Object> selection; @ManagedProperty(value = "#{carsBean.allInventoryItems}") private List<InventoryItem> inventoryItems; private List<InventoryItem> selectionItems = new ArrayList<InventoryItem>(); public void selectionListener(AjaxBehaviorEvent event) { AbstractExtendedDataTable dataTable = (AbstractExtendedDataTable) event.getComponent(); Object originalKey = dataTable.getRowKey(); selectionItems.clear(); for (Object selectionKey : selection) { dataTable.setRowKey(selectionKey); if (dataTable.isRowAvailable()) { selectionItems.add((InventoryItem) dataTable.getRowData()); } } dataTable.setRowKey(originalKey); } public Collection<Object> getSelection() { return selection; } public void setSelection(Collection<Object> selection) { this.selection = selection; } public List<InventoryItem> getInventoryItems() { return inventoryItems; } public void setInventoryItems(List<InventoryItem> inventoryItems) { this.inventoryItems = inventoryItems; } public InventoryItem getSelectionItem() { if (selectionItems == null || selectionItems.isEmpty()) { return null; } return selectionItems.get(0); } public List<InventoryItem> getSelectionItems() { return selectionItems; } public void setSelectionItems(List<InventoryItem> selectionItems) { this.selectionItems = selectionItems; } public String getSelectionMode() { return selectionMode; } public void setSelectionMode(String selectionMode) { this.selectionMode = selectionMode; } }
