panelGrid with commandButton

Question

I have a xhtml file.when I put a command Button with id=a ,my form is cluttered.what is soloution if I want place outPutLabe,autoComplete and commandButton in oneRow?I want three component in first row and then each two component place in seprated row.

    <h:form id="frm">
        <p:messages globalOnly="false" styleClass="error" autoUpdate="true" id="msgDiseaseHistory"/>
        <p:outputPanel id="PanleId">
            <h:panelGrid columns="3">
                <h:panelGroup>
                    <fieldset>
                        <legend>History:</legend>
                        <h:panelGrid id="Grid" columnClasses="label,component,required"
                                     columns="2">
                            <p:outputLabel for="EMRName" value="Name:"/>
                            <p:autoComplete id="EMRName"
                                            value="#{record.dermatology}"
                                            completeMethod="#{record.complete}"
                                    />
                            <p:commandButton id="a" value="+"
                                             action="#{record.add}"
                                             onclick="PF('addDlg').show();"/>


                            <p:outputLabel for="date" value="StartDate:"/>
                            <p:calendar id="date"
                                        value="#{record.date}"
                                        pattern="yyyy-MMM-dd"
                                        converter="dateConverter"/>

                            <p:outputLabel for="duration" value="Duration:"/>
                            <p:inputText id="duration"
                                         value="#{record.duration}"/>


                            <p:outputLabel for="description" value="Description:"/>
                            <p:inputTextarea id="description"
                                             value="#{record.description}"/>
                        </h:panelGrid>


                    </fieldset>
                </h:panelGroup>
                <h:panelGroup>
                    <fieldset>
                        <legend>Disease:</legend>
                        <h:panelGrid id="diseaseGrid" columnClasses="label,component,required"
                                     columns="2">

                            <p:outputLabel for="diseaseName" value="Name:"/>
                            <p:inputText id="diseaseName"
                                         value="#{record.disease}"/>

                            <p:outputLabel for="historyDate" value="StartDate:"/>
                            <p:calendar id="historyDate"
                                        pattern="yyyy-MMM-dd"
                                        converter="dateConverter"
                                        value="#{record.diseaseDate}"/>

                            <p:outputLabel for="EMRBeanDiseaseHistoryDuration" value="Duration:"/>
                            <p:inputText id="history"
                                         value="#{record.diseaseDuration}"/>

                            <p:outputLabel for="Efrg" value="Description:"/>
                            <p:inputTextarea id="Efrg"
                                             value="#{record.diseaseDescription}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>

            </h:panelGrid>
            <h:panelGrid columns="2">
                <h:panelGroup>
                    <fieldset>
                        <legend>Family:</legend>
                        <h:panelGrid id="FamilyHistoryGrid" columnClasses="label,component,required"
                                     columns="2">
                            <p:outputLabel for="historyName" value="Description:"/>
                            <p:inputTextarea id="historyName"
                                             value="#{record.tree}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>
                <h:panelGroup>
                    <fieldset>
                        <legend>Family:</legend>
                        <h:panelGrid id="familyGrid" columnClasses="label,component,required"
                                     columns="2">

                            <p:outputLabel for="family" value="Description:"/>
                            <p:inputTextarea id="family"
                                             value="#{record.family}"/>
                        </h:panelGrid>
                    </fieldset>
                </h:panelGroup>

            </h:panelGrid>


            <h:panelGrid id="buttonsGrid" columnClasses="label,component,required" columns="2">
                <h:panelGroup>
                    <p:commandButton value="Save" action="#{record.save}"
                                     update=":create"
                                     oncomplete="if(!args.validationFailed  &amp;&amp; args.saved )PF('HistoryDlg').hide();"
                                     ajax="true"

                            />

                </h:panelGroup>
                <h:outputText/>
            </h:panelGrid>

        </p:outputPanel>
    </h:form>

honestly... clean up your example and start again. See my answer — Kukeltje, Jan 30 '15 at 15:59

score 0 · Answer 1 · answered Jan 30 '15 at 16:01

0

You have defined three columns in the first panelGrid, but just to direct children (panelGroup). Just learn how the panelGrid works. If you have defined two columns (like in the second panelgrid, it takes each pair of childern and puts it in col1 and col2. If you (yourself) mess this up by adding one commandButton, everything moves... So either add e.g. an additional empty right after or before the commandButton, or move the commandbutton to somewhere else.

answered Jan 30 '15 at 16:01

Kukeltje

12,223
4
24
47

thanks,but i want put commandButton on same row.is it possible in first row i have three component and in other row have two component? – Fereshteh Jan 30 '15 at 16:14
Same row as **what**? Try to [minimize your code](http://stackoverflow.com/help/mcve) so it only shows the elements your problem is about. Maybe change to 3 columns and add a dummy '' to the other ones... Or if that is not what you want, try the [PrimeFaces panelGrid](http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml)... Still, learn how the panelGrid works might help understand it... It's very easy, just try some things – Kukeltje Jan 30 '15 at 16:25

panelGrid with commandButton

1 Answers1