0

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 -->
RohitT
  • 187
  • 2
  • 11
  • Given that you have a popup panel for every row (why?) it's possible the `showModalPanel` method is not finding the correct one. Have you checked the generated code? You also don't need to rerender the panel since the content is static. – Makhiel Nov 22 '19 at 18:01
  • Thank you for the reply @Makhiel. I have it for each row so that the full comment would be displayed in that popup panel. Where can i see the generated code ? If If i dont use reRender or use just render, then it always displays the 1st comment. There are 20 rows and last column is the Comment column. Please could you help me out. – RohitT Nov 26 '19 at 09:10
  • Right click -> Inspect element (or something like that depending on your browser); your comment confirms my suspicion that the `showModalPanel` method probably shows the first panel it finds which is why you're always seeing the first row. – Makhiel Nov 26 '19 at 16:55

1 Answers1

0

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>
Makhiel
  • 3,874
  • 1
  • 15
  • 21