how to show an image in p:dialog from a datable - jsf

Question

I'm using primefaces to show a datable :
I have a column in my datable , it's an image , what i want is when i clic in the image , a p:dialog show the image with a big dimension .
I did it but the p:dialog show the wrong image, it shows the image of the last row in the datable .
<p:column headerText="imagePath">
<h:graphicImage library="images" name="#{book.imagePath}.png"
width="75px" onclick="PF('dlg').show();"/>
<p:dialog widgetVar="dlg" resizable="f" height="600px"width="500px"onShow="js">
<h:graphicImage library="images" name="#{book.imagePath}.png"width="400px"/>
</p:dialog>
</p:column>
Thank you
I have solved the problem with the commandlink component
<p:column headerText="imagePath">
<p:commandLink update=":zaki:foo:imgDlg1" oncomplete="dlg1.show()"
action="#{jsfClient.showImg(book)}">
<h:graphicImage value="/resources/images/#{book.imagePath}.png" width="75px"/>
</p:commandLink>
</p:column>
I have put in image into a commandlink and it works perfect , note that i have put the p:dialog out from the datable.

Answer 1

You should poll the dialog out of the dataTable and record which book did the user select before open the dialog.
Take a look at this code:
<p:dataTable value="#{imgBean.books}" var="book">
<p:column headerText="imagePath">
<h:commandButton image="/images/#{book.imagePath}.png" style="width: 75px" action="#{imgBean.showImg(book)}"/>
</p:column>
</p:dataTable>
<p:dialog widgetVar="dlg" id="imgDlg" resizable="f" height="600px" width="500px">
<h:graphicImage value="../images/#{imgBean.selectedBook.imagePath}.png" width="400px"/>
</p:dialog>
The action of the commandButton looks like:
private Book SelectedBook;
public void showImg(Book book){
this.SelectedBook=book;
RequestContext.getCurrentInstance().update("imgForm:imgDlg");
RequestContext.getCurrentInstance().execute("PF('dlg').show()");
}
public Book getSelectedBook() {
return SelectedBook;
}
In this way, you can not only show the image but also other information of the book.
BTW, you can also update/show the dialog in the h:commandButton instead of from backing Bean.

Answer 2

This is common widgetvar conflict. Think about how many p:dialogs are rendered in datatable and what is widgetvar of each? Inspect your rendered page to get better idea.
To resolve this issue either use some image id and pass it to custom javascript or create property (ex. "selectedBookImage") in your baking bean and refer it from <p:dialog>
. Using this technique you can easily move p:dialog outside datatable.