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
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 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.
I don't want to use the row & column tags
A | B | C | D | E
<p:panelGrid columns = "5">
<h:outputText value="A"/>
<h:outputText value="B"/>
<h:outputText value="C"/>
<h:outputText value="D"/>
<h:outputText value="E"/>
</p:panelGrid>
If I wanna put B & C into a same column like this:
A | BC | D | E
the only way is using row and column tags?
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="A"/>
</p:column>
<p:column>
<h:outputText value="B"/>
<h:outputText value="C"/>
</p:column>
<p:column>
<h:outputText value="D"/>
</p:column>
<p:column>
<h:outputText value="E"/>
</p:column>
</p:row>
</p:panelGrid>
Is there any tag can grouping the B&C?
because I want the p:panelGrid responsive
but p:row & p:column not support
Thanks
Use h:panelGroup like
<p:panelGrid columns="4">
<h:outputText value="A" />
<h:panelGroup>
<h:outputText value="B" />
<h:outputText value="C" />
<h:panelGroup>
<h:outputText value="D" />
<h:outputText value="E" />
</p:panelGrid>
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.
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 ;)