3

I've got a BIG problem using Datatable and Dialog together.

I need to click on a datatable's row and showing a dialog which loads data from datatable's selected item.

Selection goes fine, but the selected element is set to null as soon as the dialog is shown :/

Here's some code :

<h:form id="form">  
                    <pou:dataTable widgetVar="conv" id="mex" var="conv" value="#{messagesBean.listaConversazioni}" paginator="true" rowKey="#{conv}" paginatorPosition="bottom"  
                                   selection="#{messagesBean.destinatario}"  selectionMode="single" rows="15">  
                        <pou:ajax event="rowSelect" 
                                  oncomplete="convDialog.show()" update=":form:display, :growl, :menuPanel" />  
                        <pou:column>
                            <f:facet name="header">
                                <h:outputText value="Conversazioni"/>                                                                        
                            </f:facet>
                            <h:outputText value="#{conv.username}"/>                                
                        </pou:column>  
                    </pou:dataTable>                     

                    <pou:dialog id="convDialog" header="Conversazione" widgetVar="convDialog" onHide="conv.unselectAllRows()" position="center" modal="true" resizable="false" draggable="false"  
                                showEffect="explode" hideEffect="explode" height="635" width="620">                                  
                        <h:panelGrid id="display">
                            <pou:panel id="postForm">
                                <div align="center">
                                    <pou:inputTextarea value="#{messagesBean.messaggio}" cols="50" autoResize="true" maxlength="255"/> <br/>
                                    <pou:commandButton  action="#{messagesBean.invia(messagesBean.destinatario)}" value="Invia" update="display, :growl"/>
                                </div>   
                            </pou:panel>             
                            <pou:panel>
                                <div class="conversazionePanel">
                                    <pou:dataTable id="mexTable" var="mex" value="#{messagesBean.caricaConversazione(messagesBean.destinatario)}" rowStyleClass="postTable">                                         
                                        <pou:column style="border: none; background: rgba(0,0,0,0)">  
                                            <div id="messaggio_#{mex.idMessaggio}">
                                                <pou:outputPanel rendered="#{mex.mittente eq loginBean.utente}">
                                                    <pou:panelGrid columns="2">
                                                        <h:outputText value="Io"/>
                                                        <div class="messaggioInviato">#{mex.testo}</div>
                                                    </pou:panelGrid> 
                                                </pou:outputPanel> 
                                                <pou:outputPanel rendered="#{mex.destinatario eq loginBean.utente}">                                                                                                                                                
                                                    <pou:panelGrid columns="2">
                                                        <div class="messaggioRicevuto">#{mex.testo}</div>
                                                        <h:outputText value="#{mex.mittente.username}"/>
                                                    </pou:panelGrid>                                                                                                
                                                </pou:outputPanel>                                                 
                                            </div>
                                        </pou:column>                                        
                                    </pou:dataTable>   
                                </div>
                            </pou:panel>                            
                        </h:panelGrid>                                                                                    
                    </pou:dialog>                        
                </h:form>

_

#{messagesBean.listaConversazioni} returns a List of User

_

#{conv} is a User

_

#{messagesBean.destinatario} is the User that I need to set. It takes conv's value when I click on the row, but it suddenly takes null.

The strange think is that

<pou:dataTable id="mexTable" var="mex" value="#{messagesBean.caricaConversazione(messagesBean.destinatario)}"

while, in the same dialog

<h:outputText value="#{messagesBean.destinatario==null}">

prints true :\

What's wrong with it ?

Akos K
  • 7,071
  • 3
  • 33
  • 46
StepTNT
  • 3,867
  • 7
  • 41
  • 82

2 Answers2

0

Not sure, but rowKey="#{conv.id}" maybe?

ravshansbox
  • 748
  • 11
  • 21
0

I know this post is old but this same scenario has come up multiple times and the issue 99% of the time is using a @RequestScoped bean to store the selection. The Request Scoped bean is filled out with the selected row but then is torn down. So when you want to open your dialog a new RequestScoped bean is created with an empty selection. Try changing your backing bean that is holding the selection to @ViewScoped and your problem should be solved.

Melloware
  • 10,435
  • 2
  • 32
  • 62