How can I align a graphicImage which will come as an element as a column in the middle .Now It is left aligned. I tried a lot but it will not work.
<p:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png"
style="float:center;height: 18px; width: 20px"
rendered="#{categorey.status == 1}" title="READY TO ZIP"/>
<p:column>
You can align the table cell content for the whole column:
<p:column style="text-align: center">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png" />
</p:column>
In order to separate the layout you can use the styleClass attribute referencing a class from a css resource as well.
Related
In an application based on JSF 2.1 and Primefaces 6.0, I am trying to add a tooltip to the header of a datatable.
In my current solution, the tooltip appears only when pointing the mouse precisely on the text title ("Projekttyp"). I need the tooltip to appear whenever the mouse pointer is in the column header. Unfortunately, it is not possible to assign an id to the facet header.
I understand that the global tooltip as described here Primefaces Showcase Tooltip can only be used in higher Versions of JSF (JSF 2.2).
Here is my code:
<p:column sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="typColumntitle"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
Add the f:facet tag like the above and it will work fine (I mean tooltip value will be displayed); if you hover your mouse anywhere inside the column header.
Even outside the text in the column header.
<p:column id= "keyColumnId">
<f:facet name="header">
<h:outputText value="YOUR COLUMN HEADER" />
<p:tooltip value="TOOLTIP VALUE TO SHOW" for="keyColumnId" />
</f:facet>
</p:column>
PrimeFaces supports 'jquery' selectors in the for attribute of the p:tooltip. You effectively need to select the 'parent' of the element with id typColumntitle, so this will (most likely) work.
<p:tooltip id="typTooltip"
for="#(#typColumntitle:parent)"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
Solving this problem turned out to be easy in the end. I just had to assign an id to the column <p:column id="columnwithtooltip" and adjust the for="columnwithtooltip" in the tooltip accordingly:
<p:column id="projekttypColumn" sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="projekttypColumn"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
I use primefaces in order to build a datatable. The problem is that when i try to align the header whith the columns using a css rule (float: left) then the header row is duplicated.
The question is why this happens and how it can be solved.
Below i have the code and a snapshoot of the duplicated table header.
<h:form id="jobsForm" styleClass="jobsForm">
<p:dataTable id="jobsDataTable" var="jobs" scrollable="true"
value="#{jobsBean.getJobList()}" selectionMode="single"
widgetVar="jobs" rowKey="#{jobs.id}" styleClass="jobsTable">
<p:column id="jobId" styleClass="jobColumn" sortBy="#{jobs.id}">
<f:facet id="idFacet" name="header">
<h:outputText styleClass="jobText" id="idLabel" value="#{msg.JOB_ID}"/>
</f:facet>
<h:outputText id="id" value="#{jobs.id}" />
</p:column>
<p:column id="jobTitle" styleClass="jobColumn" sortBy="#{jobs.id}">
<f:facet id="titleFacet" name="header">
<h:outputText styleClass="jobText" id="titleLabel" value="#{msg.JOB_TITLE}"/>
</f:facet>
<h:outputText id="title" value="#{jobs.title}"/>
</p:column>
<p:column id="jobState" styleClass="jobColumn" sortBy="#{jobs.status}">
<f:facet id="titleFacet" name="header">
<h:outputText styleClass="jobText" id="statusLabel" value="#{msg.JOB_STATUS}"/>
</f:facet>
<h:outputText id="status" value="#{jobs.status}"/>
</p:column>
<p:column id="jobStartDate" styleClass="jobColumn" sortBy="#{jobs.start_date}">
<f:facet id="startFacet" name="header">
<h:outputText styleClass="jobText" id="startLabel" value="#{msg.JOB_START}"/>
</f:facet>
<h:outputText id="start" value="#{jobs.start_date}"/>
</p:column>
<p:column id="jobEndDate" styleClass="jobColumn" sortBy="#{jobs.start_date}">
<f:facet id="endFacet" name="header">
<h:outputText styleClass="jobText" id="endLabel" value="#{msg.JOB_END}"/>
</f:facet>
<h:outputText id="end" value="#{jobs.end_date}"/>
</p:column>
</p:dataTable>
</h:form>
Usually I don't get good results applying CSS classes directly on PrimeFaces components without using some selectors.
In this case you can write some CSS classes using selectors to override the default PrimeFaces behavior. Here's a example:
.ui-datatable thead tr th.align-left,
.ui-datatable tbody tr td.align-left {
text-align: left;
}
Now you can apply the align behavior directly on the wanted column (in this case, including 'align-left' on the job column styleClass):
<p:dataTable id="jobsDataTable"
var="jobs"
scrollable="true"
value="#{jobsBean.getJobList()}"
selectionMode="single"
widgetVar="jobs"
rowKey="#{jobs.id}"
styleClass="jobsTable">
<p:column id="jobId"
styleClass="jobColumn align-left"
sortBy="#{jobs.id}">
<f:facet id="idFacet" name="header">
<h:outputText styleClass="jobText" id="idLabel" value="#{msg.JOB_ID}"/>
</f:facet>
<h:outputText id="id" value="#{jobs.id}" />
</p:column>
</p:dataTable>
Lastly, make sure to remove the jobsForm class from the styleClass.
I have a data table which I want to export as different from the UI.
For example, part of my data table is
<p:column sortBy="#{phi.patProtein}" width="130">
<f:facet name="header">
<h:outputText value="Pathogen Protein" />
</f:facet>
<h:outputText id="patProteinText" value="#{phi.patProtein}" />
<p:commandLink id="patBtn" value="[+]" type="button" />
<p:overlayPanel for="patBtn" hideEffect="fade" dynamic="true"">
<h:outputText value="#{phi.patProteinLong}"/>
</p:overlayPanel>
</p:column>
I want to export only the output text ("#{phi.patProtein}") from the column, not the command link ("[+]") and overlay panel. But Primefaces exports everything in column, and not gives me a chance to specify which fields of column to export.
How can I do this?
If you create two <p:column>s, one containing the <h:outputText> and the other one containing the <p:commandLink> and the <p:overlaypanel>, you can set the attribute "exportable" of the second column to false:
<p:column sortBy="#{phi.patProtein}" width="130">
<f:facet name="header">
<h:outputText value="Pathogen Protein" />
</f:facet>
<h:outputText id="patProteinText" value="#{phi.patProtein}" />
</p:column>
<p:column exportable="false">
<p:commandLink id="patBtn" value="[+]" type="button" />
<p:overlayPanel for="patBtn" hideEffect="fade" dynamic="true"">
<h:outputText value="#{phi.patProteinLong}"/>
</p:overlayPanel>
</p:column>
Then only the text should be exported.
I'm using the component <p:panel>
If we take the Advanced Panel as an example, is there any way that makes me able to add an icon at the left of the text "About Barca"?
You can extend the header using <f:facet name="header">
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon" />
<h:outputText value="About Barca" />
</h:panelGrid>
</f:facet>
You can use a span element plus CSS customization or the p:graphicImage component.
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>
how could I add an icon to a component p:panel?
<p:panel header="text" />
Unfortunately it does not support an "icon" attribute.
So I tried this:
<f:facet name="header">
<h:outputText value="text">
</h:outputText>
<p:commandLink styleClass="ui-icon ui-icon-comment" />
</f:facet>
But this adds a linebreak between the text and the command Link which only shows up as an icon.
Does someone know how I could else do this?
ty
The reason the icon is causing the text below it to shift downwards is because the ui-icon class has a display: block style that causes the image to greedily consume the line and push the text down. The following header facet will build a 2 column table around the image and text forcing the header to display them both side by side.
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon ui-icon-comment" />
<h:outputText value="text" />
</h:panelGrid>
</f:facet>
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>