How to put p:commandLink with p:graphicImage in a dynamic columns datatable

Question

I've followed the example of <p:datatable> dynamic columns feature in primefaces showcase, and it works great.

Now what i want is to put instead of simple <h:outputText> columns, i want to put columns with <p:graphicImage> nested in <p:commanLink> which serves to show a <p:dialogue>.

in other words how can i use this :

<f:facet name="header">
   #{column.header}
</f:facet>
   #{car[column.property]}
</p:columns>

to get it to generate something like this :

<p:column headerText="R"
          style=" text-align: center;"
          width="10"
          rendered="true">
    <p:commandLink id="MRepShowButton" update=":form1:display" onclick="EditorDialog.show();"  title="Editer le compte rendu"> 
       <f:setPropertyActionListener value="#{exam}" target="#{dyna.selectedExamen}" />  
       <p:graphicImage id="img1" value="/images/study_Report_icons/Text/0.png" rendered="#{exam.examen.rapport.rapportWrittenState == null}"/>
       <p:graphicImage id="img2" value="/images/study_Report_icons/Text/#{exam.examen.rapport.rapportWrittenState}.png" rendered="#{exam.examen.rapport.rapportWrittenState != null}"/>
  </p:commandLink>
</p:column>

Just to let you know i can programatically make it like this :

column.setWidth(String.valueOf(columnmodel.get(i).getWidth() - widthOptimizer));
CommandLink rapstatelink = (CommandLink) application.createComponent(CommandLink.COMPONENT_TYPE);

rapstatelink.setId("MRepShowButton");
rapstatelink.setTitle("Editer le rapport du patient");
rapstatelink.setUpdate(":formero");
rapstatelink.setOnclick("EditorDialog.show();");


ValueExpression value = ef.createValueExpression(elc, "#{exam}", Cotation.class);
ValueExpression target = ef.createValueExpression(elc, "#{dyna.selectedExamen}", Cotation.class);
rapstatelink.addActionListener(new SetPropertyActionListenerImpl(target, value));
ValueExpression value1 = ef.createValueExpression(elc, "#{dyna.toHTML(dyna.selectedExamen.examen.rapport.rapportWrittenFile)}", String.class);
ValueExpression target1 = ef.createValueExpression(elc, "#{dyna.html}", String.class);
rapstatelink.addActionListener(new SetPropertyActionListenerImpl(target1, value1));

GraphicImage rapstateimage = (GraphicImage) application.createComponent(GraphicImage.COMPONENT_TYPE);
rapstateimage.setId("img1");
ValueExpression show1 = ef.createValueExpression(elc, "#{exam.examen.rapport.rapportWrittenState == null}", Boolean.class);
rapstateimage.setValueExpression("rendered", show1);
rapstateimage.setValue("/images/study_Report_icons/Text/0.png");
rapstatelink.getChildren().add(rapstateimage);

GraphicImage rapstateimage2 = (GraphicImage) application.createComponent(GraphicImage.COMPONENT_TYPE);
rapstateimage2.setId("img2");
ValueExpression patsategraphExp = ef.createValueExpression(elc, "/images/study_Report_icons/Text/#{exam.examen.rapport.rapportWrittenState}.png", Object.class);
rapstateimage2.setValueExpression("value", patsategraphExp);
ValueExpression show2 = ef.createValueExpression(elc, "#{exam.examen.rapport.rapportWrittenState != null}", Boolean.class);
rapstateimage2.setValueExpression("rendered", show2);
column.setStyleClass("imagero");

rapstatelink.getChildren().add(rapstateimage2);
column.getChildren().add(rapstatelink);
table.getChildren().add(column);

*this approach of creating the whole datatable in the backing bean and bind it to the facelet does work with a major problem which is i should click twice on the command link to fire the action.(no nested forms and everything is compliant to BalusC Answer).

Additional info: Primefaces 4.0. JSF 2.2.

You really need a `` in this case? If not, let us know. I have an example here using ``, but first i need to know if `` is a must. — VulfCompressor, Dec 26 '13 at 11:42

score 0 · Answer 1 · answered Dec 26 '13 at 12:49

0

This is an alternative using <p:commandButton/>:

<p:commandButton id="MRepShowButton" update=":form1:display" onclick="EditorDialog.show();" icon="custom-icon" />

Declare this in your CSS stylesheet (adjust the image path according to your project):

.custom-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/img/chart_stock.png") !important;
}

answered Dec 26 '13 at 12:49

VulfCompressor

1,390
1
11
26

but how do i use it with #{car[column.property] that is my real question ? – Jalal Sordo Dec 26 '13 at 13:35
The only question i've found in your topic was this: `in other words how can i use this to get this `. The code above does exactly the same thing you need, but in a `` (you've said earlier that doing it in a `` was no problem). – VulfCompressor Dec 26 '13 at 15:56
look here http://stackoverflow.com/questions/20787244/how-can-i-get-the-children-of-a-pcolumn – Jalal Sordo Dec 26 '13 at 16:05

score 0 · Answer 2 · edited May 23 '17 at 11:56

Use name property, not value in p:graphicImage.

p:graphicImage uses name property (and not value) to match the image in the resources folder. If name is not provided, the img html element will not be rendered.

Example (based on the PrimeFaces columns showcase):

 <p:graphicImage name="images/#{car.year}.jpg" />

You can also use the library property (same result in this case).

 <p:graphicImage library="images" name="#{car.year}.jpg" />

Images and directories must exist in the WebContent/resource folder in your project.

Take also into account my answer here about how to include p:commandLink into a p:columns block.

How to put p:commandLink with p:graphicImage in a dynamic columns datatable

2 Answers2