Problem is short. I have created a p:datatable but within the p:column i actually have a div element. Unfortunately the datatable should have selectable rows and the div just won't cooperate ;). So the solution is to call it manually, on the div element there is onclick listener, but how should I call the rowSelection of the datatable? Is there some list of the functions of Primefaces' elements?

the code:

<p:dataTable var="user" value="#{rec.friends}" rowKey="#{user.id}" widgetVar="friendscrollist"
        rendered="#{not empty rec.friends}" scrollable="true" rowIndexVar="findex"
        scrollHeight="500" scrollWidth="220" selectionMode="single" selection="#{rec.chosenFriend}" styleClass="friendscroll">
                <p:column width="198" id="friend#{findex}">
    <div class="friendlist" onclick="friendscrollist.clickRow(#{findex})" />
                </p:column>
                <p:ajax update=":leftform" event="rowSelect" />
                <p:ajax update=":leftform" event="rowUnselect" />
</p:dataTable>

Of course it is a simplified version, only things u need. So the question is what to call in the div onclick?

Problem is short. I have created a p:datatable but within the p:column i actually have a div element. Unfortunately the datatable should have selectable rows and the div just won't cooperate ;). So the solution is to call it manually, on the div element there is onclick listener, but how should I call the rowSelection of the datatable? Is there some list of the functions of Primefaces' elements?

the code:

<p:dataTable var="user" value="#{rec.friends}" rowKey="#{user.id}" widgetVar="friendscrollist"
        rendered="#{not empty rec.friends}" scrollable="true" rowIndexVar="findex"
        scrollHeight="500" scrollWidth="220" selectionMode="single" selection="#{rec.chosenFriend}" styleClass="friendscroll">
                <p:column width="198" id="friend#{findex}">
    <div class="friendlist" onclick="friendscrollist.clickRow(#{findex})" />
                </p:column>
                <p:ajax update=":leftform" event="rowSelect" />
                <p:ajax update=":leftform" event="rowUnselect" />
</p:dataTable>

Of course it is a simplified version, only things u need. So the question is what to call in the div onclick?

• javascript
• ajax
• jsf
• jsf-2
• primefaces

5 Answers 5

the <p:dataTable widgetVar> has unselectAllRows() and selectRow(index) functions which are exactly what you need.

<div onclick="friendscrollist.unselectAllRows(); friendscrollist.selectRow(#{findex})">

There's unfortunately no documentation available for those functions, but in Chrome/Firebug you can see a list of all available functions in autocomplete list when you enter friendscrollist. in JS console. Below is a screen from Chrome:

Looking in the JS source code or common sense based on the function name should tell/hint you what those functions do.

Update: I stand corrected, a few of those functions are actually documented in PrimeFaces 3.4 User's Guide. They're in the "Client Side API" section of chapter 3.26 "DataTable", on page 146.

The accepted solution will work for a single selection table, but won't work for multiple selection. Another way to solve this problem that should work for both is to use the following instead of <div>

<h:panelGroup layout="block">

That will render a <div> inside your column, and will not interfere with the onclick event processing.

For pagination, you can control rows per page issue by this way:

friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * friendscrollist.paginator.cfg.rows);

I want to add another information for everybody who faces a similar issue with right click or context menu. You cannot capture right click event if you are using <p:graphicimage>. Somehow, oncontextmenu event of <img> tag is removed in primefaces.

If you want to select the row by right clicking an image content inside a row, you should use tag and oncontextmenu event.

<img src="..." oncontextmenu="dataTable.unselectAllRows();dataTable.selectRow(#{rowIndex});"/> 

If pagination is enabled you can do something like this:

onmouseup="friendscrollist.unselectAllRows();friendscrollist.selectRow(#{rowIndex} - friendscrollist.paginator.getCurrentPage() * 15);"

When 15 is the number of rows in your Table.

I didn't found a way to get the number of rows programatically...