I want a layout of <p:panelGrid> (or <h:panelGrid>) as shown in the following snap shot.
The following code,
<p:panelGrid style="width: 100%;">
<p:row>
<p:column rowspan="9">a</p:column>
<p:column rowspan="7">b</p:column>
<p:column>c</p:column>
</p:row>
<p:row><p:column>d</p:column></p:row>
<p:row><p:column>e</p:column></p:row>
<p:row><p:column>f</p:column></p:row>
<p:row><p:column>g</p:column></p:row>
<p:row><p:column>h</p:column></p:row>
<p:row><p:column>i</p:column></p:row>
<p:row><p:column>j</p:column></p:row>
<p:row><p:column>k</p:column></p:row>
</p:panelGrid>
shows the layout as shown in the following snap shot.
How can I achieve the layout as shown in first snap shot?
<p:panelGrid style="width: 100%;">
<p:row>
<p:column rowspan="7">a</p:column>
<p:column rowspan="5">b</p:column>
<p:column>e</p:column>
</p:row>
<p:row>
<p:column>f</p:column>
</p:row>
<p:row>
<p:column>g</p:column>
</p:row>
<p:row>
<p:column>h</p:column>
</p:row>
<p:row>
<p:column>i</p:column>
</p:row>
<p:row>
<p:column>c</p:column>
<p:column>j</p:column>
</p:row>
<p:row>
<p:column>d</p:column>
<p:column>k</p:column>
</p:row>
</p:panelGrid>
Explanation:
Each row will try to place itself under the previous row where there is space for it (where a column is not spanning over multiple rows).
So after the first row: the next rows will be placed in the following positions:
But since you want the 6th and 7th row to have 2 columns, you need to add a second column to them.
Hopefully this clears it up a little.
Related
I have this datatable:
<p:dataTable id="necesidades"
value="#{registrarAccionDosBean.accionDos.necesidadesConTema}"
rendered="#{not empty registrarAccionDosBean.accionDos.necesidadesConTema}"
var="necesidad"
rowKey="#{necesidad.idNecesidad}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:rowExpansion>
<h:panelGroup id="grupoTema">
<h:panelGroup id="edicion" rendered="#{necesidad.tema.idTema ne null}">
<p:row>
<p:column >
<h:outputLabel value="#{etiq.lbl_comunes_requerido} #{etiq.etiqueta_checkbox_transparenciasFocalizadas}" styleClass="textoAcciones"/>
</p:column>
<p:column >
<!-- Nested data table -->
<p:dataTable id="transparenciasInplace"
var="transparencias"
value="#{registrarAccionDosBean.transparenciasFocalizadas}"
selection="#{necesidad.tema.transparenciasFocalizadas}"
rowKey="#{transparencias.idTf}">
<f:facet name="header">
Objetives
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column>
<h:outputLabel value="#{transparencias.descripcion}" styleClass="textoAccionesSmall"/>
</p:column>
</p:dataTable>
</p:column>
</p:row>
</h:panelGroup>
</h:panelGroup>
</p:rowExpansion>
</p:dataTable>
I have n rows collapsed with information inside of each of them, this information was persisted in different times and days, so I need to save some information plus the n rows as a whole, the problem is that the rows are collapsed when is show on screen and I want to be in that way because a can have a lot rows on screen and if I show them expanded it will be hard to read, but when I send it through a command button the table inside my collapsed row are setting null, I need to expand each of them in order to properly send all the information.
So I want to send the information collapsed but in some way force to fetch the information inside of each of them
I am getting the information from the database right, because there I just fetch my query and get the information right, so my problem is on my jsf page I think
I would like to display a list of label/input using <p:dataGrid>. My code is so simple, but I can't get the expected result.
This is my code:
<p:dataGrid columns="2" value="#{scriptManagerForm.params}" var="conf">
<p:column>
<p:outputLabel value="#{conf.name}" />
</p:column>
<p:column>
<p:inputText value="#{conf.value}" required="true" />
</p:column>
</p:dataGrid>
And this is the result that I get now:
And this is what I need to get:
You need the property layout="grid" in the dataGrid
I am sure you need a panelGrid instead of a dataGrid.
Inside you can also work with <p:row> and <p:column> if you want.
http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml
I hope this helps!
I am using a datagrid to display row dynamically from panelgrid. It works fine except the layout is not good. It displays the following row side by side instead on new line. Anyone know how to display a new row on a new line ? I tried to use <br/> tag, but it's not working.
<p:dataGrid style="border:10px;" value="#{TestComponent.list}" var="x">
<p:panelGrid style="width:1250px;">
<p:row>
<p:column colspan="1">1.1</p:column>
<p:column colspan="2">
<h:outputText value="#{x.Description}" />
</p:column>
<p:column colspan="4">
<h:inputTextarea rows="10" cols="40"
value="#{x.Justification}" required="false" label="Justification" />
</p:column>
</p:row>
</p:panelGrid>
<br/>
</p:dataGrid>
If you want to create a new line, you must create a new <p:row> tag.
Example:
<p:panelGrid>
<p:row>
<p:column>Row 1/Column 1</p:column>
<p:column>Row 1/Column 2</p:column>
</p:row>
<p:row>
<p:column>Row 2/Column 1</p:column>
<p:column>Row 2/Column 2</p:column>
</p:row>
</p:panelGrid>
Manage to do it. It have to specify the number of columns in my datagrid.
It's a combination of things done wrong. The datagrid by itself puts childeren next to eachother in colums (default = 3 , see the docs http://www.primefaces.org/showcase/ui/data/dataGrid.xhtml). So 3 panelgrids next to eachother (so three rows next to eachother). Setting the columns to 1 will makr it work. Additionally, a colspan does nothing if there are not multiple rows like in the example #pellizon mentiones.
i have a problem with p:table alignment below is the picture(picture one) when first time load this p:table using p:commandbutton if i click on scenario Two tab and click back to scenario One tab i get right alignment of table see picture two.
picture one
picture two
this is the button when i click first time, table loads
<p:commandButton id="isFinancialYearSubmitId" value="submit" update="panelGridId scenarioTabViewId:budgetAnalysisDataTableId scenarioTabViewId:selectColumnId scenarioTabViewId:isApprovedBooleanId_checkBox " action="#{budgetAnalysisAction.isFinancialYearOpened}" oncomplete="handleComplete(xhr, status, args); isFinancialYearOpenedOnComplete('analysisTheBudgetForm');"/>
and this is table
<p:dataTable id="budgetAnalysisDataTableId"
rowIndexVar="index" editable="true"
resizableColumns="true"
value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}"
var="budgetScenarioHescoProposalList"
scrollWidth="800" scrollHeight="250" scrollable="true"
>
<p:ajax event="rowEdit" process=":analysisTheBudgetForm:scenarioTabViewId:scenarioOneId_tab :analysisTheBudgetForm:scenarioTabViewId:isApprovedBooleanId_checkBox :analysisTheBudgetForm:scenarioTabViewId:budgetAnalysisDataTableId" listener="#{budgetAnalysisAction.analysisTheBudgetRowEditOnAjax}" />
<p:column headerText="Edit" width="20">
<p:rowEditor />
</p:column>
<p:column headerText="Sub Head Of Accounts" width="150">
<h:outputText value="#{index}" />
<h:outputText value="#{budgetScenarioHescoProposalList.budgetSubHeadOfAccountsBean.subHeadOfAccountNameBean}" />
</p:column>
<p:column width="60">
// 11 other columns with same width(width="60") but different data.
</p:column>
this is an inspect element of picture one
this is an inspect element of picture two
I am working with Java EE and PrimeFaces. How can I change the column width of a panel grid in PrimeFaces?
Is there an example ?
You can qualify your columns inside the panelGrid using columnClasses. The following code sets different width and stick the cells content aligned to the top-side.
<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">
.forty-percent {
width: 40%;
}
.sixty-percent {
width: 60%;
}
.top-alignment {
vertical-align: top;
}
I had a similar problem and here is my solution:
<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
<f:facet name="header"> # header
<p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
<p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
Title
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:150px"> # define width of a column
Column 1 content
</p:column>
<p:column> # column 2 will fill the rest of the space
Column 2 content
</p:column>
</p:row>
<f:facet name="footer"> # similar as header
<p:row>
<p:column colspan="2">
Footer content
</p:column>
</p:row>
</f:facet>
</p:panelGrid>
So as you can see, the main difference is that you do not define columns attribute in p:panelGrid. In header and footer you have to use p:row and p:column, and in my case I also have to use colspan=2 since in body we have 2 columns.
Hope this helps ;)
Have you considered the style attribute ?
Example :
<p:panelGrid columns="2" style="width: 50px">
Otherwise, for columns :
<p:column style="width:50px">
Refer to this thread : how can I adjust width of <p:column> in <p:panelGrid>?