I have a Primefaces Datatable and each column filled with a OutputLabel. When the String in this label has to many characters, the text is not visible.
I'm looking for a way, to show a MouseOver-window or hint to show the full text. What would be the most painless way? Thanks in advance.
You can Use Primeface Tooltip component.
<p:tooltip value="<CONTENT_OF_TOOLTIP>" for="<COMPONENT_ID_ON_WHICH_TOOLTIP_WILL_APPEAR>" />
Even though the IDs generated in Primefaces Datable inner components are different over iteration of List, if you put p:tooltip also in table as in below example, primefaces will also generated dynamic IDs to p:tooltip component also.
Example:
<p:dataTable value="#{heroMBean.herosList}" var="h">
<p:column headerText="Name">
<h:outputText id="hname" value="#{h.name}"/>
<p:tooltip for="hname" value="#{h.name}"></p:tooltip>
</p:column>
<p:column headerText="Universe">
<h:outputText id="huniverse" value="#{h.universe}"/>
</p:column>
</p:dataTable>
Related
Im trying to present my data from a mysql Database in a Datatable, and its all working, now i was trying to include a filter and sorting functionality, but when I test it and press the sorting arrows, nothing happens, only when I filter the datatable first, and then everything works fine.
I tried it with the primeface Attributes filterBy and sortBy, and because of the existing functionality I think it has something to do with a update-Problem
<p:dataTable id="test3" scrollable="true" scrollHeight="150" var="Foo" value="#{Foo.bar}">
<p:column headerText="#{msg['default-description-key']}"
sortBy="#{Foo.keyString}"
filterBy="#{Foo.keyString}">
<p:outputLabel value="#{Foo.keyString}"
style="float:center"/>
</p:column>
<p:column headerText="#{msg['default-description-count']}"
sortBy="#{Foo.count}" filterBy="#{Foo.count}">
<p:outputLabel value="#{Foo.count}"
style="float:center"/>
</p:column>
<p:column headerText="#{msg['default-description-register.key']}">
<p:commandLink value="#{msg['default-description-
register.key.link']}" action="#{Foo.bar(Foo.keyString)}"/>
</p:column>
</p:dataTable>
I want to be able to sort the datatable without the need of filtering it before
Create a separate list in your bean (don't forget getter and setter) and link it to the attribute filteredValue in the p:dataTable component
Place the table inside h:form
Use h:outputText instead of p:outputLabel
I am currently developing an application where the user can use a picklist to make certain associations.
I would like to display the object's attributes in different columns inside the picklist, for example the object car would display its id, year and color. However, the headerText of the column is not working. The column only displays the data but PrimeFaces seems to ignore the attribute headerText among others like sortBy. Is there any workaround? What am I doing wrong? p:column seems to work fine on a DataTable but not on a PickList and I really need to use a PickList or at least something with very similar functionalities.
Below is my code:
<p:pickList id="pickListAssociacao" value="#{associacaoPickListView.carsPickListView}" var="car" itemLabel="#{car.brand}" itemValue="#{car}">
<p:column headerText="Header1">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Header2" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Header3">
<h:outputText value="#{car.year}" />
</p:column>
</p:pickList>
Thanks for your time.
I've got dynamic columns. Some have Inputfields others don't.
Why do I have to set the Id of an Inputfield if I don't want to render it?
<rich:columns value="#{columnBean.columns}" var="column" index="ind" id="#{column.id}">
<f:facet name="header">
<h:inputText id="#{column.inputFilterId}" value="#{otherBean.filterValue[column.filterBy]}" onkeyup="filterKeyUp(event)" onclick="Event.stop(event);" />
</f:facet>
<h:outputText value="#{columnBean.lineItemHandler[line]}" rendered="#{columnBean.curCol[column.id]}"/>
</rich:columns>
I'm using JSF 1.2 and Richfaces 3.3.3 Final
I fixed it, just put a unique Id-Value from my Column Bean.
The better solution is to do this:
https://stackoverflow.com/a/18358949/5146922
THX BalusC
Well, I've been looking for any examples but all I could find was just examples in plain Java but I need to do something like this one or this other but in a JSF or PrimeFaces component.
Maybe this is what you are looking for:
<f:facet name="header">
Row Header Example
</f:facet>
Here is the complete example:
Primefaces showcase - DataTable - Group 1
I think you want something like a horizontal header, a don't think primefaces has it, but you can change the style of first cell like this:
<p:column headerText="Id">
<h:outputText value="#{car.id}" styleClass="someCssClass" />
</p:column>
The h:column tag has a property called rowHeader that does what you need.
This is a clumsy question!!! :)
Can this be made possible somehow? Can <p:dataTable> (whatever lazily loaded or otherwise) be updated without updating its headers (The contents (rows) inside the table along with the footer should be updated without updating the table headers)?
Updating of <p:dataTable> may be triggered by any UICommand like <p:commandButton>, <p:commandLink> and alike.
Something like this can be visualized, when we edit/update rows using <p:cellEditor> in conjunction with <p:rowEditor/> in <p:dataTable> (not sure about single cell editing).
<p:dataTable id="dataTable" var="row" value="#{bean}" ...>
<p:column headerText="Header 1" sortBy="#{row.property1}" filterBy="#{row.property1}">
....
</p:column>
<p:column>
<!--They may be our own headers-->
<f:facet name="header">
Header 2
...
</f:facet>
....
</p:column>
...
</p:dataTable>
Easiest way is to use PrimeFaces Selectors (PFS) for this. This only requires the desired cell content being wrapped in another component with an ID and a style class — so that jQuery can find and collect them.
E.g.
<p:dataTable ...>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col1" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col2" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col3" styleClass="cell">...</h:panelGroup>
</p:column>
...
</p:dataTable>
<p:commandButton value="update" update="#(.cell)" />
That wrapping is clumsy, yes, but that's best you can get without homebrewing a custom renderer. You can always create a <my:column> tagfile to reduce the boilerplate.
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?