I have this datatable that loadied from the datatabase, here is :
<p:dataTable id="cars" var="car" value="#{acceuilUserController.lc_maj}" tableStyle="width:auto">
<p:column headerText="Commande N° : " style="width:100px">
<h:outputText value="#{car.commande.id}" />
</p:column>
<p:column headerText="Date de mise à jour : " style="width:100px">
<h:outputText value="#{car.dateMaj}" />
</p:column>
<p:column headerText="Decision : " style="width:100px">
<h:outputText value="#{car.decison}" />
</p:column>
<p:column headerText="Etat : " style="width:100px">
<h:outputText value="#{car.etat}" />
</p:column>
</p:dataTable>
I have another attribut car.lu that accept two values :true or false, I want when it is false the line flashes and become colored with red
how I can achieve this?
You can achieve this using conditional coloring:
<p:dataTable id="cars" var="car" value="#{acceuilUserController.lc_maj}" tableStyle="width:auto" rowStyleClass=#{(car.lu == false) ? 'red' : null}>
<p:column headerText="Commande N° : " style="width:100px">
<h:outputText value="#{car.commande.id}" />
</p:column>
<p:column headerText="Date de mise à jour : " style="width:100px">
<h:outputText value="#{car.dateMaj}" />
</p:column>
<p:column headerText="Decision : " style="width:100px">
<h:outputText value="#{car.decison}" />
</p:column>
<p:column headerText="Etat : " style="width:100px">
<h:outputText value="#{car.etat}" />
</p:column>
</p:dataTable>
If car.lu returns false the style class red is applied to the row. So you have to have this in your CSS:
.red {
background-color: red;
}
Related
I've a p:dataTable, I want to change the default color just of a header, is it possible ?
<f:facet name="header">
List of Fone
</f:facet>
Here my entire code:
<p:dataTable var="fone" value="#{fonePersistBean.listInfofone}" paginator="true" rows="10"
id="table" rowStyleClass="odd-row, even-row">
<f:facet name="header">
Lista de fones
</f:facet>
<p:column headerText="Tipo" sortBy="#{fone.contact}">
<h:outputText value="#{fone.contact}" />
</p:column>
<p:column headerText="DDD" sortBy="#{fone.ddd}">
<h:outputText value="#{fone.nuDdd}" />
</p:column>
<p:column >
<h:commandLink action="#{foneBean.searchFone(fone)}" >
<i class="cus-find"></i>
</h:commandLink>
</p:column>
</p:dataTable>
Thanks in advance !
Try CSS using .ui-datatable-header if you wish to change all dataTables. For specific tables, you can use a styleClass attribute for the specific dataTable
I have a panelgrid with 5 rows and 7 columns within and have tried to use colspan to line up the different components within the columns. I'll stick my xhtml below:
<p:panelGrid>
<p:row>
<p:column>
<p:row>
<p:column>
<p:outputLabel value="Job Status:" />
</p:column>
<p:column colspan="4">
<p:selectOneMenu value="#{myBean.jobStatus}">
f:selectItems here
</p:selectOneMenu>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="cbRepetition"
value="#{myBean.isRepeatable}"
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:outputLabel value="Terminate repetition of this job?" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Positions:" />
</p:column>
<p:column>
<p:spinner id="position1"
value="#{myBean.selectedPosition1}" />
</p:column>
<p:column>
<p:spinner id="position2"
value="#{myBean.selectedPosition2}" />
</p:column>
<p:column>
<p:spinner id="position3"
value="#{myBean.selectedPosition3}" />
</p:column>
<p:column>
<p:spinner id="position4"
value="#{myBean.selectedPosition4}" />
</p:column>
<p:column>
<p:outputLabel value="Occurrences:" />
</p:column>
<p:column>
<p:spinner id="occurrences"
value="#{myBean.selectedOccurrences}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Date/Time:" />
</p:column>
<p:column colspan="4">
<p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
value="#{myBean.selectedDateTime}">
</p:calendar>
</p:column>
<p:column>
<p:outputLabel value="Job Location:" />
</p:column>
<p:column>
<p:selectOneMenu id="locationDd"
value="#{myBean.selectedLocationId}">
<f:selectItem itemLabel="Select" itemValue="0" />
<f:selectItem itemLabel="Australia" itemValue="1" />
<f:selectItem itemLabel="Springfield" itemValue="2" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Comments:" />
</p:column>
<p:column colspan="6">
<p:inputTextarea />
</p:column>
</p:row>
</p:column>
</p:row>
</p:panelGrid>
I've refactored the code a little bit, for example the jobStatus selectOneMenu is actually a custom component I've created, but I'm confident this isn't the issue as it's been used elsewhere in my project without any trouble.
This panelGrid is sat within a panel within a form.
I'm hoping it is obvious what I am trying to achieve, but what I'm actually getting is as below:
I've used CSS to make the spinners smaller as they should be just big enough to fit an integer 0-9, but this has had no effect, any suggestions why things aren't dislpaying on the correct rows or things I can do to make them display as I wish?
Cheers.
I've realized I just needed to remove the initial <p:row> and <p:column> and it works fine.
Problem in icons layout and positions in rtl.
Previous page icon should be swapped with next page icon as the direction in rtl is the opposite of ltr.
<p:dataTable id="dataTable" var="myRequest" widgetVar="requestsTable" value="#{searchRequestsBB.model}" rows="10" paginator="true"
paginatorPosition="bottom" rowsPerPageTemplate="10,50,100" selectionMode="single" selection="#{searchRequestsBB.selectedRequest}" rowKey="#{myRequest.id}" emptyMessage="#{langu['EMPTY_DATA_TABLE']}" lazy="true" resizableColumns="true">
<p:ajax event="rowSelect" update=":content:detailsBtn, :content:detailsDlg" />
<p:column sortBy="#{myRequest.id}" headerText="#{langu['REQUEST_NUMBER']}" >
<h:outputText value="#{myRequest.id}" />
</p:column>
<p:column sortBy="#{myRequest.requestDate}" headerText="#{langu['REQUEST_DATE']}" >
<h:outputText value="#{myRequest.requestDate}">
<f:convertDateTime pattern="#{tripconf['datePatternShow']}" timeZone="Africa/Cairo"/>
</h:outputText>
</p:column>
<p:column sortBy="#{myRequest.vehicleLicenseNumber}" headerText="#{langu['VEHICLE_LICENSE_NUMBER']}">
<h:outputText value="#{myRequest.vehicleLicenseNumber}" />
</p:column>
<p:column sortBy="#{myRequest.chassisNumber}" headerText="#{langu['CHASSIS_NUMBER']}">
<h:outputText value="#{myRequest.chassisNumber}" />
</p:column>
<p:column sortBy="#{myRequest.nationality.name}" headerText="#{langu['NATIONALITY']}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('requestsTable').filter()" effect="drop" >
<f:selectItem itemLabel="#{langu['ALL']}" itemValue="#{null}"/>
<f:selectItems value="#{searchRequestsBB.countries}" var="country" itemLabel="#{country.name}" itemValue="#{country.id}"/>
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{myRequest.nationality.name}" />
</p:column>
<p:column sortBy="#{myRequest.totalDues}" headerText="#{langu['TOTAL_DUES']}">
<h:outputText value="#{myRequest.totalDues}" />
</p:column>
<p:column sortBy="#{myRequest.requestStatus}" headerText="#{langu['status']}">
<p:progressBar value="#{myRequest.requestStatus*25}" labelTemplate="{value}%" displayOnly="true"/>
</p:column></p:dataTable>
Note that my application supports rtl languages and ltr also.
Any ideas of how to solve ??
I have this problem :
here is the code :
<p:panelGrid styleClass="newArticlePanelGrid" >
<!-- __________________________________________row1________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Designation : " />
</p:column>
<p:column colspan="3" >
<p:inputText id="new-article-designation" style="width: 449px;"
value="#{articlesMB.article.designation}" required="true"
requiredMessage="designation requise" />
</p:column>
</p:row>
<p:row>
<p:column />
<p:column colspan="3" >
<p:message id="for-new-article-designation"
for="new-article-designation" display="text" />
</p:column>
</p:row>
<!-- __________________________________________row2________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Type : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-typeggg" required="true"
requiredMessage="type requis" converter="#{typeConverter}"
style="width:100%" value="#{articlesMB.article.type}">
<!-- <f:selectItem itemLabel="Selectionner Type" itemValue="" />-->
<f:selectItems value="#{articlesMB.listTypes}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:outputLabel value="Unité : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-unite" required="true"
widgetVar="uniteselect" requiredMessage="unité requise"
converter="#{uniteConverter}" style="width:100%"
value="#{articlesMB.article.unite}">
<!-- <f:selectItem itemLabel="Selectionner Unite" itemValue="" /> -->
<f:selectItems value="#{articlesMB.listUnites}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column />
<p:column>
I don't know what I should do to reolve this problem : I tested width:100% but as you see it doesn't change
how can I resolve that ?
thank you in advance
The problem come from style="100%", it only change selectonemenu's width, you should set width for label inside selectonemenu(in this situation):
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
</style>
If you want set all selectonemenu:
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
.ui-selectonemenu{
width:100% !important;
}
</style>
for more general, you can include in css file.
See also: What is the JSF resource library for and how should it be used?
We are implementing primefaces tooltip on datatable.
But tooltip postining is away from the datable row.
<p:tooltip targetPosition="bottomLeft" Delay="0" showDelay="0">
<h:outputText value="#{label.lockTime}"
style="font-weight:bold" />
<h:outputText value=": #{cert.lockTime}" />
<p:spacer width="1" height="10" />
<h:outputText value="#{cert.label} " style="font-weight:bold" />
<h:outputText value=": #{cert.userDetails}" />
</p:tooltip>
You try this
<p:tooltip />
<p:dataTable var="var" ........>
<p:column headerText="Market" >
<h:outputText value=" #{var.market}" title=" #{var.market}"
style="display:block;">
</h:outputText>
</p:column>
<p:column headerText="Value" >
<h:outputText value=" #{var.value}" title=" #{var.value}"
style="display:block;">
</h:outputText>
</p:column>
</p:dataTable>
I hope It will work.