The modal panel does not display the correct comment when called through an a4j commandlink

I want to display an ellipsis as a link for the comment. Then when the user clicks on the ellipsis, then the full comment is displayed in the modalpanel. If comment is more than 8 characters then an ellipsis is diplayed.

It works fine, just that the appropriate comment is not displayed....for eg...the 2nd comment is displayed for the 1st one and so on. I printed the rowIndex in the modalpanel and its starts from 1 for the 1st row and 2 for the 2nd row of data and so on.

Please help me get the correct comment in modalpanel.

Below part is of an rich-extendedDataTable having var="row" rowKeyVar="rowIndex"

<rich:column sortable="true" width="13%">
    <f:facet name="header">
        <h:outputText value="#{msg.COMMENTS}" escape="false" />
    </f:facet>

   <!-- Start : change to add ellipsis for long comments -->                                
   <h:outputText value="#{not empty row.comments or fn:length(row.comments) gt 10 ? fn:substring(row.comments, 0, 8) : row.comments}" />

  <a4j:commandLink id="descriptionLink" value="#{not empty row.comments or fn:length(row.comments) gt 8 ? '...' : ' '}"
    onclick="showProgressLoader();"                                     
    oncomplete="Richfaces.showModalPanel('popup');hideProgressLoader();"
    style="font-size: 10pt;font-weight: bold;"
    reRender="popup">
  </a4j:commandLink>

 <rich:modalPanel id="popup" resizeable="true">  
    <f:facet name="header">  
        <h:outputText id="description" value="Full Comment" /> 
    </f:facet>  
    <f:facet name="controls">  
    <h:graphicImage value="/images/delete.png" style="cursor:pointer" onclick="#{rich:component('popup')}.hide()" height="10px" width="10px"/>  
        </f:facet>  
            <p>  
                #{row.comments} #{rowIndex}
            </p>  
  </rich:modalPanel>                                    
</rich:column>
<!-- End : change to add ellipsis for long comments -->

Solution

Instead of having one panel per row you can put the panel outside of the table. When you click on the button you save the selected item in your bean and then rerender the panel to show the correct item, something like:

<a4j:commandLink … 
     onclick="bean.setSelectedItem(row)"
     oncomplete="Richfaces.showModalPanel('popup');" />

<rich:modalPanel id="popup" resizeable="true">
    …
    #{bean.selectedItem.comment}
</rich:modalPanel>