Double click event on rich:extendedDataTable (RF4) - pickList
lukas.p Apr 8, 2011 9:51 AMHi everyone!
I try to build a kind of "rich:pickList" as it is not yet contained in Richfaces 4. I am using two extended data tables and would like to move items from one table to the other on double clicks. I tried different approaches to achieve this:
1) <a4j:ajax event="rowdblclick"/> does not fire any events, at least the listener is not called on double clicks.
2) Using the onrowdblclick-attribute on the extendedDataTable and having <a4j:jsFunction/> calling the backing bean works, but
I got stuck as when adding and removing items from the model, the selectionchange event is not fired and the next time a double click occurs, the current selection in my bean does not match the actual selection on the front-end. Therefore the wrong items (or no items) are moved from one list to the other.
Is there a way to force the extendedDataTable to update the selection after a double-click? If I could use approach 1) this would be easy as I could retrieve the UIExtendedDataTable Object from the AjaxBehaviorEvent and just update the selection model in my bean..
Does anyone have further ideas how to achieve this double-click behaviour?
Thanks very much!
This is my sample code (only the source-table of the pickList, the target basically looks the same):
Front-End:
{noformat}
<rich:extendedDataTable id="srcTable" value="#{layoutBean.availableFields}"
var="field" onrowdblclick="dblClickSource();" selection="#{layoutBean.availableSelection}">
<a4j:ajax event="selectionchange" listener="#{layoutBean.selectionChangedAvailable}" />
<a4j:ajax event="rowdblclick" listener="#{layoutBean.selectionChangedAvailable}" />
<f:facet name="header">
<h:outputText value="Available" />
</f:facet>
<rich:column>
<h:outputText value="#{field.name}" />
</rich:column>
</rich:extendedDataTable>
<a4j:jsFunction name="dblClickSource" action="#{layoutBean.onDoubleClickSource}"
render="srcTable targetTable" />
{noformat}
Back-End:
{noformat}
@ManagedBean(name = "layoutBean")
@SessionScoped
public class LayoutBean {
// All layout items available for the user
private List<LayoutField> m_availableFields = new ArrayList<LayoutField>();
// Currently selected keys of the extendedDataTable containing available
// layout items
private Collection<Object> m_availableTableSelectedKeys;
// Currently selected items on the extendedDataTable containing available layout items
private List<LayoutField> m_availableTableSelection = new ArrayList<LayoutField>();
public List<LayoutField> getAvailableFields() {
return m_availableFields;
}
public void setAvailableSelection(Collection<Object> selection) {
m_availableTableSelectedKeys = selection;
}
public Collection<Object> getAvailableSelection() {
return m_availableTableSelectedKeys;
}
/**
* Fired if the user has changed his selection on the
* "available layout items" table
*
* @param event
*/
public void selectionChangedAvailable(AjaxBehaviorEvent event) {
UIExtendedDataTable dataTable = (UIExtendedDataTable) event.getComponent();
Object originalKey = dataTable.getRowKey();
m_availableTableSelection.clear();
for (Object selectionKey : m_availableTableSelectedKeys) {
dataTable.setRowKey(selectionKey);
if (dataTable.isRowAvailable()) {
m_availableTableSelection.add((LayoutField) dataTable
.getRowData());
}
}
dataTable.setRowKey(originalKey);
}
public void onDoubleClickSource() {
// Only add if not already contained
for (LayoutField field : m_availableTableSelection) {
if (!m_selectedFields.contains(field)) {
m_selectedFields.add(field);
}
}
m_availableFields.removeAll(m_availableTableSelection);
}
}
{noformat}