I want to have fixed column widths using <p:panelGrid>. Therefore, I added
<p:panelGrid style="width:100%; table-layout: fixed">
and
<p:column style="width: 200px;">
however the width attribute does not apply. Any ideas?
You can use columnClasses attribute to set the style for each column.
<p:panelGrid columnClasses="column1,column2,column3,column4" columns="4" style="width:100%">
<p:column></p:column>
<p:column></p:column>
<p:column></p:column>
<p:column></p:column>
</p:panelGrid>
Related
With RichFaces you can create a data table like this:
<rich:dataTable id="myTable" value="#{myBean.values}" var="value">
<f:facet name="header">
<rich:columnGroup>
<rich:column />
<rich:column>Value 1</rich:column>
<rich:column>Value 2</rich:column>
<rich:column>Value 3</rich:column>
<rich:column>Value 4</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column />
<rich:column>#{value.val1}</rich:column>
<rich:column>#{value.val2}</rich:column>
<rich:column>#{value.val3}</rich:column>
<rich:column>#{value.val4}</rich:column>
<f:facet name="footer">
<rich:columnGroup>
<rich:column>TOTALS</rich:column>
<rich:column>#{myBean.totalVal1}</rich:column>
<rich:column>#{myBean.totalVal2}</rich:column>
<rich:column>#{myBean.totalVal3}</rich:column>
<rich:column>#{myBean.totalVal4}</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
This generates a basic HTML <table> with five columns, a header, and a footer.
However, if you do this instead (the <rich:dataTable> is exactly the same):
<div id="myTableHeader"></div>
<div id="myTableBody">
<rich:dataTable id="myTable" value="#{myBean.values}" var="value">
<f:facet name="header">
<rich:columnGroup>
<rich:column />
<rich:column>Value 1</rich:column>
<rich:column>Value 2</rich:column>
<rich:column>Value 3</rich:column>
<rich:column>Value 4</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column />
<rich:column>#{value.val1}</rich:column>
<rich:column>#{value.val2}</rich:column>
<rich:column>#{value.val3}</rich:column>
<rich:column>#{value.val4}</rich:column>
<f:facet name="footer">
<rich:columnGroup>
<rich:column>TOTALS</rich:column>
<rich:column>#{myBean.totalVal1}</rich:column>
<rich:column>#{myBean.totalVal2}</rich:column>
<rich:column>#{myBean.totalVal3}</rich:column>
<rich:column>#{myBean.totalVal4}</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
</div>
<div id="myTableFooter"></div>
RichFaces will place the <thead> inside the "myTableHeader" <div> and the <tfoot> inside the "myTableFooter" <div>, with the <tbody> remaining inside the <table> in the "myTableBody" <div>. RichFaces sets the width of every cell so that the columns still line up. Note that the ID's of these elements are important - they must start with the ID of the table element and end with these specific suffixes. The <table> actually contains a display:none copy of the header as well, and an empty footer.
I only know this works because I found it in some of our code, but I haven't been able to find any documentation on this feature. Is this feature documented anywhere? I don't really know what the rules are for it.
I have a dataTable on my JSF page:
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}" var="listaActDoc"
rowKey="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad}" selectionMode="single"
selection="#{cargaHorariaController.listaActivSelected}">
<p:column headerText="Actividad" style="width: 35%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad} - #{cargaHorariaController.descActiv(listaActDoc.pzptcabperjactPK.pzptcabperjactActividad)}"/>
</p:column>
<p:column headerText="Horas" style="width: 15%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactHoras}" />
</p:column>
<p:column headerText="" style="width: 20%">
<p:commandLink id="cmdSubacti" process="dataCabecera"
style="margin:0px" title="subactividad" value="Ver Subactividad"
action="#{cargaHorariaController.consultarSubactividadesDoc()}" update=":formPrincipal:formPrincipal1:pnlDet">
<f:setPropertyActionListener value="#{listaActDoc}" target="#{cargaHorariaController.activSelected}"/>
</p:commandLink>
</p:column>
<p:column headerText="" style="width: 30%">
<p:commandButton value="Actualizar" type="button" id="actiActu" action="#{cargaHorariaController.actualizar()}" onclick="PF('wdlgActualizar').show()" />
<p:spacer width="15px" height="0px"> </p:spacer>
<p:commandButton value="Eliminar" id="actiEli" ajax="false">
<p:confirm header="Eliminar actividad" message="Está seguro que desea eliminar esta actividad?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="font-size: 11px; text-height: font-size; text-align: left; font-weight: bold">
<div align="center">
<p:commandButton value="Sí" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancelar" type="button" styleClass="ui-confirmdialog-no CyanButton" icon="ui-icon-close" />
</div>
</p:confirmDialog>
</p:column>
<p:summaryRow>
<p:column colspan="1" style="text-align: right">
<p:outputLabel value="Total:" />
</p:column>
<p:column colspan="2" style="text-align: left">
<p:outputLabel value="#{cargaHorariaController.horasAct}" />
</p:column>
</p:summaryRow>
</p:dataTable>
I want the sum of the column "Horas" at the bottom of the table, but the summaryRow doesn't appear:
I have also the same problem with icons in my buttons (jQueryUI icons and Font Awesome icons).
How can I fix it?
Edited: I used h:outputText and I changed the colspan properties so now they add up to 4, but the same result: no p:summaryRow. I called horasAct because that variable has the result of the sum.
First for display information it's better to use a h:outputText component. Because a p:outputLabel component need to bind a label with a input field.
It gives some advantages for example:
If you mark a input field like required neer label for this field will display '*' symbol
Value from label will use in the Faces Messages
Second about your p:summaryRow. In the p:dataTable you have four columns but in columns in the p:summaryRow colSpan properties in total don't give 4 (only 3).
Also you said that want to sum values from the "Horas" column. But call
#{cargaHorariaController.horasAct} instead of #{listaActDoc.pzptcabperjactHoras}
Update
You need to add a sortBy property then a summaryRow will display. But this component calculate a sum of a column value for same rows. You can see more examples here just to try sort a table by different columns.
I think you should use a columnGroup component and add a footer for your table. This component add only one row to the bottom of your table and you can output there sum for horas column.
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 have a panel grid having 50 columns atleast but during display all the columns in the UI gets congested. I tried the properties which i could but to no avail.
Below is my code. any help is appreciated.
<p:panel>
<h:outputLabel value="Search Results" style="font-weight: bold;"></h:outputLabel>
<p:dataTable scrollWidth="100%" id="SearchResult" var="SearchResult"
value="beanId" style="width:100%;"
selection="beanId"
rowKey="beanId" scrollable="true"
rowSelectMode="multiple" scrollHeight="100%">
<p:column selectionMode="multiple" style="width:5%;" />
<p:column>
<f:facet name="header">
<h:outputText value="Year" />
</f:facet>
<h:outputText value="MbeanValue" />
</p:column>
|
|
|
|
similarly upto 50 columns
</p:panel>
A p:panel generates a <div/> so the overflow-y CSS style attribute will work :
<p:panel style="float:left;overflow-y: auto;height: 100px;">
The height attrbute specifies the point at which the div should break into a scrollbar
I'm a new developer in jsf1.2 & richfaces 3.3.3, i have a problem with my jsf page, when viewing a dynamic dataTable, i can't build the head with a group column, knowing that i use columns in ColumnGroup, column Span and Row have no effect even if i give values or not!
the code for the head part of the table:
<rich:dataTable cellpadding="0" cellspacing="0" width="700" border="0">
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}">
<rich:column breakBefore="#column.breakBefore}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}">
<h:outputText value="#{column.libelle}" rendered="#{column.champ.type=='text'}" />
</rich:column>
</rich:columns>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
I solved the problem :), it was necessary that i remove the "column" without 's', because the "columns" generate "column")
the code :
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}" breakBefore="#{column.breakBefore}">
<h:outputText value="#{column.champ.valeur}" rendered="#{column.champ.type=='text'}" />
</rich:columns>
</rich:columnGroup>
</f:facet>
thanks, its my fist post, i'm glad to be here ;)