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"
Related
In a Datatable of Primefaces I want to insert an icon in a certain column conditionally.
This column has two values: 1 or 0, if it is 1 use the check icon and if it is 0 use the close icon.
I've already tried with "rendered", with "style", with styleClass, and it does not work for me. Either the read values are output, or nothing is rendered (the column is empty).
Is there any way to do this?
I pass a portion of code:
<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
<h:outputText value="#{vot.estado}" style="float:right #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}"/>
</p:column>
You have the icon info in the style attribute while it should be in the styleClass attribute and you need the generic ui-icon class too.. So change your code to the following to make it work
<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
<h:outputText value="#{vot.estado}" style="float:right" styleClass="ui-icon #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}"/>
</p:column>
You can use rendered attribute with the outputText itself, like below:
<p:column headerText="Vota" width="30" filterBy="#{vot.estado}">
<h:outputText rendered="#{vot.estado == 1}" value="#{vot.estado}" style="float:right" styleClass="ui-icon-check"/>
<h:outputText rendered="#{vot.estado != 1}" value="#{vot.estado}" style="float:right" styleClass="ui-icon-close"/>
</p:column>
<p:column headerText="Vota" width="30" filterBy="#{vot.estado}>
<h:outputText value="#{vot.estado}"/>
<i class="ui-icon #{vot.estado == 1 ? 'ui-icon-check' : 'ui-icon-close'}" style="display: inline-block"/>
</p:column>
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 am using Primefaces 5.1 in my page I use dataTable inside another dataTable.In add button press add new bean for salList and check salList not null to rendered header column.But sal column not rendered.
<p:dataTable id="mainTable" value="#{employee.employeeList}" var="emp" ..>
<p:columnGroup type="header">
<p:row >
<p:column headerText="Name"/>
</p:column headerText="value" **rendered="#{emp.salList ne null and not empty emp.salList}**/>
....
<p:column>
<f:facet name="header"><p:commandButton value="add button" action="#{employee.addButton}" update="mainTable"/>
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
<p:column>
<p:dataTable value="#{emp.salList}" var="sp">
<p:column></p:column>
..
</p:dataTable>
</p:column>
</p:dataTable>
My doubt is when I press add button to add new list salList bean and it add new bean and show component in inside dataTable.But in header column salary column is not rendered i.e header column not updated it will not rendered the specify header column.
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 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