CODEWITHSUNDEEP
jsf-2primefacesdatatable
ThunderPhoenix
ThunderPhoenix

Reputation: 1883

selection in primefaces datatable doesn't work correctly

I tried instant row selection in primefaces <p:datatable>, but I found that when I click upon cell text, the row is not selected. If I would select a row, I must click upon edge cell.

Any idea to fix the problem.

Upvotes: 1

Views: 5051

Answers (6)

jmoran
jmoran

Reputation: 164

I've also been facing this issue. After searching in google I've found the solution for my case (with text in p:cellEditor inside p:column). It was applying style="display:block;" for all the outputText. In example:

<p:column id="name" headerText="NAME" style="text-align:center">
    <p:cellEditor>
        <f:facet name="output"><h:outputText value="#{community.name}" style="display:block;"/></f:facet>
        <f:facet name="input"><h:inputText value="#{community.name}"/></f:facet>
    </p:cellEditor>                     
</p:column>

The solution is the second comment in this blog entry: http://geek-and-poke.com/geekpoke-gets-serious/2014/2/23/primefaces-datatables-with-in-table-editing-row-mode-and-single-selection

Upvotes: 1

Bender
Bender

Reputation: 647

I encounter same issue in my dataTable.

<p:dataTable id="kpiHierarchyTable"
             widgetVar="kpiHierarchyTable"
             value="#{kpiHierarchies.hierarchies}"
             var="hierarchy"
             emptyMessage="#{msg['common.emptyMessage']}">
    <!-- Колонка с кодом-->
    <p:column id="hierarchyCode"
              headerText="#{msg['common.code']}"
              filterBy="#{hierarchy.code}"
              sortBy="#{hierarchy.code}">
        <div class="center">
            <h:outputText value="#{hierarchy.code}"/>
        </div>
    </p:column>
    .
    .
    .
</p:dataTable>

Soluion for my problem was to remove <div></div> from cell content. Hope it helps someone :)

Upvotes: 0

Klay Martens
Klay Martens

Reputation: 13

Years later, but what the heck - thought this might be useful to someone out there...

I ran into the same problem on PF 5.3. Seems like the click event doesn't get propagated onto the table row - definitely an omission in the PF script. As mentioned in an earlier answer, if you want the "official" fix then you need to purchase PRO support...on the other hand, it isn't impossible to code a work around. Not making any claims to this sample's efficiency either in implementation or design. All you need are the following functions - this works for both a scrollable and non-scrollable table. Haven't tested for quite a few scenarios, but it should give you a start - please post updates:)

$(document).ready(function() {
    attachShowEvent();
});

/*
 * Seems that if the table is hidden then the ready functions 
 * wont fire...so you have to manualy attach the thing. Has
 * to be an easier way - this would happen if the table is
 * in a tabView tab which is not visible on page load. In this case you have to 
 * manualy attach the events when the tab gets selected
 */
function attachShowEvent(){
  /*
   * Fix hover pointer
   */
   $('.ui-datatable-selectable label').hover(function() {
     $(this).css('cursor','pointer');
   });
   /*
    * attach click and double click events to p:outputLabel
    */
   $('.ui-datatable-selectable label').click(function(event) {
     tableLabelClicked(event);        
   });
   /*
    * dblclick doesnt work - something is explicity blocking it
    * dont have the energy to find it:)
    */
   $('.ui-datatable-sekectable label').dblclick(function(event){
     tableLabelDblClicked(event);
   });
}

function tableLabelClicked(event){  
  /*
   * Trigger the "click" event on the parent td  
   */
  try{
    $(event.target).parent().trigger( "click" );
  }catch(e){
    console.log(e);
  }
}

function tableLabelDblClicked(event){  
  /*
   * Trigger the "dblclick" event on the parent td  
   */
  try{
    $(event.target).parent().trigger( "dblclick" );
  }catch(e){
    console.log(e);
  }
}

Upvotes: 1

Koekiebox
Koekiebox

Reputation: 5963

I found that in our situation in at least PrimeFaces 5.3, using a <p:outputLabel> in the content of a cell prevents the click to select the row. A workaround is to not make use of the PrimeFaces label, but instead make use of the default JSF library to simply output text without any fancy "gadgetry".

Change:

<p:outputLabel value="#{item.description}" />

to:

<h:outputText value="#{item.description}"/>

Upvotes: 6

ckinfos
ckinfos

Reputation: 121

I can verify that the question is well placed and it is happening. At Primefaces 3.5.7 I am using datatable Instant selection as described in the authors site and the selection is only triggered correctly when you don't hit the facet part of the table! I am testing on Mozilla Firefox 24.

Let me mention that in his example it works because he just doesn't have component inside facet in column, or maybe the celleditor causes some malfunction in selection example. 

       <p:column headerText="Model" style="width:30%">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.model}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{car.model}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>

Instead he is using:

       <p:column headerText="Model">  
            #{car.model}  
        </p:column>

What I have done (as the author of the PF requires u to be PRO subscriber to give u solution!) is add an empty column on the beginning or the end of the datatable and only when clicking there the user can do what you let him do.

e.g.: 

<p:column headerText="Select" width="10">
</p:column>

Upvotes: 1

anm
anm

Reputation: 545

You have to use ajax for this. 

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

Just use the example in the showcase: http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

Upvotes: 0

Related Questions