Row selection with cell-editor in PrimeFaces DataTable makes it difficult to select a row

Question

I'm having a PrimeFaces (3.5) DataTable which contains some columns with <p:cellEditor> as usual in which selection of multiple rows is enabled by selectionMode="multiple".

When I click on a cell in a row containing <p:cellEditor>, the row is selected only time to time. The selection of the row is possible only when the padding area close to the cell borders is clicked. The selection is not made, when the actual text of that cell in the middle is clicked which is actually enclosed by <p:cellEditor>.

This doesn't happen, when <p:cellEditor> is dismissed.

Selection of a row in this manner is essential in my case , since a single row is deleted with a context menu by right-clicking on the row to be deleted exactly the same as this showcase example (that example works fine because it doesn't have <p:cellEditor>. I don't find a showcase example that uses both row selection and cell-editor together).

This issue was reported and its status is 'WontFix'. They said,

Cell and Row selection at same time is not supported.

But downgrading the framework from 3.5 indeed works (therefore, the above quote should simply be false and it appears to be misinterpreted) but this is not a solution. Did someone encounter this issue? Is there a way to change this behaviour?

Answer 1

Well, it has been 4 years and it hasn't been fixed yet. But - you can use some of JS magic in order to make it work.

First define JS function which selects datatable row by index:

<script>
function selectCurrentRow(index) {
  var table = PF('myTableWidgetVar');
  table.unselectAllRows();
  table.selectRow(index, false);
}
</script>

Then define your datatable with rowIndexVar attribute set:

 <p:dataTable id="myTable" widgetVar="myTableWidgetVar" var="parameter"
              value="#{serviceMB.parameters}"
              rowIndexVar="rowIndex"
              rowKey="#{parameter.id}"
              selectionMode="single"
              editMode="cell">

And wrap cellEditor fields inside a div with onclick function defined:

 <p:column>
     <p:cellEditor>
         <f:facet name="output">
             <div onclick="selectCurrentRow(#{rowIndex});">
               <p:outputLabel value="#{parameter.value}"/>
             </div>
         </f:facet>
         <f:facet name="input">
             <div onclick="selectCurrentRow(#{rowIndex});">
               <p:inputText value="#{parameter.value}"/>
             </div>
         </f:facet>
     </p:cellEditor>
 </p:column>

This hack wont work properly if you are using row grouping datatable (row indexes will be shifted).

EDIT:

Use this function if you're using row grouping datatable:

function selectByRowKey(rowKey, table) {
    for (var i = 0; i < table.rows.length; i++) {
        var row = table.rows.get(i);
        if (row.getAttribute("data-rk") === rowKey) {
            table.unselectAllRows();
            table.selectRow(i, false);
            break;
        }
    }
}

Where table = PF('myTableWidgetVar') and rowKey is a currently selected rowKey (for example '#{parameter.id}').

Answer 2

USE: style="display: block" in your cell:Editor, works for me.

<p:cellEditor>
        <f:facet name="output"><h:outputText style="display: block;" value="#{whatever}"/></f:facet>
        <f:facet name="input"><p:inputText id=......../></f:facet>
</p:cellEditor>