I am new to PrimeFaces and JSF.
i am trying to create to display multiple columns but i always get a single column from the data in the database. I won't a situation where the drop down (Combo Style) will show multiple columns but one column will set as the value column.
The xhtml portion is shown below. the {investmentProductsController.accountInfo} is a list from my bean. thank you.
<p:outputLabel value="#{products.CreateInvestmentProductsLabel_totalCostGL}" for="totalCostGL" />
<p:selectOneMenu id="totalCostGL" value="#{investmentProductsController.selected.totalCostGL}" editable="true" required="true" requiredMessage="#{products.CreateInvestmentProductsRequiredMessage_totalCostGL}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{investmentProductsController.accountInfo}" var="acc">
<p:column>
<h:outputText value="#{acc.accountID}" />
</p:column>
<p:column >
<h:outputText value="#{acc.accountNumber}" />
</p:column>
<p:column >
<h:outputText value="#{acc.accountName}" />
</p:column>
</f:selectItems>
</p:selectOneMenu>
The <p:column> tags needs to be outside the <f:selectItems> tag, so move the </f:selectItems> to above the columns.
Related
Using PF 6.1, I have a Primefaces data table where I need to make certain cells editable. Most things are working fine, but when the page is refreshed, a duplicate empty element is inserted for each cell, and those elements disappear if I edit a row (even if I cancel editing). If I have normally 5 columns, I see 5 with class ui-editable-column and correct content, but when I refresh the page, I see additional 5 with class ui-panelgrid-cell that contain the data, and the original 5 with class ui-editable-column which are empty and make the table misaligned.
<p:panel>
<h:form>
<p:dataTable id="myTable" editable="true"
var="var"
value="#{ManagementBean.values}"
paginator="true"
paginatorPosition="top" rows="25"
paginatorTemplate="..."
tableStyle="table-layout: auto">
<p:ajax event="rowEdit" listener="#{ManagementBean.onRowEdit}" update="myTable"/>
<p:ajax event="rowEditCancel" listener="#{ManagementBean.onRowCancel}" update="myTable"/>
<!-- cells that dont need to be edited, have duplicate input and output fields-->
<p:column headerText="..." sortBy="...">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{var.name}"/></f:facet>
<f:facet name="input"><h:outputText value="#{var.name}"/></f:facet>
</p:cellEditor>
</p:column>
<!-- Example of cell that gets edited -->
<p:column headerText="...">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="..."/>
</f:facet>
<f:facet name="input">
<p:selectCheckboxMenu label="..." value="...">
<f:selectItems value="..." var="..."
itemLabel="..." itemValue="..."/>
</p:selectCheckboxMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>
</p:panel>
</p:panelGrid>
Not sure if this is relevant to the issue OP is facing, but I also encountered duplicated cells and I fixed it by changing:
<p:panelGrid></p:panelGrid>
to
<h:panelGrid></h:panelGrid>
this solves the duplication issue on my end.
Sample of my view page looks like the following:
<h:panelGrid>
<p:column>
<p:row>
<!-- contents... -->
</p:row>
</p:column>
</h:panelGrid>
Might be helpful to future readers.
I want to create a 2D Datatable Matrix with Primefaces.
I need to have fix columns and rows.
So far I'm here:
But that's not what I exactly want.
I want these kind:
My code looks like this one:
<p:dataTable value="#{testBean.zeilen}" var="zeile" style="width:75%;" editable="true" editMode="cell">
<p:column headerText="Exposition / Score"
styleClass="ui-widget-header" style="text-align:center;">
<h:outputText value="#{zeile}" />
</p:column>
<c:forEach items="#{testBean.werte}" var="w" >
<p:column headerText="#{w}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{w.entscheidung}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{w.entscheidung}" />
</f:facet>
</p:cellEditor>
</p:column>
</c:forEach>
</p:dataTable>
As you can see I got the data from my Bean, but in a wrong way.
Each row with 16 elements but I want 4 in each row like in the second picture.
My page: ---
Something is causing panelGrid to create an empty cell in several rows.
I'd like to have a visible two column table, first column a label, second column an inputText element or a selectMenu with a tooltip.
My workaround was this, create a 3 column table, and when panelGrid decides not to create an empty cell, add a <br></br> to prompt it to do so.
<h:panelGrid columns="3" style="text-align:left">
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<h:outputLabel for="longitudeIdAct" value="Longitude: " />
<p:inputText id="longitudeIdAct" value="#{provisioningBean.longitude}" title="Longitude" />
<p:watermark for="longitudeIdAct" value="Longitude" />
<h:outputLabel id="equipmentDropMenuActLabel" for="equipmentDropMenuAct" value="#{provisioningBean.accessDeviceLabel}" />
<p:selectOneMenu id="equipmentDropMenuAct" value="#{provisioningBean.equipment}" title="Not needed for CSI or SIP"
disabled="#{provisioningBean.equipDisabled}" style="width: 100% !important">
<f:selectItem itemLabel=" Equipment" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{provisioningBean.equipments}" />
</p:selectOneMenu>
<p:tooltip for="equipmentDropMenuAct" />
<h:outputLabel for="rangeActId" value="Range: " />
<p:spinner id="rangeActId" value="#{provisioningBean.rangeAct}" min="1" title="Amount of telephone numbers to provide" size="3"
disabled="#{provisioningBean.rangeDisabled}" />
<br></br>
</h:panelGrid>
Is this a bug?
What am I missing here?
EDIT:
Oh neat! I managed to create a minimal example and it still has the same issue :D https://gist.github.com/WurmD/f3cb45669e6871acc77462f34891862f
screenshot - you need 10 rep to post images
So this is a 3 column h:panelGrid, but the third cell is being taken up by something
EDIT2: Same behavior with p:panelGrid
Thank you Kukeltje for this answer:
h:panelGrid columns="3" signify "start new row after each third element"
Thus, either put the watermarks (and other invisible elements) outside h:panelGrid, or use h:panelGroup to groups things that should only occupy one cell in the table:
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<p:panelGrid columns="2" style="text-align:left">
<h:outputLabel for="orderIdAct" value="Order Number: *" />
<p:inputText id="orderIdAct" value="#{provisioningBean.orderNumberAct}" label="orderId" title="Order Number" />
<h:outputLabel for="customerNameIdAct" value="Customer: *" />
<h:panelGroup>
<!-- h:panelGroup to group things that should only occupy 1 cell in the table -->
<p:inputText id="customerNameIdAct" value="#{provisioningBean.customerName}" title="Customer Name" />
<p:watermark for="customerNameIdAct" value="Customer Name" id="watermarkcustomerNameIdAct" />
</h:panelGroup>
</p:panelGrid>
<p:panel id="executePanelAct">
<p:commandButton value="Execute Activation" id="actvateButton" update=":form:growl" styleClass="executeButton" />
</p:panel>
<!-- Items that don't need to be in panelGrid -->
<p:watermark for="orderIdAct" value="Order Number" id="watermarkorderIdAct" />
I would like to achieve the following in a JSF1.1 environment:
Gender: RadioButtonForFemale FEMALE RadioButtonForMale MALE
<h:panelGroup>
<h:outputLabel for = "searchSex" value = "#{bundle.Sex_Label}" style ="width:15%;">
</h:outputLabel>
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="verticle-align:top;font-size:95%;color:red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M"/>
</h:selectOneRadio>
</h:panelGroup>
Basically, all the radio button should be in the same row as the lable (Gender in our case).
Attached is my current code. the radio button appear in the next row. My PanelGrid has 1 column.
thanks,
Indeed, the <h:selectOneRadio> generates a <table> which is by default a HTML block element (i.e. always starts at a new line).
You'd need to set the CSS display property to inline-table.
<h:panelGroup>
<h:outputLabel for="searchSex" value="#{bundle.Sex_Label}" style="width: 15%;" />
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="display: inline-table; verticle-align: top; font-size: 95%; color: red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
</h:panelGroup>
But this is pretty clumsy. If you're already using a <h:panelGrid>, I'd recommend to just set its columns to 2 so that you can have labels in left column and inputs in right column.
<h:panelGrid columns="2">
<h:outputLabel for="searchSex" value="#{bundle.label_sex}" />
<h:selectOneRadio id="searchSex" value="#{yy.searchSex}">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
<h:outputLabel for="somethingElse" value="Something else" />
<h:inputText id="somethingElse" value="#{yy.somethingElse}" />
...
</h:panelGrid>
I have a data table in an xhtml with "ui:insert" space...
In another xhtml i use ui:define to add some columns... the problem is that i have dynamic columns to insert..
i've already tryed with a4j:repeat, ui:repeat, c:foreach and rich:columns...
<rich:columns value="#{entity.dadosAdicionais}" var="col" >
<h:outputText value="#{col.valor}" escape="false" />
<h:outputText value="#{col.nome}" />
</rich:columns>
someone knows whats the problem with ui and rich components?
may be you can try like this.
<rich:columns value="#{entity.dadosAdicionais}" var="col" index="index">
<f:facet name="header">
<h:outputText value="#{col.valor}" />
</f:facet>
<h:outputText value="#{model[index].model}" />
</rich:columns>
value= the modelValue for column.