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
Related
I'm creating a datatable with some some dynamically generated columns. In each of the cells of those columns, there's a button to refresh the data of that specific cell.
What I want is that the cell is blocked when the button on that cell is pressed.
Sample code:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="?????" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:columns>
</p:dataTable>
I don't know what should go in the block parameter to only block a cell. I also tried to just block="column", but even that wasn't blocking the column as I expected, instead it was just displaying the loading gif near the button but not blocking anything.
I have seen this question How update just specific cell in primefaces dataTable where the answers say it's not possible to specify a single cell, but it's from 2012, and the answers mention that it might get fixed on a later version.
After playing a bit, I found a solution.
You can define a <p:outputpanel id="cell"></p:outputpanel> surrounding the content of the cell, and then block it with block="cell" in the blockUI component.
The result would be something like:
<p:dataTable id="table" var="tableVar" value="#{tableValues}">
<p:columns id="column" var="columnVar" value="#{columnValues}">
<f:facet name="header">
<h:outputText value ="#{columnVar}"/>
</f:facet>
<p:outputpanel id="cell">
<h:outputText value="Some Text"/>
<p:commandButton value="Button Text"
id="button"
update="table"
actionListener="#{some.method()}"/>
<p:blockUI block="cell" trigger="button">
<p:graphicImage name="loading.gif"/>
</p:blockUI>
</p:outputpanel>
</p:columns>
</p:dataTable>
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 need to display the dynamic list a value as header text in data table but the value is getting repeated for each row. I need the header to be displayed only once at top and input text also only once should come in row-wise where each row has row edit and save option.This is my code.
<p:dataTable id="examMarksVie"
var="internal"
editable="true"
rowIndexVar="rowindex"
rowKey="#{internal.internalMarkId}"
style="width:90%;margin-left:70px;margin-top:5%"
value {exam.internalMarkList}">
<p:ajax event="rowEdit" listener="#{exam.doSaveInternalMark}" update="examMarksVie"/>
<p:column headerText="#{message['label.studentManagement.transferCertificate.studentName']}">
<h:outputText value="#{internal.studentDetails.studentApplicationID.firstName} #{internal.studentDetails.studentApplicationID.middleName} #{internal.studentDetails.studentApplicationID.lastName}" />
</p:column>
<p:column
headerText="#{message['label.exam.internal.weightage']}"
style="width:265px">
<p:dataTable var="al" value="#{internal.interALlocMarkList}">
<p:columns value="#{internal.interALlocMarkList}" var="id"
columnIndexVar="index"
headerText="#{internal.interALlocMarkList[index].internalAllocId.titleName} out of #{internal.interALlocMarkList[index].internalAllocId.titleName}">
<p:inputText value="#{al.allocMark}" />
</p:columns>
</p:dataTable>
</p:column>
I have a form with a primefaces datatable which i have set the columns width in css for it :
.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 10px}
Everything is okay but when i add the scrollable="true" attribute in order to have a scrollable datatable, the result is worst :
This is the declaration of the datatable :
<p:dataTable id="dtable" var="todos" value="#{todo.todoList}" scrollable="true"
resizableColumns="false" scrollHeight="300" lazy="true"
styleClass="idcol,prioritycol,titlecol,descriptioncol,actionscol">
What is the problem?
Thank you!
You can set the column width this way
<p:column headerText="Type" width="70%">
or you can specify style class this way
<p:column headerText="Type" styleClass="idcol" >
You can add scrollWidth some thing like this
<p:dataTable var="data" rowKey="#{data.key}" style="width:70%"
sortOrder="ascending"
selection=""
value=""
selectionMode="single"
scrollable="true"
scrollWidth="71%"
scrollHeight="3%"
>
<p:ajax event="rowSelect" listener=""
update="" />
<p:column headerText="Type" styleClass="" sortBy="" width="70%">
<h:outputText id="dataTYpe" value="" />
</p:column>
<p:column headerText="Category" sortBy="" width="30%">
<h:outputText value="" />
</p:column>
</p:dataTable>
I found the solution,
You have to edit you css and you JSF code at the same time and looking what you have as result,
For my problem i edited my css and the jsf code step by step, here is the code that worked for me :
CSS :
.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 20%}
The Form :
Column 1 : width="25"
Column 2 : width="55"
Column 3 : width="369"
Column 4 : width="469"
Column 5 : width="170"
I need to add a row to my datatable on click of a button - "Add Employee".
The datatable shows the records corresponding to a fixed list of Employees in the bean.
What I am doing is, on click of the "Add Employee" button , I am adding an empty record of Employee to the empList.
Is there any better way to do this?
Thanks.
Either you open a dialog or a popup when clicking the add button. Then fill in the required fields (attached to a employee object. And when saving/submit you add that object to your list of employee objects. And rerender the datatable.
Or you can initially add an empty emploee object to your list. Showing it in the datatable with inputfields. On add, you add the new employee to the list and rerender the list.
list_Recs is list of records and shown in the data table.
<p:dataTable id="myTable" value="#{myBean.list_Recs}" selectionMode="single" var="myTableVar" selection="#{myBean.currentRec}">
<p:ajax event="rowSelect" listener="#{myBean.handleRowSelect}" update=":myForm:myPanel"/>
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 1" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field1}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 2" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field2}" />
</p:column>
<f:facet name="footer">
<p:commandButton value="New" action="#{myBean.prepareForInsert}" update=":myForm:myPanel"/>
</f:facet>
</p:dataTable>
<h:panelGrid id="myPanel" columns="2" >
<h:outputLabel value="Field 1"/>
<p:inputText id="fld1" value="#{myBean.newRec.field1}" />
<h:outputLabel value="Field 2"/>
<p:inputText id="fld2" value="#{myBean.newRec.field2}" />
<p:commandButton action="#{myBean.createAction}" value="Submit" update="myGrowl myTable" />
</h:panelGrid>
When New button is clicked, create an emty instance of newRec in prepareForInsert routine of myBean. So that myPanel is filled with blanks in the fields. On Submit, add the newRec to
list_Recs and the new record is diplayed in the data table because of the update on myTable.
Hope this helps.
A different option would be to show an empty employee in the footer facet of your datatable and add it to your list if the user clicks the add button. With this you can ensure that only correctly filled employee objects/entities are added to your list.