Question

I have ajax functionality to add names and show on the same page in a table manner with one image(on left of text) and one “X” image(on right to delete). It should be added like, from left to right and after completing one row, it should start from next row.

So I need to show an arraylist of string in p:datagrid or any other tag which can be used with same functionality.

I tried with combination of ui:repeat and p:panelgrid but I was unable to get datagrid funtionallty. I did not used p:dataTable because it would add new element on bottom side not as I need.

P.S.

<h:form>

        <h:selectOneMenu id="recepients" value="#{controller.selected}">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Info1" itemValue="Info1"></f:selectItem>
            <f:selectItem itemLabel="Info2" itemValue="Info2"></f:selectItem>
            <f:selectItem itemLabel="Info3" itemValue="Info3"></f:selectItem>
            <f:selectItem itemLabel="Info4" itemValue="Info4"></f:selectItem>
            <f:selectItem itemLabel="Info5" itemValue="Info5"></f:selectItem>


        </h:selectOneMenu>
        <p:commandButton value="Add" action="#{controller.submit}"
            update="nameslist" />

        <p:dataGrid id="nameslist" value="#{controller.tempNameList}"
            var="name" columns="3">
            <p:column>
                <p:outputLabel value="%" />
            </p:column>
            <p:column>
                <p:outputLabel value="#{name}" />
            </p:column>
            <p:column>
                <p:commandLink value="X" action="#{controller.delete(name)}"
                    update="nameslist">
                </p:commandLink>                


            </p:column>

        </p:dataGrid>
    </h:form>

The result should be like this…

% Abc X
% Xyz X
% dfd X

plz consider % as image and X as close symbol

Answer 1

The <p:dataGrid> doesn’t support <p:column>. This column layout is only applicable to <p:dataTable>.

Replace all those <p:column> by a single grouping component, e.g. <h:panelGroup> or maybe <p:panel>, exactly as shown on showcase site.

<p:dataGrid id="nameslist" value="#{controller.tempNameList}" var="name" columns="3">
    <h:panelGroup>
        <p:outputLabel value="%" />
        <p:outputLabel value="#{name}" />
        <p:commandLink value="X" action="#{controller.delete(name)}" update="nameslist" />
    </h:panelGroup>
</p:dataGrid>