[Datatable] How react to row selection to display something?

[Grunt2000]

Hello,

I have a Datatable that begins to work well.

Code: Select all

<p:dataTable id="listeDesAssociations" var="a" value="#{vivo.associations}" paginator="true" rows="${v001.datatable_rows}"
   selection="#{asso.selection}" selectionMode="single">
   <p:column>
      <f:facet name="header"><h:outputText value="Code" /></f:facet>
      <h:outputText value="#{a.id}" />
   </p:column>

   <p:column>
      <f:facet name="header"><h:outputText value="Nom" /></f:facet>
      <h:outputText value="#{a.nom}" />
   </p:column>
</p:dataTable>

Just behind is a form to add content in that datatable, that does its job as expected too: when I add content into the form and use its submission button, it is sent to the datatable as wished.

Code: Select all

<h:form id="saisieAssociation">
   <table>
      <tr>
         <td><h:outputText value="${v001.col_code}" /></td>
         <td><h:inputText id="code" value="#{asso.code}" /></td>
      </tr>
      
      <tr>
         <td><h:outputText value="${v001.col_nom}" /></td>
         <td><h:inputText id="nom" value="#{asso.nom}" /></td>
      </tr>
      
      <tr>
         <td colspan="2">
            <p:editor id="activite" width="${v001.w_activité}" height="${v001.h_activité}" 
                      value="#{asso.activité}" title="${v001.col_activité}" />
         </td>
      </tr>
      
      <tr>
         <td></td>
         <td><p:commandButton update="listeDesAssociations" actionListener="#{asso.soumission()}" value="${v001.btn_creation}" /></td>
      </tr>
   </table>
</h:form>

I've made my datatable selectable.
But what I don't know about, is how to react dynamically to a row selection.

I have a:

Code: Select all

selection="#{asso.selection}"

in my <p:datatable> declaration. It will ensure I will receive my selection choice at submission time.

But what is the way to ask the datatable to transmit data immediately from the datatable columns to the form field that is below, at the time I want to display to the user the details of his selection? (in order to allow him to update or remove the datatable entry)?

I saw a onSelectComplete attribute for the <p:datatable> component. It relies on Javascript.
Is it the cleanest way to do what I want? Adding a script like:

Code: Select all

<p:dataTable id="listeDesAssociations" var="a" value="#{vivo.associations}" paginator="true" rows="${v001.datatable_rows}"
   selection="#{asso.selection}" selectionMode="single" onSelectComplete="onRowSelection()">

Code: Select all

<script>
    function onRowSelection()
     {
          document.element('saisieAssociation:code') = #{a.id};
          document.element('saisieAssociation:nom') = #{a.nom};
     }
</script>

(where saisieAssociation:code and saisieAssociation:nom are the names by JSF to the form fields, and a.id, a.name the properties of the managed bean linked trough var attribute to the datatable).

I do not think it could work.

I am not a fan of Javascript. In fact I started Primefaces to avoid writing some.
I guess I am not using the good way to reach the goal I am looking for.

How should I do this? : copying some attributes content of the managed bean associated with the datatable selected row to some other fields of my saisieAssociation form, at selection time?

Regards,

Grunt.

[callahan]

Hi,

Perhaps you could use the datatables "Instant Row Selection" feature. There is an example here http://www.primefaces.org:8080/prime-sh ... onAjax.jsf that looks similar to what you want to achieve. The example uses the datatables update attribute to update to the values of controls outside the datatable using ajax. There is more info on page 111 of the user guide.

[Grunt2000]

Thanks a lot, your solution is working well !


To do that, primefaces asked me to put my datatable under a form and I choose the form the others fields where already into: saisieAssociation. And this is this form that is also the target of my updates when a row selection is made on the datatable.

Maybe all I ask at the same time is a bit dangerous, because it seems that an issue occurs.
Having two potential Ajax events emiters:

1) Datatable to form:
<p:dataTable id="listeDesAssociations" var="a" value="#{vivo.associations}" paginator="true" rows="${v001.datatable_rows}"
selection="#{asso.selection}" selectionMode="single" update="saisieAssociation">

2) form to database:
<p:commandButton actionListener="#{asso.soumission()}" value="${v001.btn_creation}" update="listeDesAssociations" />

Makes the submission button not working at all. (form is not submitted).


I have to replace it with:
<h:commandButton actionListener="#{asso.soumission()}" value="${v001.btn_creation}" />

which, of course, won't use Ajax.


Whatever, thanks a lot, because the help you provided me allowed me archieve cleanly something that I feared it could be far more uglier to wrote.

Grunt.


EDIT: I just resolved this issue by putting my two components into different forms instead of one gathering all.