I have upgraded my primefaces application from primefaces version 3.3 to 6.0 (latest). Most of the components and pages are working fine except the pages where p:datatable is shown inside p:dialog. It stretches the dialog to the full width of the browser. If I resize the browser all the columns stacked on each other. What is the solution for this issue?
Set the width attribute of the primefaces dialog to a specific value like below:
<p:dialog id="myDlg" widgetVar="myDialog" modal="true" width="1000" resizable="false" appendTo="#(body)" header="Header" closeOnEscape="true">
//your table here
</p:dialog>
If in the dialog you also have a form the you can put the entries of the form on a gridPanel.
The newest version of PrimeFaces has a "responsive" dialog attribute. So your dialog code should be something like this:
<p:dialog> id = "someDialog" widgetVar = "someDialog" modal = "true" responsive = "true">
//dialog code
</p:dialog>
It was put into version 6.0 https://github.com/primefaces/primefaces/issues/327
Related
I'm currently working on an application that uses JSF 2.2 together with Primefaces running on Wildfly 11.
Error Environment: Primefaces 6.2.5
Working environment: Primefaces 6.2.2
Expected Behavior:
Clicking a context menu item, should invoke a re rendering of the toolbar in the screen. This worked in previous versions.
Actual Behavior:
When I click on a menu item in our screen, it will initiate a re-rendering of the toolbar. Moreover, the context menu is used as a composite component in the screen. But, the context menu item generates following error.
javax.el.MethodNotFoundException: /xhtml/screen/toolbar.xhtml.
listener="#{cc.attrs.someClass.onPreRenderToolbar}": Method not found: class
customComponent.onPreRenderToolbar(javax.faces.event.ComponentSystemEvent)
The problem is that it initiates the onPreRenderToolbar method on the “someClass” rather than the toolbar itself (this did not happen for PF 6.2.2 and earlier).
XHTML:
<h:form id="form" rendered="#{not (param['toolbar'] eq 'false') }">
<p:menubar id="menuBar" model="#{cc.attrs.toolbar.model}">
<c:if test="#{not empty cc.attrs.toolbar}" >
<f:event type="preRenderComponent" listener="
{cc.attrs.toolbar.onPreRenderToolbar}"/>
</c:if>
</p:menubar>
</h:form>
The Context Menu is inside the "someClass" (which essentially is a form), while the toolbar is outside this component.
Someone have any input/suggestions on what could be changed between these two versions that could cause this issue?
I am working an primefaces application, I am using
Primefaces 5.x version, Jsf 2.x
which has tabview
in one of the tabs I have command button, by clicking on it pdf export should happen.
For the first time click on button page is getting reloaded, from the second time on words request is going to bean page and downloading is working correctly.
this is my code snippet for command button :
<h:form id="mainForm">
<p:tabView id="myId" activeIndex="#{bean.currentTabIndex}" dynamic="true" cache="false">
<p:tab title="vehicle" id="vehId" styleClass="panelBack">
<h:form id="exportForm">
// some code
<p:commandButton value="export" process="#this" actionListener="# {bean.export()}" ajax="false" id="exportButton" />
</h:form>
</h:form>
If I make dynamic = false, it's working. I mean after clicking export button request is going to bean class, export is working.
What would be the problem? Can somebody help me?
Thank you
Yes your problem is most likely nested that is not allowed in JSF.
I am developing a project with Primefaces 5.1 and JSF 2.2.
In my project, I used dialog component to show some details to the user's.
When I drag the dialog into the top of the browser screen when browser scroll is down, its getting hide behind the browser screen after that can not close the dialog box.
Here, I added a sample code.
Please, help me to control the behind screen hiding.
Sample Code:
<h:body>
<h:form>
<p:panel header="Test" style="height:1500px;">
<p:commandButton value="Click" oncomplete="PF('dialogBoxId').show();"/>
</p:panel>
</h:form>
<p:dialog header="Alert" id="dialogBoxId" widgetVar="dialogBoxId"/>
</h:body>
The scenario is like this:
There is a datatable with many rows and each row contains an inputtext, there is a keypad outside the table, when user click a button in the keypad, the inputtext within the selectedRow would be updated, I want it to be onfocus so user can also use keyboard to input further texts.
I used p:commandButton to be the keypad button with use ajax submit to set selectedItem in bean and update the datatable to make the inputtext change, but after that, the focus is either lost or on the first inputtext of the page.
I am using primeface 3.4.
The codes go something like this:
<p:dataTable id="datatable1" var="item" value="#{bean.itemlist}" rowKey="#{item.id}" rowIndexVar="rowIndex"
widgetVar="datatableVar" selection="#{bean.selectedItem}" selectionMode="single">
<p:column>
<p:inputText id="name" value="#{bean.selectedItem.name}"
onfocus="datatableVar.unselectAllRows();datatableVar.selectRow(#{rowIndex})" >
</p:column>
...
</p:dataTable>
<p:commandButton value="1" update="datatable1" id="bt1"
actionListener="#{bean.appendItem('1')}" />
I guest I could use oncomplete event of p:commandButton to set the inputtext focus, but there seems no client side API in p:dataTable to get the selected Row.
I ended up using jQuery selector to select that inputText. In the rendered html code,the selected row(tr) has an attributed "aria-selected='true'".
The JS code goes:
var ele=$($("[aria-selected='true']").find('input').get(0));
The ele is a jQuery component that I can operate with, like ele.focus() or ele.keyup()
I have a Primefaces JSF view myView.xhtml with a form (with id 'myformID') and datatable (with id 'myDataTableId') in it. I also have a dialog box (myDialog.xhtml). I am including the myDialog.xhtml in myView.xhtml. When we click on the commandButton in 'myDialog.xhtml', it will update a datatable after executing the method specified in action listener. I am updating the datatable with update=":myFormId:myDataTableId"and it is working fine.
But I would like to use the same dialog in different view. The form id and datatable id are different in that view. So, how can I reuse the dialog and update datatables with different id's (currently I am creating one more dialog by duplicating the code and changed the value in the update attribute of commandButton accordingly)?
You can pass parameters with ui:include example :
master.xhtml
<ui:include src="include.xhtml">
<ui:param name="customId" value="4567" />
</ui:include>
include.xhtml
<ui:composition>
<p:dialog id="#{customId}" ...>
</p:dialog>
</ui:composition>