ContextMenu and DataTable with dynamic columns

[msh321]

Hi,

I have a datatable with a number of columns that can only be determined at runtime. Hence, I need to implement a data table with dynamic columns (using the "<p:columns>" element).

In addition, there is a requirement that when a user right-clicks on a row in the table, a context menu must pop up with a single menu item. And if the user clicks the menu item I need to call a JavaScript function (that someone else wrote) with the selected row identifier as the input parameter.

I have tried something similar to this:

Code: Select all

  <p:contextMenu for="abcTable">
    <p:menuitem value="Show Details" onclick="displayDetails(***id***);" />
  </p:contextMenu>

  <p:dataTable id="abcTable" var="row" value="#{ABCBean.valueList}" rowKey="#{row.record.id}"
    selection="#{ABCBean.selectedRecord}" selectionMode="single">
    <p:columns columnIndexVar="index" id="#{row.data[index]}_#{index}" value="#{ABCBean.columns}" var="col">
      <f:facet name="header">
        <h:outputText value="#{col.name}" />
      </f:facet>
      <h:outputText value="#{row.data[index]}" />
    </p:columns>
  </p:dataTable>

Well, of course I have not tried with "***id***" as input parameter to the "displayDetails()" JavaScript function -- however, I have no idea how I can pass the identifier of the selected row to a custom JavaScript.

Has anyone else encountered a similar problem? If "yes", did you get it to work?

BTW: The method ABCBean.getValueList() method returns a list of beans (of type DisplayBean) and the DisplayBean look as shown below:

Code: Select all

package xxx.yyy.zzz;

import java.io.Serializable;
import java.util.ArrayList;

public class DisplayBean implements Serializable
{
  private ArrayList<String> data;
  private RecordBean record;

  public ArrayList<String> getData() 
  {
    return data;
  }

  public void setData(ArrayList<String> data) 
  {
    this.data = data;
  }

  public DisplayBean(ArrayList<String> data, RecordBean record) 
  {
    super();
    this.data = data;
    this.record = record;
  }

  public RecordBean getRecord()
  {
    return record;
  }

  public void setRecord(RecordBean record)
  {
    this.record = record;
  }
}

In addition, the RecordBean contains an attribute called "id" with a corresponding getter and setter.

When I try out this code (I have removed the "onclick" attribute from <p:menuitem>) and select the "Show Details" menu item, I get an error message saying something like "Cannot find data with given rowKey:6". The rowKey is indeed correct, so I don't understand what is going wrong here.

Best regards,
Mads

PS: I have simplified the code snippets in an attempt to make my problem more clear. Please bear over with me, if I have introduced any typos that might be disturbing to the reader...

[bpap]

What is the scope of ABCBean?

[msh321]

The scope of ABCBean is "request".

/Mads

[bpap]

Try making that view or session scoped.

[msh321]

Thanks for the tip. I have tried it, but no luck.

However, I really need the bean to be request-scoped since the data that is displayed in the table is changing all the time.

/Mads

[msh321]

Sorry for asking again, but is there a way to call a JavaScript function using dataTable/contextMenu and at the same time pass the selected row id to the JavaScript function as a parameter?

...or is this a known limitation.

I can see from the PrimeFaces showcase, that it is possible to use <p:dialog> to pop up a dialog that can display more information about the selected row in the datatable. However, I need to call a JavaScript function that has already been implemented, and I need to pass some kind of row identifier to the JavaScript function.

Hope that someone can help.

/Mads

[bpap]

You can use widgetVar for datatable to get the selected rowKey(s)

Code: Select all

<p:contextMenu for="abcTable">
  <p:menuitem value="Show Details" onclick="displayDetails(theTable.selection);" />
</p:contextMenu>

<p:dataTable id="abcTable" var="row" value="#{ABCBean.valueList}" rowKey="#{row.record.id}"
  selection="#{ABCBean.selectedRecord}" selectionMode="single" widgetVar="theTable">
  ...
</dataTable>

[msh321]

Cool -- it works! Thanks a lot!!!

I was not even aware of the meaning of the 'widgetVar' attribute.

Best regards,
Mads