force row selection in PrimeFaces datatable

0
votes

I got a p:dataTable which contains 

<p:dataTable id="dataTable" widgetVar="dataTableCar" var="category"
value="#{CategoryBean.categories}" selection="#{CategoryBean.selectedCategory}"
selectionMode="single" rowKey="#{category}"                 
    <p:column headerText="name">
       <h:outputText value="#{category.name}" />
    </p:column>
    <p:column headerText="parent">
       <p:autoComplete id="parentCategory" completeMethod="#{CategoryBean.categories}" maxResults="20" value="#{category.parent}" var="p" itemLabel="#{p.name}"
  itemValue="#{p}" converter="#{categoryStringConverter}"
  forceSelection="true">
        <p:ajax event="itemSelect"
     listener="#{CategoryBean.oncategorySelect}" />
        </p:autoComplete>
    </p:column>

I need to force a row selection in case the user clicks into the autocomplete. Maybe I should mention if the user clicks into a ui control (in this example it is the autocomplete) which is hosted by the p:column, there will be no row selected.

Is there a way to implement this? If I don't get the selected row, I can't process the parent category.

2
jsfprimefacesdatatableselection

2 Answers

4
votes

You can Do this by 2 ways, both Include Jquery.

I will use the following p:dataTable code to show both the ways.
I'm using h:inputText instead of p:autoComplete .

<p:dataTable value="#{userManagedBean.userList}" var="user" 
                    selection="#{userManagedBean.selectedUser}" selectionMode="single"
                    rowKey="#{user.email}" widgetVar="dataTableWidget">
            <p:ajax event="rowSelect"/>

            <p:column headerText="Email">
                #{user.email}
            </p:column>

            <p:column headerText="Name">
                <h:inputText value="#{user.name}" onclick="myFunction(this);"/>
            </p:column>
        </p:dataTable>

First Way:

When ever user clicks on the Autocomplete simulate the click event on its parent, in this case its <td>, so which in turn selects its parent <tr> and finally your Row will get selected. 

<script type="text/javascript">
   function myFunction(ele){
    var tdEle = $(ele).parent();
    $(tdEle).click();
   }
</script>

Second Way

This by using the Primefaces client side API function selectRow(r,flag), which will be called on p:dataTable's widgetWar object.
Here selectRow(r,flag) will take 2 paramenters:

  • r is Jquery Row element () of the row which needs to be selected.
  • flag is Boolean which specifies ajax select or not.

so now My Javascript function for this would be: 

<script type="text/javascript">
    function myFunction(ele){
        var tdEle = $(ele).parent();
        var trEle = $(tdEle).parent();
        dataTableWidget.selectRow($(trEle),true); 
    }
</script>
0
votes

You can do this with

for example : In your datatble with primefaces you have the "onChange" in one of the columns

value="#{r.visualizaUnicoTodo}" styleClass="chk-nty pd" onchange="check_edit(this)">

To select the current item clicked

 var check_edit = function (id) {
            console.info("Id Elemento Checkeado :" + id);
            console.info("Verificar si esta seleccionado : : " + $(id).is(':checked'));
}