I am using JSF 2.2 with PrimeFaces 4.0. I have a <p:dataTable> with live scrolling, lazy loading, row-expansion and cell-editing, etc.
<p:dataTable
id="dtaTable"
selection="#{cont.selectedArray}"
resizableColumns="true"
draggableColumns="true"
var="dataModel"
value="#{cont.yieldBondsModel}"
editable="true"
editMode="cell"
selectionMode="multiple"
rowSelectMode="add"
scrollable="true"
scrollHeight="650"
rowKey="#{modeld.id}+#{model.name}"
rowIndexVar="rowIndex"
filterEvent="enter"
styleClass="screenScrollStyle"
scrollRows="25"
liveScroll="true"
lazy="true"
rows="50"
filteredValue="#{cont.filteredModel}"
widgetVar="dt4"
>
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;" styleClass="ui-widget-content grid">
<f:facet name="header" styleClass="dataTableHeader">Other Data</f:facet>
<h:outputText value="id " />
<h:outputText value="#{dataModel.id}"/>
<h:outputText value="Name" />
<h:outputText value="#{dataModel.name}" />
</h:panelGrid>
</p:rowExpansion>
<p:column width="15">
<p:rowToggler />
</p:column>
...
</p:dataTable>
On the first page everything works like a charm. Once I scroll it down, data is getting lazy-loaded perfectly fine, but it has some problems during row-expansion and cell-editing:
In row-expansion, I am getting wrong values. Maybe overlapped values from other row.
Cell-editing is also not working. Once I edit any cell, values are not getting displayed in cell-editor. I have checked in Firebug, there is no value in <h:outputText> as confirmed by the generated HTML <div class="ui-cell-editor-output" style="display: none;"></div>. As you can see, there is no value inside the div.
The backing bean is #SessionScoped.
How is this caused and how can I solve it?
This is a known issue on PrimeFaces, and already reported and fixed in Elite version (4.0.7 if I remember well). However community release does not contain this fix yet. There is an RC for PrimeFaces 5.0 which contains this fix. You can download it and test if it's suits for you needs, but be aware that this is only a release candidate, not a final release. AFAIK the ETA for the 5.0 final is the first half of May.
Related
I am working with javaEE, and for my project i used TreeTable and BlockUI to block this table, but i want to make a button appear even if it is blocked
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="#{ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>
in my example i want to make my commanbutton appear as available even if i use BlockUI
thantk you
This is not a functional problem but a design problem.
As is, the CommandButton is part of the TreeTable, so the CommandButton must be blocked if the TreeTable is blocked.
For sure Raziels answer will work, but a clean solution would be to move the button out of the TreeTable.
<h:form id="form">
<p:commandButton
value="SomeAction"
actionListener="#{ManagedBean.someAction}"
update=":form"
/>
<p:treeTable
id="treeTable"
...
/>
<p:blockUI
block=":form:treeTable"
widgetVar="tbd"
blocked="#{ManagedBean.condition}"
/>
</h:form>
I already Solved this problem by using z-index:99999 inside a style tag
so your code should be like :
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="# {ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" style="z-index: 99999" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>
I have a problem with data in a <p:rowExpansion> being loaded before the row is expanded (which leads to loads of web service requests).
I am using PrimeFaces 5.2. I have a dataTable with lazy loading and pagination. Inside of the table, I have <p:rowToggler> with a <p:rowExpansion>:
<p:dataTable var="order"
widgetVar="orderTable"
lazy="true"
value="#{ordersBean.orders}"
paginator="true"
rows="20"
rowsPerPageTemplate="20,50,100"
filterDelay="300"
styleClass="filtered">
<p:column width="4%">
<p:rowToggler />
</p:column>
<p:column headerText="Order number" width="96%">
<h:outputText value="#{order.number}" />
</p:column>
<p:rowExpansion>
<h:panelGrid columns="1">
<h:outputText value="#{order.number}" />
<h:outputText value="#{order.info}" />
<h:dataTable var="item" value="#{ordersBean.getItemsInOrder(order.number)}">
<h:column>
<h:outputText value=" #{item.title}" />
</h:column>
</h:dataTable>
</h:panelGrid>
</p:rowExpansion>
</p:dataTable>
When I first load the page, the getItemsInOrder() method is not called, except for when I expand a row. But if I navigate to page 2 (or if I navigate back to page 1 later) using the paginator, then getItemsInOrder() is called for every row in the outer table. Since I have 20 rows showing, navigating between the pages leads to 20 web service requests (in getItemsInOrder()).
How do I prevent it from calling the getItemsInOrder() method until the row is expanded?
I have the same problem. Until I find a better solution, this is the workaround I am using:
register a (DataTable event-) listener on event rowToggle.
In the listener, store an identifier of the toggled row. Hint: you can get the row object with event.getData()
Instead of directly accessing the data requesting component, write a proxy method in front of it which checks if the requested object belongs to the identifier stored in the listener.
I want to use a special form of grouping 'dynamic' columns. This is however not supported as stated in my other question. Using c:forEach was suggested as a possible solution
Which is correct way to use c:forEach for defining table header and colums.
My code BEFORE:
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<p:columns value="#{myBean.columns}" var="column" columnIndexVar="colIndex">
<f:facet name="header" >
<h:outputText value="#{column.header}"/>
</f:facet>
<h:outputText value="#{result[column.property]}"/>
</p:columns>
</p:dataTable>
and code AFTER transformation (didn't work - table is not displayed):
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<p:columnGroup type="header">
<p:row>
<c:forEach items="#{myBean.columns}" var="column">
<p:column headerText="#{column.header}"/>
</c:forEach>
</p:row>
</p:columnGroup>
<c:forEach items="#{myBean.columns}" var="column" >
<p:column>
<h:outputText value="#{result[column.property]}"/>
</p:column>
</c:forEach>
</p:dataTable>
PrimeFaces version 3.4.1
The "by the book" way to create dynamic columns would be to use the "Dynamic Columns" feature of the data table.
Any way, I did something very similar to what you are trying to do in the past, using c:forEach. The only difference was that I was not using p:columnGroup at the same time.
So, code like
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<c:forEach items="#{myBean.columns}" var="column" >
<p:column headerText="#{column.header}">
<h:outputText value="#{result[column.property]}"/>
</p:column>
</c:forEach>
</p:dataTable>
should really work. When you do this way, you add p:column objets in the component tree before the p:datatable analyze the tree. So, this does the trick.
Beware that this can lead to problems in edge, ajax cases. So, if you can, just stick to the built-in dynamic columns feature.
I'm seeing a strange behaviour with Primefaces (4.0) related to Panels whose collapsed-attributes are bound to a property in a backing bean. Updating the state works fine so the panel collapses/expands correctly when the value of the backing bean changes.
The problem is: I have some p:Dialogs that can be opened to enter some additional/optional information. After closing the dialog, the panel fails to expand/collapse when changing the value. Strangely, other attributes bound to the same property get updated like before.
Example:
XHTML of two panels whose collapsed Attribute is bound to a property. Note that the disabled-attribute of the checkboxes are bound to the same property and still get updated after the dialog is closed.
<p:panel id="panel1" style="width:80%;" toggleable="true" collapsed="#{!bean.panel1.enabled}" widgetVar="panel1Var">
<f:facet name="header">
<p:outputLabel value="Panel1"/>
<p:selectBooleanCheckbox id="p1_enabled" style="margin-left:20px;" disabled="#{bean.panel2.enabled}" value="#{bean.panel1.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
<p:panel id="panel2" style="width:80%;" toggleable="true" collapsed="#{!bean.panel2.enabled}" widgetVar="panel2Var">
<f:facet name="header">
<p:outputLabel value="Panel2"/>
<p:selectBooleanCheckbox id="p2_enabled" style="margin-left:20px;" disabled="#{bean.panel1.enabled}" value="#{bean.panel2.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
XHTML somewhere else on the same page which opens a dialog:
<p:commandLink id="contactbutton" onclick="PF('contactextended').show();">
<h:outputText value="Extended" />
</p:commandLink>
The dialog is configured like this:
<p:dialog widgetVar="contactextended" modal="true" width="600px" height="500px" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
The backing bean is a straightforward bean with properties and getters/setter which obviously work. Is there a problem in my implementation? Any ideas how to work around this issue?
Thanks in advance!
Fixed this by myself. The solution seems to be to add process="#this"to the commandLink. I am still not sure what the underlying problem is/was, but at least it doesn't get triggered anymore.
I have a setup in a view, where I display datatables dynamically. That is happening inside a p:accordion-Element, which is generating the tabs dynamically (and therefore the datatables inside).
The user now has the possibility (well, should have..) to add, edit and remove objects to the datatable and therefore to the object that is represented by the tab.
The add- and edit-functions work via dialogs. After successful adding or editing I want to update the datatable containing the data.
If I update the whole accordion-panel I lose the focus on the current tab which is really bad for the user-experience, especially because the other sub-pages of the project always only update the datatable.
After some googling I found out that I can't generate the IDs of JSF-components dynamically, what would make the whole thing a process of minutes.
I also do not have any index I could use to "cheat" and save in my backing-bean when I open the dialog.
I also found out that I could work-around this issue by using JSTL but this is prohibited due to a limited set of allowed languages.
The current setup looks like this:
<p:accordionPanel id="academicYearAccordionPanel"
value="#{academicYearAndClassController.academicYears}"
var="academicYear" multiple="true" dynamic="true" activeIndex="-1"
style="width:100%;">
<p:tab id="academicYear-#{academicYear.academicYear}" title="Jahrgang - #{academicYear.academicYear}">
<p:outputPanel style="float:right">
<p:commandButton value="Löschen" icon="ui-icon-close"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wConfirmAcademicYearDelete').show();">
</p:commandButton>
</p:outputPanel>
<p:spacer style="height:50px;" />
<p:separator />
<!-- Tabcontent -->
<p:outputPanel>
<p:outputPanel style="float:right">
<p:commandButton value="Hinzufügen" icon="ui-icon-plusthick"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wAddSchoolclassDialog').show();">
</p:commandButton>
</p:outputPanel>
<h:panelGrid columns="2">
<h:outputText
value="Klassen des #{academicYear.academicYear}. Jahrgangs" />
<p:spacer style="height:50px;" />
</h:panelGrid>
<p:dataTable emptyMessage="Keine Klassen vorhanden"
id="schoolclassTable"
var="schoolclass"
selection="#{academicYearAndClassController.schoolclass}"
value="#{academicYearAndClassController.getSchoolclasses(academicYear)}"
selectionMode="single" rowKey="#{schoolclass.name}"
scrollable="true" scrollHeight="500">
<p:column headerText="Name">
<h:outputText value="#{schoolclass.identifier}" />
</p:column>
<p:column headerText="Klassenlehrkraft">
<h:outputText
value="#{schoolclass.teacher.name} (#{schoolclass.teacher.symbol})" />
</p:column>
<p:column headerText="Klassenraum">
<h:outputText
value="#{schoolclass.room.name} (#{schoolclass.room.locationName})" />
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
</p:accordionPanel>
I want to update the element with the ID schoolclassTable. How can I achieve this?