how to get the selected cell in <p:dataTable primefaces?

Question

I want to get, if possible, the selected cell or colomne (id) of primefaces <p:dataTable

my table is like :

<p:dataTable id="table" var="list" value="#{bean.list}" rowKey="#{list}" selectionMode="single" >
    <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" />
    <p:column headerText="Date" >
        <h:outputText  value="#{list.SDate}" />
    </p:column>
    <p:column headerText="Name" >
        <h:outputText value="#{list.IName}" />
    </p:column>
</p:dataTable>

with this method I can get the row selected (line) using <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" /> but I can't get the selected colomn " Date " or " Name "

onrowSelecte method is like :

 public void onRowSelect(SelectEvent event)
        myObject obj = (myObject)event.getObject();
        //.......
 }

Answer 1

Karim,

I think you are forgetting add update on your ajax event:

<p:ajax event="rowSelect" listener="#{bean.onRowSelect}" update="table" />

On update you need put your table id or element that encapsulates your table.

If the table is inside outputPanel, you can update it id instead the table.

The update attribute it is necessary for send the screen information to your backBean.

I hope it heps...

Good Luck!

Answer 2

I don't think primefaces has anything to select a column , you may need to add something like

<h:outputText  value="#{list.SDate}" >
<f:ajax event="select" listener="#{bean.setSelectedColumn}"/>
</h:outputText>

Use event.getComponent() to further determine which column is selected

Answer 3

You can do something like this to get the value of the specific column

<p:dataTable id="firsttable" var="list" value="#{bean.list}" rowKey="#{list}" selectionMode="single" >
     <p:column headerText="Date" >
        <h:outputText  value="#{list.SDate}" />
    </p:column>
    <p:column headerText="Name" >
        <h:outputText value="#{list.IName}" />
    </p:column>
</p:dataTable>

// This is capture the value of selected column
<h:inputText id="selectedId" value="#{bean.selectedColumn}" style="display:none">
       <f:ajax listener="#{bean.onRowSelect}"></f:ajax>
</h:inputText>

This script captures the values of the selected row and sets the inputHidden

 jQuery.noConflict();
    $(window).load(function () {
         $(document).delegate("#firsttable td", "click", function (event) {
             var columnNumber = jQuery(this).index();//get index of clicked row
         var colval=jQuery(this).find('div span').text()); // get the column value
         $("#selectedId").val(colval); //set value in the inputtext
         $("#selectedId").change(); //this will trigger the ajax listener
       });
    });

And In the bean define property to get the input text value

 String selectedColumn;

 public void onRowSelect(AjaxBehaviorEvent event) {
         String value=getSelectedColumn();
         System.out.println(value);
}

Answer 4

Regarding PrimeFaces DataTable, widgetVar, Javascript, jQuery:

I had trouble using Primefaces widgetVar to get the selected row of a PrimeFaces 3.5 DataTable. I looked through the PF source here...

https://code.google.com/p/primefaces/source/browse/primefaces/trunk/src/main/resources/META-INF/resources/primefaces/datatable/datatable.js?r=10301

...and also used Chrome debugger to examine the DataTable, but did not find a getSelectedRow method. I probably missed something useful, but here is my hack, which works.

var selectedRow = Array(); $('#idForm1\\\\:idDT tr.ui-state-highlight').each(function(i) { $(this).children('td').each(function(ii) { selectedRow.push($(this).text()); }); });

Array selectedRow is populated with the <td> text values of the selected DataTable row.