TieredMenu and calendar date selection in primefaces - primefaces

I have a tiered menu with a calendar date selector in it. I want calendar popup to be closed after selection but not tiered menu. But when I select a date from calendar popup, tiered menu closes instead of calendar popup.Is there a way to get desired behaviour?
<p:commandButton id="advancedSearchBtn" icon="fa fa-caret-down" value="" type="button" />
<p:tieredMenu overlay="true" trigger="advancedSearchBtn" my="left top" at="left bottom" >
<p:menuitem>
<p:panel >
<h:outputText style="color:black" value="Content" />
<p:inputText value="#{searchBean.searchContent}" />
<br/>
<br/>
<h:outputText value="Author" />
<p:inputText value="#{searchBean.searchAuthor}" />
<br/>
<br/>
<h:outputText value="Başlangıç Tarihi" />
<p:calendar value="#{searchBean.startDate}"
pattern="MM/dd/yyyy HH:mm"
style="width:20px;"/>
<br/>
<br/>
<h:outputText value="Bitiş Tarihi" />
<p:calendar value="#{searchBean.finishDate}"
pattern="MM/dd/yyyy HH:mm"
style="width:20px;"/>
</p:panel>
</p:menuitem>

Related

Update a data table after click button with primefaces

I have a dataTable, saving button, form.
When I click on the save button, a confirm dialog is shown with two choices: "yes" or "no".
My problem is when I click "yes" to confirm saving my datable is not updated.
I want to show the data in my DataTable without refreshing the page.
<p:commandButton value="#{msg['Save']}" icon="ui-icon-disk"
actionListener="#{cashMvtView.saveCashMvt()}">
<p:confirm header="Confirmation" message="Voulez-vous enregistrer ces informations ?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" >
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" update="form2" >
</p:commandButton>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
the Datatable code:
<h:form id="form2">
<p:accordionPanel activeIndex="0">
<p:tab title="Recherche" id="tabRech">
<p:dataTable var="cashMvt" value="#{cashMvtView.listeFilteredCashMvt}"
selectionMode="single" filteredValue="#{cashMvtView.listeFilteredCashMvt}"
selection="#{cashMvtView.selectedCashMvt}"
rowKey="#{cashMvt.id}" tableStyle="width:auto"
paginator="true" widgetVar="tabRecherche" id="tabRecherche"
paginatorPosition="bottom" rows="14"
paginatorTemplate="{Exporters} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
{RowsPerPageDropdown} {JumpToPageDropdown} {Controle}"
>
<p:ajax event="rowSelect" listener="#{cashMvtView.onRowSelect}" update="form form2" id="ajaxRS" />
<f:facet name="{Controle}" id="facetControle">
<p:commandButton id="toggler" type="button" value="Column" icon="ui-icon-calculator" style="float:right; width: 150px;"/>
<p:columnToggler datasource="tabRecherche" trigger="toggler" id="ccc" />
</f:facet>
<p:column style="white-space: nowrap" headerText="#{msg['NumMvt']}" sortBy="#{cashMvt.id}" ><h:outputText value="#{cashMvt.id}" /> </p:column>
<p:column style="white-space: nowrap" headerText="#{msg['CatMvt']}" sortBy="#{cashMvt.category}" ><h:outputText value="#{cashMvt.category}" /> </p:column>
<p:column style="white-space: nowrap" headerText="#{msg['mvtReference']}" sortBy="#{cashMvt.mvtReference}" ><h:outputText value="#{cashMvt.mvtReference}" /> </p:column>
<p:column style="white-space: nowrap" headerText="#{msg['Status']}" sortBy="#{cashMvt.stat}" ><h:outputText value="#{cashMvt.stat}" /> </p:column>
<p:column style="white-space: nowrap" headerText="#{msg['mvtCode']}" sortBy="#{cashMvt.mvtCode}" ><h:outputText value="#{cashMvt.mvtCode}" /> </p:column>
You should add update="tabRecherche" to your <p:commandButton tag:
<p:commandButton value="#{msg['Save']}"
icon="ui-icon-disk"
actionListener="#{cashMvtView.saveCashMvt()}"
update="tabRecherche"
>
<p:confirm header="Confirmation"
message="Voulez-vous enregistrer ces informations ?"
icon="ui-icon-alert" />
</p:commandButton>

Edit data in Primefaces dialog

How I can edit data in form? I have this Primefaces dialog which hI wants to use to edit data.
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty systemusers.selectedSystemUser}" columnClasses="label,value">
<h:outputText value="Username" />
<h:outputText value="#{systemusers.selectedSystemUser.username}" />
<h:outputText value="Last Login" />
<h:outputText value="#{systemusers.selectedSystemUser.lastLogin}" />
.........
<h:outputText value="Action" />
<h:outputText value="Download Delete" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
Firstly you would need to have an <h:form /> component inside of the <p:dialog /> component tags. You would also need to change the outputText components to that of inputText.
You could use a <p:commandButton to confirm and persist the input. For example:
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" appendTo="#body">
<h:form id="dialogForm">
<p:outputLabel for="username" value="Username">
<p:inputText id="username" value="#{systemusers.selectedSystemUser.username}" required="true" requiredMessage="Value is required" label="Username" />
....
<p:commandButton value="Submit" update=":mainForm" actionListener="#{beanName.updateData}" oncomplete="PF('cardDialog').hide()" />
<p:commandButton value="Cancel" type="button" onclick="PF('cardDialog').hide()" />
</h:form>
</p:dialog>

Primefaces Calendar Style Issue

I am using primefaces calendar in my project and i placed p:spinner
under calendar component.When ever i click the calendar component it
will pop up and shows date that time P:spinner component also appears
inside the calendar.
i am using primefaces 5.1 version.
This is the Calendar and p:spinner source code,
<h:panelGrid columns="3">
<p:calendar id="locoutPeriodStartDateCalendarId"
yearRange="c-70:" showButtonPanel="true"
mindate="#{User.accountValidityStartDate}"
value="#{User.lockoutPeriodStartDate}"
pattern="dd/MM/yyyy HH:mm" navigator="true"
showOn="button" mode="popup">
<p:ajax update="panelId"/>
</p:calendar>
<h:outputLabel value="TO:" />
<p:calendar id="lockoutPeriodEndDateCalendarId"
value="#{User.lockoutPeriodEndDate}"
mindate="#{User.accountValidityStartDate}"
pattern="dd/MM/yyyy HH:mm"
yearRange="c-70:"
showButtonPanel="true"
showOn="button"
navigator="true"
mode="popup">
<p:ajax update="panelId"/>
</p:calendar>
</h:panelGrid>
spinner,
<h:outputLabel value="workHoursLabel:"/>
<h:panelGrid columns="4">
<h:panelGrid columns="3">
<p:spinner id="workingHourStartField"
value="#{User.workingHourStartHour}"
max="23"
min="0"
size="2"
disabled="#{User.fieldsDisabled}" />
<p:spinner id="workingHourStartMinute"
value="#{User.workingHourStartMinute}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourStartSecond"
value="#{User.workingHourStartSecond}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<h:outputText value="(HH)" />
<h:outputText value="(MM)" >
<h:outputText value="(SS)" />
</h:panelGrid>
<h:outputLabel value="To:"/>
<h:panelGrid columns="3">
<p:spinner id="workingHourEndHour"
value="#{User.workingHourEndHour}"
max="23" min="0" size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourEndMinute"
value="#{User.workingHourEndMinute}"
max="59"
min="0"
size="2"
disabled="#{User.fieldsDisabled}"/>
<p:spinner id="workingHourEndSecond"
value="#{User.workingHourEndSecond}"
max="59"
min='0'
size="2"
disabled="#{User.fieldsDisabled}"/>
<h:outputText value="(HH)"/>
<h:outputText value="(MM)"/>
<h:outputText value="(SS)"/>
</h:panelGrid>
<p:commandLink id="clearButtonId"
styleClass="ui-icon ui-icon-closethick"
action="#{User.clearWorkHourAction}"
disabled="#{User.fieldsDisabled}"
update="panelId"
title="Click to clear">
</p:commandLink>
</h:panelGrid>
The following image will show the issue.
after click calendar it will look like this,
Please help me how to fix this problem.Thanks in advance.

Primefaces: the commandButton inside the rowexpander not perform the action at first click

I have a problem on a page with primefaces framwork, this is my fragment code:
<p:rowExpansion rendered="#{riepilogoExtra.approvato == '0'}" >
<p:panelGrid columns="3" style="width:50px; border: 0px" >
<h:outputText value="Ore" />
<h:outputText value="Minuti" />
<h:outputText value="Note" />
<p:inputText id="QTA_MASSIMAHH" value="#{riepilogoExtra.qtaMassimaHH}" size="1" />
<p:inputText id="QTA_MASSIMAMM" value="#{riepilogoExtra.qtaMassimaMM}" size="1" />
<p:inputTextarea id="NOTE" rows="2" cols="20" value="#{riepilogoExtra.note}" />
</p:panelGrid>
<p:commandButton
ajax="true"
id="update"
value="Salva"
update="#form"
action="#{riepilogoExtraResponsabileManagedBean.update(riepilogoExtra)}"
icon="ui-icon-check"
styleClass="ui-priority-primary" />
</p:rowExpansion>
hy,
if you have the problem for button don't work in the first click you must verify your console javascript you have error, resolve the problem and all is ok :)

Primefaces Datagrid: Dialog not getting updated with selected values

I have an issue with primefaces datagrid.I am trying to update the dialog box with the selected values on click of p:commandLink.
The Dialog doesnt display any values initially but it gets updated with the previously selected values when i refresh the page and click on commandLink.
I am using primefaces-2.2.1 on JBoss 4.3.0.Any help would be appreciated.
<p:column>
<p:panel header="#{loc.loc_details}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/user/xyz/resources/images/#{loc.loc_details}.jpg"/>
<h:outputText value="#{loc.locality}" />
<h:outputText value="#{loc.city}" />
<h:outputText value="#{loc.state}" />
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}"
target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
<p:dialog header="Loc Detail" widgetVar="locDialog" modal="true">
<p:outputPanel id="locDetail" style="text-align:center;" layout="block">
<h:panelGrid id="locDetailGrid" columns="2" cellpadding="5">
<h:outputLabel for="loc_details" value="Locality Details :" />
<h:outputText id="loc_details" value="#{tutorialsBean.selectedLocality.loc_details}" />
<h:outputLabel for="city" value="City: " />
<h:outputText id="city" value="#{tutorialsBean.selectedLocality.city}" />
<h:outputLabel for="state" value="State: " />
<h:outputText id="state" value="#{tutorialsBean.selectedLocality.state}" />
<h:outputText styleClass="text_normal" value="First Name" />
<p:inputText id="fnameText" value="#{tutorialsBean.firstName}" />
<h:outputText styleClass="text_normal" value="Last Name" />
<p:inputText id="lnameText" value="#{tutorialsBean.lastName}" />
<h:outputText styleClass="text_normal" value="Email" />
<p:inputText id="emailText" value="#{tutorialsBean.email}" />
<p:commandButton id="searchButton"
value="Submit" action="#{tutorialsBean.submitValues}"
styleClass="button" />
</h:panelGrid>
</p:outputPanel>
in you commandLink add the update and process attributes in your dialog to refresh the information.
like this:
Put the ID in dialog:
<p:dialog header="Loc Detail" id="locDialog" widgetVar="locDialog" modal="true">
Put the Update to dialog:
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" update="locDialog" process="#this" ajax="true" partialSubmit="true" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}" target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>