Adding style to specific p:panelGrid 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 (https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml).

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?

just wondering if you can abuse the *primefaces pass through attribute* like this ` — Daniel, Jul 01 '13 at 13:58
We are "still" using JSF 2.1 (JEE 6), so we can't make use of this idea, although I will keep an eye on that. And for the row, I don't even have a unique ID. And even if I had one, I wouldn't know it, so I couldn't attach a style to it ... — Dominik Sandjaja, Jul 01 '13 at 14:04
i edited my answer if your customers won't use IE you can use it i think — NikolaB, Jul 01 '13 at 14:28
Is there anything particular you gain from using p:panelGrid? You can always go with explicit xhtml tags and assign classes with no restrictions. — mrembisz, Jul 01 '13 at 16:10

score 1 · Answer 1 · answered Mar 06 '19 at 11:33

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.

score 0 · Answer 2 · edited May 23 '17 at 12:22

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?

That would allow me to do it for one row, thanks. But if I have several rows or that same logic within several different `p:panelGrid`s, I would have dozens of CSS rules ... :-( — Dominik Sandjaja, Jul 01 '13 at 14:24

score -1 · Answer 3 · answered Jul 01 '13 at 16:52

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).

Adding style to specific p:panelGrid row

3 Answers3