Why does p:panelGrid not work with ui:repeat?

Question

If I use as below, I get no error, no output. Why does p:panelGrid not work with ui:repeat ?

Note : I don't want to use c:forEach because of the I already face a lot of JSF issue.

<p:panelGrid>
    <ui:repeat value="#{MyBean.dataList}" var="data">
        <p:row>
            <p:column>
                <h:outputText value="#{data.name}"/>
            </p:column>
            <p:column>
                <h:outputText value="#{data.description}"/>
            </p:column>
        </p:row>
    </ui:repeat>
</p:panelGrid>

MyBean.java

public List<Data> getDataList(){
    List<Data> result = new ArrayList<Data>();
    result.add(new Data("Name 1", "Description 1"));
    result.add(new Data("Name 2", "Description 2"));
    result.add(new Data("Name 3", "Description 3"));
    result.add(new Data("Name 4", "Description 4"));
    return result;
}   

Expected output with primefaces

Answer 1

ui:repeat will not work because it does not actually add components to the component tree.

ui:repeat only works during the render phase, and rerenders its child components multiple times with different state.

Some components, such as panelgrid , but also datatable , expect to have certain children in the component tree in order to work correctly. Since ui:repeat does not add these, this approach does not work.

I'm sorry, but the normal solution for this is to use c:foreach , which does add children to the tree.

See https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat

Answer 2

Try it by defining columns in p:panelGrid as you have static number columns then you should have to define <p:panelGrid columns=""> .It will work.
But I suggest you to use primefaces datatable for this

<p:dataTable id="availableCars" var="car" value="#{tableBean.carsSmall}">  
    <p:column style="width:20px">  
        <h:outputText id="dragIcon"  
            styleClass="ui-icon ui-icon-arrow-4" />  
        <p:draggable for="dragIcon" revert="true" />  
    </p:column>  

    <p:column headerText="Model">  
        <h:outputText value="#{car.model}" />  
    </p:column>  

    <p:column headerText="Year">  
        <h:outputText value="#{car.year}" />  
    </p:column>  

    <p:column headerText="Manufacturer">  
        <h:outputText value="#{car.manufacturer}" />  
    </p:column>  

    <p:column headerText="Color">  
        <h:outputText value="#{car.color}" />  
    </p:column>  
</p:dataTable>  

Here is the link from where you can find this code and primnefaces showcase.I think it will fulfill your requirment