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
Related
Well though this question is duplicated somewhat, I have searched over the net still couldn't find the exact result what i want. In my case im developing a project in JSF using Primefaces which has CRUD functionality. i have more than 3k records in p:dataTable. If i want to update selected 5 records, i can only update the whole dataTable(takes much time).
Scenario:
1) select the records in Datatable
2) click p:commandButton to perform business logic and will provide the result for selected records.
(In p:commandButton i used datatable updation)
Note:
I can only forced to use Primefaces. (I found omniFaces has the solution but i shouldn't use)
Pls help me out!
PrimeFaces will allow you to update component based on styleClass, using PrimeFacesSelectors(PFS).
update="#(.mystyle)"
You can use this to serve your purpose of updating particular row of datatable.
Here is the strategy:
1. Set unique rowKey as styleClass to each of columns for every row.
2. Use that rowKey at PFS for your update attribute.
Here is a short code snippet:
<p:dataTable var="mov" value="#{repeatUIBean.mList}" ro>
<p:column headerText="mov Name">
<h:outputText styleClass="#{mov.uniqueId}" value="#{mov.name}"/>
</p:column>
<p:column headerText="mov Release Year">
<h:outputText styleClass="#{mov.uniqueId}" value="#{mov.year}"/>
</p:column>
<p:column headerText="Edit mov">
<p:commandButton value="Edit" update="#(.#{mov.uniqueId})"/>
</p:column>
</p:dataTable>
I'm working on a PrimeFaces project, where I choose to use a p:DataTable inside a p:DataGrid. The DataTable has the selectionMode attribute set to "multiple". I have a button on the page and when I click on it, I want to get all the selected checkboxes inside the various generated tables. All the checkboxes bring the same type of information (they are in different tables because of an information grouping scheme I use in the project).
Since I have multiple DataTables in the final rendered page, how can I get the selected checkboxes? I tried using the selection="#{myBean.selectedOptions}" attribute of the DataTable, but it seems to get just one of the generated tables' selected options (aparently the first one). What can I do to get the selected options of all tables generated by the p:DataGrid? Javascript? Is there any point I'm missing in the DataTable behavior?
(Well.. I don`t know whether I was able to make myself clear enough - English is not my native language).
[edited]
More information:
The number o DataTables generated is variable
I tried using the jsf visit method to traverse the user interface component view as shown here, looking for all checkboxes inside the DataGrid, but it couldn't find any of the checkboxes (I printed out to the console all the elements found). I think it's because the checkboxes are encapsulated in DataTable component. This made me think about not using the selectionMode="multiple" and, instead, manually add the checkboxes and a hidden input element for each one so I can find the checkboxes (or the "input hidden") using the visit method. The sad part of this aproach is that I'd have to stop using some good stuff of the DataTable selectionMode="multiple" feature, like hilighting the row if the corresponding checkbox is checked, and the ready to use "check all" checkbox it automatically put in the header of the ckeckboxes column.
I tried using a nested List in the selection attribute, but it didn't work. The main idea was using something like selection="#{bean.myListOfLists.get(t.counter)}". The "counter" variable is taken from the very object that is used to fulfill the current row of the DataTable (represented by the t variable in the attribute var="t"). The DataTable seems to not accept this approach. It doesn`t fulfill the nested lists.
I tried using the above approch with a modification: instead of a list of lists, a build a new class "B" and made a list of B (selection="#{bean.myListOf_B_Objects.get(t.counter).listInsideBObject}"). The result is simliar to the last approach: none of the lists inside the B objects were fulfilled.
Below there is a simplified view of what I did (more similar to the last case, but it's just to get the big picture)
<p:dataGrid var="gridCellContent"
value="#{myBean.dataGridContent}"
layout="grid" id="id01" columns="3"">
<p:dataTable var="something"
value="#{gridCellContent.listOfSomething}"
rowKey="#{something.id}"
selection="#{myBean.listOf_B_Objects.get(gridCellContent.counter).listInside_B_Object}">
<p:column selectionMode="multiple" />
<p:column>
<h:outputText value="#{something.sometext}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton id="btnSave" value="Save"
actionListener="#{myBean.btnSave}"/>
</f:facet>
</p:dataGrid>
[edited 2] Following #JaqenH'ghar's sugestion I tried out the modifications below, which unfortunately still din't work:
<p:dataGrid var="gridCellContent"
value="#{myBean.dataGridContent}"
layout="grid" id="id01" columns="3"
rowIndexVar="count">
<p:dataTable var="something"
value="#{gridCellContent.listOfSomething}"
rowKey="#{something.id}"
selection="#{myBean.listOfLists.get(count)}">
<p:column selectionMode="multiple" />
<p:column>
<h:outputText value="#{something.sometext}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton id="btnSave" value="Save"
actionListener="#{myBean.btnSave}"/>
</f:facet>
</p:dataGrid>
And for myBean:
#ManagedBean
public class MyBean {
...
private List<List<Something>> listOfLists = new ArrayList<List<Something>>();
public List<List<Something>> getListOfLists(){
this.listOfLists.add(new ArrayList<Something>());
return this.listOfLists;
}
public void setListOfLists(List<Something> listOfSomething) {
this.listOfLists.add(listOfSomething);
}
...
}
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>
Using PrimeFaces 5.0.
My datatable uses lazy loading and live scrolling and I try to filter both fields:
<p:dataTable id="eventsTable" value="#{eventController.eventModel}" var="event" lazy="true"
scrollRows="100" liveScroll="true" scrollable="true" scrollHeight="500">
<p:column headerText="EID" filterBy="#{enent.eid}">
<h:outputText value="#{event.eid}" />
</p:column>
<p:column headerText="Type" filterBy="#{event.type}">
<h:outputText value="#{event.type}" />
</p:column>
</p:dataTable>
The initial load retrieves data correctly, and live scrolling seems to work fine.
But when I try to filter one of the fields the datatable is completely emptied (It does not even show the "No records found" message). When I debug I can see that my queries are executed correctly and return data.
Also, If I switch using paging instead of liveScroll, pages are lazy loaded correctly and filters also work.
Any thoughts?
You must set the rows attribute of the datatable.
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?