Primefaces: The columns of DataTable are not correctly rendered inside PanelGrid

[mertsincan]

Reported By PRO User;

Dears,
we found an issue using the latest PF releases.
Datatables are not correctly rendered if placed inside a panelGrid.
...

test code;

<p:panelGrid>
    <p:row>
        <p:column style="vertical-align: text-top;">
            <h:outputText value="Not Working datatable:" />
        </p:column>
        <p:column style="vertical-align: text-top;">

            <p:dataTable var="car" value="#{dfCarsView.cars}" id="tabella">
                <p:column width="40%">
                    <f:facet name="header">
                        <h:outputText value="Id" />
                    </f:facet>
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column width="25%">
                    <f:facet name="header">
                        <h:outputText value="Color" />
                    </f:facet>
                    <h:outputText value="#{car.color}" />

                </p:column>
                <p:column width="25%">
                    <f:facet name="header">
                        <h:outputText value="Brand" />
                    </f:facet>
                    <h:outputText value="#{car.brand}" />
                </p:column>
            </p:dataTable>

        </p:column>
    </p:row>
</p:panelGrid>

[mauromol]

Hi,
I know well your policy about community/elite versions, but...
Community versions 6.0 and 6.1 suffer from severe bugs like #1891 and this one respectively.
So, non-elite users must stick with 5.3 (6.2 is not yet available) because of these problems, which hurt a so popular component like DataTable.
Wouldn't it be worth to release a 6.0.x or 6.1.x version for the community, as a special exception to the usual release convention? Thanks in advance.

[svrolanski]

You can easily fix this until the release of 6.2 by creating your own Renderer for the DataTable by copying the commit for this issue. Create a Rendere class that extends the primefaces DataTableRenderer and add this:

(there is a problem with the code tags here)
`
@Override
protected void encodeCell(FacesContext context, DataTable table, UIColumn column, String clientId, boolean selected) throws IOException {
if (!column.isRendered()) {
return;
}

    ResponseWriter writer = context.getResponseWriter();
    boolean selectionEnabled = column.getSelectionMode() != null;
    int priority = column.getPriority();
    String style = column.getStyle();
    String styleClass = selectionEnabled
                        ? DataTable.SELECTION_COLUMN_CLASS
                        : (column.getCellEditor() != null && column.getCellEditor().isRendered())
                          ? DataTable.EDITABLE_COLUMN_CLASS
                          : null;
    styleClass = (column.isSelectRow())
                 ? styleClass
                 : (styleClass == null)
                   ? DataTable.UNSELECTABLE_COLUMN_CLASS
                   : styleClass + " " + DataTable.UNSELECTABLE_COLUMN_CLASS;
    styleClass = (column.isVisible())
                 ? styleClass
                 : (styleClass == null)
                   ? DataTable.HIDDEN_COLUMN_CLASS
                   : styleClass + " " + DataTable.HIDDEN_COLUMN_CLASS;
    String userStyleClass = column.getStyleClass();
    styleClass = userStyleClass == null
                 ? styleClass
                 : (styleClass == null)
                   ? userStyleClass
                   : styleClass + " " + userStyleClass;

    if (priority > 0) {
        styleClass = (styleClass == null)
                     ? "ui-column-p-" + priority
                     : styleClass + " ui-column-p-" + priority;
    }

    int colspan = column.getColspan();
    int rowspan = column.getRowspan();

    writer.startElement("td", null);
    writer.writeAttribute("role", "gridcell", null);
    if (colspan != 1) {
        writer.writeAttribute("colspan", colspan, null);
    }
    if (rowspan != 1) {
        writer.writeAttribute("rowspan", rowspan, null);
    }
    if (style != null) {
        writer.writeAttribute("style", style, null);
    }
    if (styleClass != null) {
        writer.writeAttribute("class", styleClass, null);
    }

    if (selectionEnabled) {
        encodeColumnSelection(context, table, clientId, column, selected);
    }

            // This is the fix for the issue #2337
    if (column instanceof DynamicColumn) {
        column.encodeAll(context);
    } else {
        column.renderChildren(context);
    }

    writer.endElement("td");
}`

[rvaneperen]

I had this same problem with version 6.1. All I needed to do is add appendToBody="true" and move the overlayPanel outside of the container (in my case a datatable inside of a panelgrid. I moved it outside of the panelgrid and it worked just fine.

[David-Rohatschek]

The solution of @svrolanski worked fine for me. Here is his solution a bit more readable :)

1) Implement your own DataTableRenderer

import org.primefaces.component.datatable.DataTableRenderer;
import javax.faces.context.FacesContext;
import org.primefaces.component.datatable.DataTable;
import org.primefaces.component.api.UIColumn;
import javax.faces.context.ResponseWriter;
import java.io.IOException;
import org.primefaces.component.api.DynamicColumn;

public class WorkaroundDatatableRenderer extends DataTableRenderer{

    @Override
    protected void encodeCell(FacesContext context, DataTable table, UIColumn column, String clientId, boolean selected) throws IOException {
        if (!column.isRendered()) {
            return;
        }

        ResponseWriter writer = context.getResponseWriter();
        boolean selectionEnabled = column.getSelectionMode() != null;
        int priority = column.getPriority();
        String style = column.getStyle();
        String styleClass = selectionEnabled
                ? DataTable.SELECTION_COLUMN_CLASS
                : (column.getCellEditor() != null && column.getCellEditor().isRendered())
                ? DataTable.EDITABLE_COLUMN_CLASS
                : null;
        styleClass = (column.isSelectRow())
                ? styleClass
                : (styleClass == null)
                ? DataTable.UNSELECTABLE_COLUMN_CLASS
                : styleClass + " " + DataTable.UNSELECTABLE_COLUMN_CLASS;
        styleClass = (column.isVisible())
                ? styleClass
                : (styleClass == null)
                ? DataTable.HIDDEN_COLUMN_CLASS
                : styleClass + " " + DataTable.HIDDEN_COLUMN_CLASS;
        String userStyleClass = column.getStyleClass();
        styleClass = userStyleClass == null
                ? styleClass
                : (styleClass == null)
                ? userStyleClass
                : styleClass + " " + userStyleClass;

        if (priority > 0) {
            styleClass = (styleClass == null)
                    ? "ui-column-p-" + priority
                    : styleClass + " ui-column-p-" + priority;
        }

        int colspan = column.getColspan();
        int rowspan = column.getRowspan();

        writer.startElement("td", null);
        writer.writeAttribute("role", "gridcell", null);
        if (colspan != 1) {
            writer.writeAttribute("colspan", colspan, null);
        }
        if (rowspan != 1) {
            writer.writeAttribute("rowspan", rowspan, null);
        }
        if (style != null) {
            writer.writeAttribute("style", style, null);
        }
        if (styleClass != null) {
            writer.writeAttribute("class", styleClass, null);
        }

        if (selectionEnabled) {
            encodeColumnSelection(context, table, clientId, column, selected);
        }

        // This is the fix for the issue #2337
        if (column instanceof DynamicColumn) {
            column.encodeAll(context);
        } else {
            column.renderChildren(context);
        }

        writer.endElement("td");
    }
}

Declare renderer in faces-config.xml:

    <render-kit>
        <renderer>
            <component-family>org.primefaces.component</component-family>
            <renderer-type>org.primefaces.component.DataTableRenderer</renderer-type>
            <renderer-class>YOUR_CLASS_PATH</renderer-class>
        </renderer>
    </render-kit>