I'm currently working with primeface's p:rowExpansion and noticed that it's not working inside a p:outputPanel. Here's a sample code:
<p:commandButton action="#{xxxSearchBean.search()}" value="Search" update="messages resultPanel" styleClass="button"></p:commandButton>
<p:outputPanel id="resultPanel">
<p:panel rendered="#{xxxSearchBean.hasResults()}">
<ui:include src="xxxSearchView.xhtml">
<ui:param name="searchBean" value="#{xxxSearchBean}" />
</ui:include>
</p:panel>
</p:outputPanel>
The included view:
<p:accordionPanel activeIndex="0">
<p:tab title="Criminal Results">
<p:dataTable var="c" value="#{searchBean.results}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{c.lastname}" />
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{c.firstname}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="4"
columnClasses="form-field-label,value,form-field-label,value">
<h:outputText value="Label" />
<h:outputText value="Value" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</p:tab>
</p:accordionPanel>
The above code successfully show the result grid when there are results, but when I click the rowExpansion it doesn't work.
When I moved out the panel and remove the rendered property, the row expansion worked. But I don't want to show the grid on page load :-(
Any idea?
I don't know if <p:rowExpansion> really doesn't work with <p:outputPanel>. But since you don't need any special features of <p:outputPanel>, you can just use <h:panelGroup> instead. :)
I was able to solved the problem by changing the backing bean annotation from #Model to #Conversation scope, then start the conversation the moment the view is render.
Related
I am providing a search function using JSF. I get the list and display it correctly in a datatable :
<p:dataTable id="props" var="prop" value="#{propController.propSearch}" editable="true" style="margin-bottom:20px">
<p:column headerText="Id" width="20">
<h:outputText value="#{prop.id}" />
</p:column>
<p:column headerText="Name" width="300">
<h:outputText value="#{prop.name}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{prop.shortDescription}" />
</p:column>
<p:column headerText="Price" width="120">
<h:outputText value="#{prop.price}" />
</p:column>
<p:column width="120">
<h:commandButton value="View Prop" immediate="true" action="#{propController.viewSingleProp(prop)}" />
</p:column>
<p:column width="120">
<h:commandButton value="Delete" immediate="true" onclick="return confirm('Are you sure you want to delete this prop?')" actionListener="#{propController.deleteProp(prop)}" />
</p:column>
</p:dataTable>
</h:form>
However the commandButton to view each individual item does not get called. Instead the search page just refreshes with no data.
Why is this happening?
(I hope your opening tag of <h:form> is just missing in your code posted in your question, not in your actual code!)
You need to remove the attribute immediate="true" from the h:commandButton.
See:
Immediate=true VS immediate=false in JSF Component
Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>
It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.
You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.
I am trying to update a primefaces form (wizard-first step) after an ajax command button request with no success. The command button that makes the actual ajax call is on a dialog. I would like after submitting the request to force my view to refresh.
The command button deletes a record from a datatable. It works fine, record is deleted but when dialog is hidden the datatable keeps displaying the deleted record. I would like to force it somehow to refresh. Any ideas? Could I do it from my backing bean reviewManagerBean.deleteProtocol() method?
Here is the code (my BackBean is viewScoped):
<h:form id="reviewManagerForm">
...
<pe:masterDetail id="masterDetail" level="#{reviewManagerBean.currentLevel}" showBreadcrumb="false" selectLevelListener="#{reviewManagerBean.levelListener}" >
<f:facet name="header" >
<h:panelGroup layout="block" style="margin-top: 10px;" >
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all wizard-breadcrumbs#{reviewManagerBean.currentLevel eq 1 ? 'ui-state-hover' : ''}">
<h:outputText value="1: Protocol picker"/>
</h:panelGroup>
...
<p:messages id="mainMessagesPanel" showDetail="true" closable="true" />
</h:panelGroup>
</f:facet>
<pe:masterDetailLevel level="1">
<p:panel id="panel1" header="List of available protocols">
<p:dataTable id="protocolsDataTable" var="cRProtocol" rowKey="#{cRProtocol.revProtId}" value="#{reviewManagerBean.cRReviewProtocolList}"
widgetVar="protocolsTable"
...
selection="#{reviewManagerBean.selectedReviewProtocol}"
selectionMode="single" >
...
<p:ajax event="rowSelect" listener="#{reviewManagerBean.setSelectedRow}" />
<p:ajax event="rowUnselect" listener="#{reviewManagerBean.unsetSelectedRow}"/>
...
<p:column sortBy="#{cRProtocol.revProtTitle}" headerText="Title" style="width:200px;text-align:center;">
<h:outputText value="#{cRProtocol.revProtTitle}" />
</p:column>
...
<p:column>
<p:commandButton value="Delete" onclick="dlg5.show()"
update=":reviewManagerForm:deleteSingleProtocol"
disabled="#{reviewManagerBean.checkifProtocolIsOpen(cRProtocol)}"
ajax="true" process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:dataTable>
</p:panel>
...
<p:dialog id="dialog-deleteprotocol" header="Delete Image Type" widgetVar="dlg5" dynamic="true" modal="true" resizable="false">
<p:panelGrid id="deleteSingleProtocol">
<p:row>
<p:column>
<h:outputText value="Id:" style="font-weight:bold; padding-right:10px" />
</p:column>
<p:column>
<h:outputText value="#{reviewManagerBean.selectedReviewProtocol.revProtId}" />
</p:column>
</p:row>
...
<p:column>
<p:commandButton id='protocolDelete'
value='Delete'
action='#{reviewManagerBean.deleteProtocol()}'
ajax="true"
onclick="dlg5.hide()" icon="ui-icon-disk"
update=":reviewManagerForm:protocolsDataTable"
process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
Your datatable should be re-rendered properly, you would have gotten an exception otherwise (something like component with id :reviewManagerForm:protocolsDataTable could not be found).
This means that #{reviewManagerBean.cRReviewProtocolList} will get called again. You need to remove the item from that list. This is appropriately done from #{reviewManagerBean.deleteProtocol}.
When #{reviewManagerBean.cRReviewProtocolList} is called after the removal, your datatable will get updated.
I am using p:dataList because I am developing a PrimeFaces mobile view displaying a list of items. When clicking on any item, another pm:view of the same view should be displayed. But the bean should be notified of the selected item.
Unfortunately I couldn't find a way to update the bean successfully: <p:ajax> inside dataTable throws this exception:
<p:ajax> Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
Using <f:setPropertyActionListener> inside the iterative element fails too because I get:
<f:setPropertyActionListener> Parent is not of type ActionSource
This is my code:
<pm:view id="instrumentsView" >
<pm:content >
<h:form id="instrumentsList" >
<p:dataList var="instrument" value="#{instrumentBean.subscribedInstruments}" >
<h:outputLink value="#newView" >#{instrument.longName}</h:outputLink>
<f:setPropertyActionListener value="#{instrument}" target="#{instrumentBean.selectedInstrument}" />
</p:dataList>
</h:form>
</pm:content>
</pm:view>
Clearly, I am using dataList and outputLink because as far as I understand, they are the components optimized for the use in PrimeFaces mobile lists. But I am available to find other options if necessary.
I found out in the showcase (example titled News) the correct way of handling the problem:
<p:dataList var="instrument" value="#{instrumentBean.subscribedInstruments}" >
<p:column >
<p:commandLink value="#{instrument.longName}" action="pm:newView" update=":compId">
<f:setPropertyActionListener value="#{instrument}" target="#{instrumentBean.selectedInstrument}" />
</p:commandLink>
</p:column>
</p:dataList>
There is a topic explaining this in the primefaces documentation.
Selecting Data (page 124)
indexed_primefaces_users_guide_3_5.pdf
http://www.primefaces.org/documentation.html
Here is the content
<h:form id="carForm">
<p:dataGrid var="car" value="#{carBean.cars}" columns="3" rows="12">
<p:panel header="#{car.model}">
<p:commandLink update=":carForm:display" oncomplete="dlg.show()">
<f:setPropertyActionListener value="#{car}"
target="#{carBean.selectedCar}"
<h:outputText value="#{car.model}" />
</p:commandLink>
</p:panel>
</p:dataGrid>
<p:dialog modal="true" widgetVar="dlg">
<h:panelGrid id="display" columns="2">
<f:facet name="header">
<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg" />
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="#{carBean.selectedCar.year}" />
</h:panelGrid>
</p:dialog>
</h:form>
Please help me to find a example to update p:inputtext with data stored in a bean which is set(solved already) by selecting a row of a datatable of a p:dialog. I have succeeded updating outputtext in the same manner.
I am using (learning) netbeans 7.2 primefaces 3.2, glassfish 3.1
thansk for all your help
rs_ncs
Look at primefaces showcase and the user guide, you'll find everything you need; in detail search for rowSelect event for the datatable component. Good luck =)
If you would like to update a component on select of a row from a datatable, then you can use the update attribute of a <p:ajax> which is listening on rowselect event. Something like this:
<p:ajax event="rowSelect" update=":xx:xx" />
As Suggested by BalusC the code <p:ajax event="rowSelect" update=":xx:xx" /> should work....
Here is an example of updating both inputtext and outputtext .
<h:form>
<p:dataTable id="usertable" var="user" value="#{userManageBean.userList}"
rowKey="#{user.U_ID}" selection="#{userManageBean.selectedUser}"
selectionMode="single" paginator="true" rows="18" >
<p:ajax event="rowSelect" update=":useredit:edituser" />
<p:ajax event="rowSelect" update=":viewuser:displayuser" />
<p:column headerText="User Name">
<h:outputText value="#{user.username}" />
</p:column>
<p:column headerText="FName">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="LName">
<h:outputText value="#{user.lastname}" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="userview" header="View User" widgetVar="dlg2" >
<h:form id="viewuser">
<h:panelGrid id="displayuser" columns="2" cellpadding="4">
<h:outputText value="User Name:" />
<h:outputText value="#{userManageBean.selectedUser.username}" />
<h:outputText value="First Name" />
<h:outputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name:" />
<h:outputText value="#{userManageBean.selectedUser.lastname}" />
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="user_edit" header="Edit User" widgetVar="dlgedit" >
<h:form id="useredit">
<h:panelGrid id="edituser" columns="2" cellpadding="4">
<h:outputText value="First Name" />
<h:inputText value="#{userManageBean.selectedUser.firstname}" />
<h:outputText value="Last Name" />
<h:inputText value="#{userManageBean.selectedUser.lastname}" />
<p:commandButton id="updateUser" value="Add" action="#{someaction}"
ajax="false" />
</h:panelGrid>
</h:form>
</p:dialog>