Adding style to specific p:row

Question

I use JSF with Primefaces 3.5. I use the p:panelGrid without the columns attribute, instead I explicitly create rows and columns with p:row and p:column, as demonstrated in the showcase (http://www.primefaces.org/showcase/ui/panelGrid.jsf).

Now I need to style one row differently with the help of some CSS class. But either I am missing it or there is just no way to add a class to a p:row?! I can even set the attribute styleClass, but it is ignored in the rendered output ...

Is there a way to somehow distinguish a row within a panelGrid by its class?

Answer 1

Try using a wild card on the css (to math all td that ends with your id)

Like this (select all td that its id ends with myRowId)

tr[id*='myRowId'] {
    color:red 
}

Here a jsfiddle

---

Previous answer...

Since you can't use styleClass on p:row you can try the following

Assign that p:row an id, like this : <p:row id="myRowId "

And apply the style in the following way (in your css file)

#myFormId\3A SomeNamingContainer\3A myRowId {
    background-color: red;
}

Do view source of your page in order to replace the myFormId and SomeNamingContainer with your real ids...

Also read this : How to use JSF generated HTML element ID in CSS selectors?

Answer 2

I don't know why the styleClass attribute is ignored by default (at least until PrimeFaces version 6.2), but you can create a custom renderer that appends its value to the HTML output. A simple drop in replacement for the default PrimeFaces renderer looks like this:

public class PanelGridBodyRowRenderer extends CoreRenderer implements HelperRowRenderer {

    @Override
    public void encode(FacesContext context, Row row) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        String rowStyleClass = PanelGrid.TABLE_ROW_CLASS;
        String userRowStyleClass = row.getStyleClass();
        if (userRowStyleClass != null) {
            rowStyleClass = rowStyleClass + " " + userRowStyleClass;
        }

        writer.startElement("tr", row);
        writer.writeAttribute("class", rowStyleClass, null);
        writer.writeAttribute("role", "row", null);
        renderChildren(context, row);
        writer.endElement("tr");
    }

}

For PrimeFaces version 6.2 you can simply create this renderer class within the package org.primefaces.component.row.renderer in your WAR. The classloader will then load your renderer instead of the identical renderer class within the PrimFaces JAR.

For more information on custom components and renderers see this answer.

Answer 3

If you need the same style in others rows, maybe you can work with the column style from p:column (according with your response to Daniel). Something like this:

.stylePerColumn {
    background-color: #F22626;
    color: black;
    border-style: none !important;
}

and int the xhtml file <p:column styleClass="stylePerColumn ">...</p:column> (to each column needed).