CODEWITHSUNDEEP
javaajaxjsfprimefacesprimefaces-datatable
Karim Oukara
Karim Oukara

Reputation: 2706

How to get the selected cell in <p:dataTable> Primefaces?

I want to get, if possible, the selected cell or colomn (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:

But I can't get the selected colomn Date or Name

Method onRowSelect is like :

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

Upvotes: 2

Views: 14039

Answers (4)

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5326

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!

Upvotes: 3

J Slick
J Slick

Reputation: 939

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.

Upvotes: 0

SRy
SRy

Reputation: 2967

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);
}

Upvotes: 1

Avinash Singh
Avinash Singh

Reputation: 3777

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

Upvotes: 1

Related Questions