primefaces columns disappear on a panelgrid

Question

I dont know why but the columns I set on a panel grid get merged as if they were only one column,

Here is the code

<h:panelGrid id="formOcurrencia">
        <p:row>
            <p:column>
                <h:outputLabel value="Número de catalogo:" for="numcatInput" />
            </p:column>
            <p:column>
                <p:inputText id="numcatInput"
                    value="#{ocurrenciaDM.ocurrencia.catalogNumbOcurrencia}" />
            </p:column>

            <p:column>
                <h:outputLabel value="Número de record:" for="numrecInput" />
            </p:column>
            <p:column>
                <p:inputText id="numrecInput"
                    value="#{ocurrenciaDM.ocurrencia.recordNumbOcurrencia}" />
            </p:column>
        </p:row>
        <p:row>
            <p:column>
                <h:outputLabel value="Fecha inicial:" for="cal_ocurr1Input" />
            </p:column>
            <p:column>
                <p:calendar id="cal_ocurr1Input"
                    value="#{ocurrenciaDM.ocurrencia.fechaInicialOcurrencia}"
                    mindate="1/1/1960" pattern="dd/MM/yyyy" navigator="true"
                    display="inline">
                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+5" />
                </p:calendar>
            </p:column>
            <p:column>
                <h:outputLabel value="Fecha final:" for="cal_ocurr2Input" />
            </p:column>
            <p:column>
                <p:calendar id="cal_ocurr2Input"
                    value="#{ocurrenciaDM.ocurrencia.fechaFinalOcurrencia}"
                    mindate="1/1/1960" pattern="dd/MM/yyyy" navigator="true"
                    display="inline">
                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+5" />
                </p:calendar>
            </p:column>
        </p:row>
</h:panelGrid>

And here it is how shows on the page

<tbody>
<tr>
<td><label for="taxonomiaAdminForm:numcatInput">
Número de catalogo:</label><input aria-multiline="false" aria-readonly="false" aria-disabled="false" role="textbox" id="taxonomiaAdminForm:numcatInput" name="taxonomiaAdminForm:numcatInput" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text"><label for="taxonomiaAdminForm:numrecInput">
Número de record:</label><input aria-multiline="false" aria-readonly="false" aria-disabled="false" role="textbox" id="taxonomiaAdminForm:numrecInput" name="taxonomiaAdminForm:numrecInput" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text"></td>
</tr>
<tr>
<td><label for="taxonomiaAdminForm:cal_ocurr1Input">
Fecha inicial:</label><span id="taxonomiaAdminForm:cal_ocurr1Input"><input aria-multiline="false" aria-readonly="false" aria-disabled="false" role="textbox" id="taxonomiaAdminForm:cal_ocurr1Input_input" name="taxonomiaAdminForm:cal_ocurr1Input_input" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" type="text"></span><label for="taxonomiaAdminForm:cal_ocurr2Input">
Fecha final:</label><span id="taxonomiaAdminForm:cal_ocurr2Input"><input aria-multiline="false" aria-readonly="false" aria-disabled="false" role="textbox" id="taxonomiaAdminForm:cal_ocurr2Input_input" name="taxonomiaAdminForm:cal_ocurr2Input_input" class="ui-inputfield ui-widget ui-state-default ui-corner-all hasDatepicker" type="text"></span></td>
</tr>
<tr>
<td><label for="taxonomiaAdminForm:cont_indInput">
Conteo individual:</label><input aria-multiline="false" aria-readonly="false" aria-disabled="false" role="textbox" id="taxonomiaAdminForm:cont_indInput" name="taxonomiaAdminForm:cont_indInput" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text"></td>
</tr>

There is only one column on each row, I copy pasted the example on the page and it work, then I copy some of the rows to my panelgrid and the columns get lost again.

Answer 1

You're getting mixed up between the general jsf components and the primefaces components. In your example you are using <h:panelGrid>. If you change this to <p:panelGrid> it'll work

Answer 2

Try removing all those <p:row> and <p:column> and set the number of columns in the <h:panelGrid>. Note that the columns attribute will automatically build the HTML table in order to have a <table> with four <td> elements per <tr> 9in HTML terms).

<h:panelGrid id="formOcurrencia" columns="4">
    <h:outputLabel value="Número de catalogo:" for="numcatInput" />
    <p:inputText id="numcatInput"
        value="#{ocurrenciaDM.ocurrencia.catalogNumbOcurrencia}" />
    <!-- and all the other components... -->
</h:panelGrid>

Another advice: your <h:panelGrid> id shouldn't be formXxx instead use a more meaningful name like pnlXxx and let the form prefix for <h:form> tag.

Since it looks you want to use colspan / rowspan, you should seek for the solution proposed here: How to set colspan and rowspan in JSF panelGrid?. Due that you're using PrimeFaces, you should use <p:panelGrid> instead.

Answer 3

I really dont know what the problem was, I started deleting all the columns and rows until I had one row and 2 columns I still had the same problem I used a panel grid with columns that worked, and started just copying each row to that part and testing, I added at first one column at the time and tested, and they worked. I still dont see the problem with my initial code, it is practically the same.