Iam trying to display a list of currencies from a database through a drop down list , every currency has a logo
<p:selectOneMenu value="#{currencyController.currency}"
converter="#{currencyConverter}"
var="c" style="width:180px">
<f:selectItems value="#{currencyController.currencyList}"
var="currency"
itemLabel="#{currency.currencyName}"
itemValue="#{currency}"/>
<p:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{c.name}"/>
</p:column>
<p:column style="width:10%">
<p:graphicImage value="#{c.image}"
cache="false"
style="height:3em;width:3em"/>
</p:column>
</p:selectOneMenu>
The name is displayed fine but the problem is that the logo is not getting displayed at all
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 am trying to have both context menu as well as filter in my page but after I filter and reload the page I get this exception
DataModel must implement org.primefaces.model.SelectableDataModel when selection is enabled.
<p:dataTable
id="wtmInbox"
rendered="#{flowDashboardManagedBean.renderOnLoadForWtm}"
value="#{flowDashboardManagedBean.worktimematrixList}"
var="wtms"
stickyHeader="false"
tableStyleClass="IEListTable"
widgetVar="wtmInboxWidVar"
scrollable="true"
scrollHeight="700"
editable="true" rowKey="#{wtms.worktimematrix.workTimeMatrixId}" selection="#{flowDashboardManagedBean.selectedWorktimematrix}" selectionMode="single">
<p:ajax event="rowEdit" listener="#{flowDashboardManagedBean.onRowEdit}" update="wtmInbox"/>
<p:ajax event="contextMenu" listener="#{flowDashboardManagedBean.onRowSelect}" ></p:ajax>
filter :
<p:column headerText="#{bundle.status}"
sortBy="#{wtms.worktimematrix.workTimeMatrixStatus.name}"
filterBy="#{wtms.worktimematrix.workTimeMatrixStatus.name}"
filterMatchMode="exact"
style="text-align:right;"
priority="1"
width="10%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{wtms.worktimematrix.workTimeMatrixStatus}" converter="workTimeMatrixStatusConverter"></h:outputText>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{wtms.worktimematrix.workTimeMatrixStatus}" converter="workTimeMatrixStatusConverter">
<f:selectItem itemLabel="#{bundle.select}" itemValue="#{null}"/>
<f:selectItems value="#{flowDashboardManagedBean.workTimeMatrixStatuses}" var="worktimematrixStatus" itemValue="#{worktimematrixStatus}" itemLabel="#{worktimematrixStatus.name}"></f:selectItems>
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
<f:facet name="filter">
<p:selectOneMenu onchange="PF('wtmInboxWidVar').filter()" id="flowModelTypeFilter">
<f:selectItem itemLabel="#{bundle.status}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{flowDashboardManagedBean.workTimeMatrixStatusNames}" var="status" itemValue="#{status}"/>
</p:selectOneMenu>
</f:facet>
</p:column>
Found out the Problem, The entity behind the table did not implement serializable. After I added that filters worked then when I added in the context menu it also worked.
I've been working on a jsf project(using primefaces 5.2). I've a datatable which gets updated using a poll in every 10 seconds.I also have a column toggler. Everything is working fine but the only problem is that when poll updates the datatable it again adds all the columns to the table.Is there some way to restrict datatable to only show the selected toggled columns only even after poll update.
Here is My xhtml code
<h:form rendered="#{bean.value!=null}" >
<p:dataTable id="tab" var="var" value="#{bean.value}" >
<f:facet name="header">
Header for dataTable
<p:commandButton style="float:right" id="toggler" type="button" value="Columns" icon="ui-icon-calculator" />
<p:columnToggler datasource="tab" trigger="toggler" />
</f:facet>
<p:column>
<f:facet name="header"><h:outputText value="Start"/>
</f:facet>
<h:outputText value="#{var.startTime}">
<f:convertDateTime pattern="dd.MM.yyyy" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="End"/>
</f:facet>
<h:outputText value="#{var.endTime}" >
<f:convertDateTime pattern="dd.MM.yyyy" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{var.name}" >
</h:outputText>
</p:column>
</p:dataTable>
<p:poll interval="10" update="tab" />
</h:form>
i have a datatable using the primefaces library, and while i have got all the functions working i have just one small issue, when i press the command link to remove the row, it works and the row gets removed but it does not automatically update the datatable to reflect this, ideally what i want is when the user presses the delete button it automatically updates the datatable to show this, how can i achieve this ?
here is the datatable
<p:dataTable id="UserTable"
widgetVar="usersTable"
value="#{userdetailsController.items}"
var="item"
emptyMessage="No details was found with given criteria">
<!--filteredValue="{userdetailsController.filteredUsers}" -->
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields: " />
<p:inputText id="globalFilter" onkeyup="usersTable.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="USERID" filterBy="id"
headerText="i.d."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<!--There are four different match modes, "startsWith"(default), "endsWith", "contains" and "exact"-->
<p:column id="USERNAME" filterBy="username"
headerText="username."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_username}"/>
</f:facet>
<h:outputText value="#{item.username}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<p:commandLink action="#{userdetailsController.prepareView}" value="#{bundle.ListUserdetailsViewLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.prepareEdit}" value="#{bundle.ListUserdetailsEditLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}"/>
</p:column>
</p:dataTable>
You need to use the update attribute of the p:commandLink to tell PF you want to do the ajax request to obtain all data related to table UserTable like this:
<p:commandLink actionListener="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}" ajax="true" update="UserTable"/>
Make sure to use actionListener as it is called before action atrib. A more detailed example is here
http://www.primefaces.org/showcase/ui/commandLink.jsf
Per the documentation, you need to make a call to Draw() after you remove a row.
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'img.icon-delete', function () {
table
.row( $(this).parents('tr') )
.remove()
.draw();
} );
My product is using JSF with Primefaces 2.2. What I need is to process a sub-datatable inside another datatable. The code is as below.
<h:form>
<p:dataTable id="myInvoiceTable"
value="#{globalBean.invoices}" var="invoice">
<p:column>
<f:facet name="header">
<h:outputText value="Bill ID" />
</f:facet>
<h:outputText value="#{invoice.billId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Item" />
</f:facet>
<h:outputText value="#{invoice.item}" />
</p:column>
<p:rowExpansion>
<h:selectOneMenu id="reasons" value="#{invoiceAction.reason}">
<f:selectItem itemLabel="Reason 1" itemValue="Reason 1"></f:selectItem>
<f:selectItem itemLabel="Reason 2" itemValue="Reason 2"></f:selectItem>
</h:selectOneMenu>
<p:inputText id="activity_amount" value="#{invoiceAction.activity_amount}"/>
<p:commandButton value="PROCESS" action="invoice_process" update="actions_table">
</p:commandButton>
<p:dataTable id="actions_table" value="#{invoice.actions}" var="invAction">
<p:column>
<h:outputText value="#{invAction.reason}" />
</p:column>
<p:column>
<h:outputText value="#{invAction.activity_amount}" />
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
Here's my bean.
public class Invoice {
private int billId;
private String item;
private List<InvoiceAction> actions;
// Getter & setter here
}
public class InvoiceAction {
private String reason;
private double activity_amount;
private int billId;
// Getter & setter here;
}
But when the HTML is generated, it's not processed as desired. Only the select menu in the last row of datatable can receive the data chosen by user, others can't. Because all select menus in all rows are using the same object (#{invoiceAction}), and the bean just gets the value of the last component in the page. I knew the root cause but I don't know how to solve it. How to let they submit in the specified row?
First of all, I think your Invoice and InvoiceAction classes look just like normal Java objects. I feel that they should not be Managed Bean.
Besides, you're right that your #{invoiceAction} is not correctly binded to one of the actions in List<InvoiceAction> actions. Since you are using nested <p:dataTable>, I think you can take advantage of <p:cellEditor>. It would be something like this:
<p:rowExpansion>
<p:dataTable id="actions_table" value="#{invoice.actions}" var="invAction">
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{invAction.reason}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu id="reasons" value="#{invoiceAction.reason}">
<f:selectItem itemLabel="Reason 1" itemValue="Reason 1" />
<f:selectItem itemLabel="Reason 2" itemValue="Reason 2" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{invAction.activity_amount}" />
</f:facet>
<f:facet name="input">
<p:inputText id="activity_amount" value="#{invoiceAction.activity_amount}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:commandButton value="PROCESS" action="invoice_process" update="actions_table" />
</p:rowExpansion>