I have done a dataTableFilter to create edit and delete items with search. Everything works fine until I do "Search as you Type", but when I add an item after doing a "Search as you type", the item is added in the database and the view, but if I click edit aginst it, it shows the values below it and when I press cancel, the added value disappears ! Again if I do search as you type the new item starts appearing.
I have been struggling with this for long, are there limitations in JSF primefaces ?
<p:dataTable id="itemTable" var="row"
value="#{itemBean.allitems}"
emptyMessage=" No itemue found" styleClass="borderless"
paginator="true" rows="10" paginatorPosition="bottom"
style="font-family:'Lato';font-size:12px;border:1px solid #d7d9b2"
widgetVar="cataTable"
filteredValue="#{itemBean.filtereditems}">
<f:facet name="header">
<div class="row">
<p:outputPanel>
<div class="col-lg-9"
style="margin-top: 6px; text-align: right; font-weight: bold">
<h:outputText value="Search all fields : " />
</div>
<div class="col-lg-3">
<p:inputText id="globalFilter"
onkeypress="if (event.keyCode == 13) {return false; }"
onkeyup="PF('cataTable').filter()"
styleClass="form-control txtFieldInput"
placeholder="Enter keyword" />
</div>
</p:outputPanel>
</div>
</f:facet>
<p:column headerText="itemue Name" filterBy="#{row.name}"
filterStyle="display:none" sortBy="name" filterMatchMode="contains"
style="width:8%;text-align: center">
<h:outputText value="#{row.name}" />
</p:column>
<p:column headerText="No.of subitems"
style="width:8%;text-align: center">
<h:outputText value="#{row.totalsubitems}" />
</p:column>
<p:column headerText="Description"
style="width:8%;text-align: center">
<h:outputText value="#{row.description}" />
</p:column>
<p:column headerText="Date(MM/DD/YYYY)"
style="width:8%;text-align: center">
<h:outputText value="#{row.toDate}">
</h:outputText>
</p:column>
<p:column headerText="Base URL" style="width:8%;text-align: center">
<h:outputText value="#{row.itemurl}" />
</p:column>
<p:column style="width:5%;text-align: center">
<f:facet name="header">Action</f:facet>
<p:commandButton ajax="true" icon="ui-icon-pencil" title="Edit"
update=":itemForm:updateitemData"
oncomplete="PF('updateitem').show()">
<f:setPropertyActionListener value="#{row}"
target="#{itemBean.selecteditem}" />
</p:commandButton>
<p:commandButton ajax="true" icon="ui-icon-trash" title="Deactive"
style="background-color:green" rendered="#{row.isActive == 'Yes'}"
actionListener="#{itemBean.deleteitem(row)}"
oncomplete="PF('itemDelete').show()">
</p:commandButton>
<p:commandButton ajax="true" icon="ui-icon-trash" title="Active"
style="background-color:red" rendered="#{row.isActive == 'No'}"
actionListener="#{itemBean.activateitem(row)}"
oncomplete="PF('activateitem').show()">
</p:commandButton>
</p:column>
</p:dataTable>
Related
I have primefaces datatable. The paginator is fixed to the bottom of the window. To achieve this I have manipulated the original css selector which you can see below. I would like to achieve that only the table rows are scrolling. The table header and the paginator should stay as they are.
Datatable View
<p:dataTable
id="dtaInternationalization"
binding="#{internationalizationController.dtaHdrLang}"
value="#{internationalizationController.itemsHdrLang}"
var="item"
widgetVar="widInternationalization"
style="margin-bottom:20px"
selectionMode="multiple"
liveScroll="true"
scrollable="true"
scrollHeight="665"
selection="#{internationalizationController.selectedItemsHdrLang}"
filteredValue="#{internationalizationController.filteredItemsHdrLang}"
sortMode="multiple"
paginator="true"
paginatorPosition="bottom"
paginatorAlwaysVisible="true"
rows="25"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{totalRecords} record(s)"
rowsPerPageTemplate="25,50,75"
rowKey="#{item.pk}"
resizableColumns="true"
liveResize="true"
draggableColumns="true">
<!-- DATATABLE HEADER SECTION -->
<f:facet name="header">
<p:toolbar styleClass="fw-panel-title-header">
<p:toolbarGroup styleClass="fw-toolbar-group-left">
<p:outputLabel id="lblPageTitle"
value="Edit Datatable Settings" styleClass="fw-title-bar" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:outputLabel value="Global Search: "
styleClass="fw-global-search" />
<p:inputText id="globalFilter"
onkeyup="PF('widTableView').filter()" style="width:250px"
placeholder="Enter Keyword" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:commandButton id="cbProperties" icon="fa fa-gear" title="View Settings" />
<p:commandButton id="refreshButton" value="Refresh"
icon="fa fa-refresh"
actionListener="#{internationalizationController.refresh}"
update="dtaInternationalization" />
<p:commandButton id="addButton" value="Add" icon="fa fa-plus"
actionListener="#{internationalizationController.addLanguage}"
oncomplete="PF('widAddLanguage').show()" />
<p:commandButton id="deleteButton" value="Delete"
icon="fa fa-remove"
disabled="#{empty internationalizationController.selectedItemsHdrLang}" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:ajaxStatus
style="width:20px;height:20px;position:relative;margin-right:15px;">
<f:facet name="start">
<i class="fa fa-circle-o-notch fa-spin ajax-loader"
aria-hidden="true"></i>
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right"
style="margin-right:15px">
<p:messages id="msgs" showDetail="true" closable="false" styleClass="fw-messages-title-bar" showSummary="false" showIcon="false" />
</p:toolbarGroup>
</p:toolbar>
</f:facet>
<!-- DATATABLE COLUMN SECTION -->
<p:column headerText="Image" styleClass="center" width="50">
<o:graphicImage value="#{item.flagImageSmall}" dataURI="true"
rendered="#{!empty item.flagImageSmall}" />
</p:column>
<p:column headerText="Default" styleClass="center"
filterBy="#{item.languageDefault}" filterMatchMode="equals"
sortBy="#{item.languageDefault}" width="110">
<f:facet name="filter">
<p:selectOneButton
onchange="PF('widInternationalization').filter()"
styleClass="custom-filter">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="True" itemValue="true" />
<f:selectItem itemLabel="False" itemValue="false" />
</p:selectOneButton>
</f:facet>
<p:outputLabel rendered="#{item.languageDefault}">
<i class="fa fa-check" />
</p:outputLabel>
</p:column>
<p:column headerText="Active" styleClass="center"
filterBy="#{item.activeFlag}" filterMatchMode="equals"
sortBy="#{item.activeFlag}" width="110">
<f:facet name="filter">
<p:selectOneButton
onchange="PF('widInternationalization').filter()"
styleClass="custom-filter">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="True" itemValue="true" />
<f:selectItem itemLabel="False" itemValue="false" />
</p:selectOneButton>
</f:facet>
<p:outputLabel rendered="#{item.activeFlag}">
<i class="fa fa-check" />
</p:outputLabel>
</p:column>
<p:column headerText="Code" styleClass="center" width="90"
filterBy="#{item.languageCode}" filterMatchMode="contains"
sortBy="#{item.languageCode}">
<h:outputText value="#{item.languageCode}" />
</p:column>
<p:column headerText="Language" filterBy="#{item.languageName}"
filterMatchMode="contains" sortBy="#{item.languageName}">
<h:outputText value="#{item.languageName}" />
</p:column>
<p:column headerText="Created" filterBy="#{item.createDate}"
filterMatchMode="contains" sortBy="#{item.createDate}" width="6%">
<h:outputText value="#{item.createDate}">
<f:convertDateTime
locale="#{parameterSessionController.localeCode}" type="localDateTime"
dateStyle="medium" timeStyle="medium" />
</h:outputText>
</p:column>
<p:column headerText="Created by" filterBy="#{item.createUser}"
filterMatchMode="contains" sortBy="#{item.createUser}" width="6%">
<h:outputText value="#{item.createUser}" />
</p:column>
<p:column headerText="Modified" filterBy="#{item.modifyDate}"
filterMatchMode="contains" sortBy="#{item.modifyDate}" width="6%">
<h:outputText value="#{item.modifyDate}">
<f:convertDateTime
locale="#{parameterSessionController.localeCode}" type="localDateTime"
dateStyle="medium" timeStyle="medium" />
</h:outputText>
</p:column>
<p:column headerText="Modfied by" filterBy="#{item.modifyUser}"
filterMatchMode="contains" sortBy="#{item.modifyUser}" width="6%">
<h:outputText value="#{item.modifyUser}" />
</p:column>
<p:ajax event="rowDblselect"
listener="#{internationalizationController.editLanguage}"
oncomplete="PF('widLanguage').show()" />
<p:ajax event="rowSelect" update="deleteButton" />
<p:ajax event="rowUnselect" update="deleteButton" />
</p:dataTable>
The paginator css selectorI have manipulated as follow:
body .ui-datatable .ui-paginator {
padding: 6px 12px;
border-style: none;
border-top: solid 2px #9fd037;
position: fixed;
bottom: 0px;
width: -webkit-fill-available;
z-index: 1;
}
Many Thanks in Advance
I want to show the details of a person with a dialog as shown on Facebook when the mouse is placed on a person's name.
I am using dialog framework in primefaces.
The dialog should display data that must be loaded when the mouse is placed on the person.
The problem is the dialog position:
<p:dataTable filterDelay="700" reflow="true" emptyMessage="No se encontraron elementos" widgetVar="tblist"
id="dataTableList" var="item" paginator="true" paginatorPosition="bottom"
rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}">
<f:facet name="header">
Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
</f:facet>
<p:ajax event="filter" oncomplete="handleLoadStart();"/>
<p:column style="width: 50px">
<p:graphicImage style="border-radius: 50%" alt="image" id="fotoPer" value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
<f:param name="personId" value="#{item.idPersona}" />
</p:graphicImage>
</p:column>
<p:column width="100%" headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
<p:commandLink ajax="false" id="pict" action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="showPersonDetail();">
<h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
</p:commandLink>
</p:column>
</p:dataTable>
<p:remoteCommand id="rcomperson" name="showPersonDetail" process="#this"
actionListener="#{listadoPersonasMB.showPersonDetail}"
update=":form2:perDeta" oncomplete="PF('carOP').show('#{component.clientId}')"
/>
<p:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade">
<p:outputPanel id="perDeta">
<ui:include src="perDialog.xhtml" />
</p:outputPanel>
</p:overlayPanel>
I finally found the solution with overlayPanel, remoteCommand and some javascript code
xhtml
<p:dataTable filterDelay="700" reflow="true" emptyMessage="No se encontraron elementos" widgetVar="tblist"
id="dataTableList" var="item" paginator="true" paginatorPosition="bottom"
rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}">
<f:facet name="header">
Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
</f:facet>
<p:column style="width: 50px">
<p:graphicImage style="border-radius: 50%" alt="image" id="fotoPer" value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
<f:param name="personId" value="#{item.idPersona}" />
</p:graphicImage>
</p:column>
<p:column width="100%" headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
<p:commandLink ajax="false" action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="loadPersonDetalles('#{component.clientId}', #{item.idPersona});">
<h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
</p:commandLink>
</p:column>
<p:column headerText="Edad" sortBy="#{item.calculaEdad()}" style="text-align: right; width: 60px" sortFunction="#{utilMB.ordenarEnteros}">
<h:outputText value="#{item.calculaEdad()}"/>
</p:column>
<p:column filterBy="#{item.miembro eq true ? 'Sí' : 'No'}" headerText="Membresía" filterMatchMode="contains" style="width: 220px">
<h:outputText value="#{item.miembro eq true ? 'Sí' : 'No'}" />
<span> <p:commandButton rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}" icon="fa fa-refresh Fs16 white" title="Cambiar"
actionListener="#{listadoPersonasMB.selectToSetMember(item)}" oncomplete="PF('newDialog').show()"/> </span>
</p:column>
<p:column style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">
<p:commandButton icon="fa fa-pencil Fs16 white" title="Modificar"
action="#{listadoPersonasMB.cargaPersonaModi(item.idPersona)}"/>
</p:column>
<p:column style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">
<p:commandButton icon="fa fa-trash Fs16 white" title="Dar Baja"
action="#{mBDeletePersona.detallesPersona(item.idPersona)}"/>
</p:column>
</p:dataTable>
<p:remoteCommand name="showPersonDetail" process="#this"
actionListener="#{listadoPersonasMB.showPersonDetail}"
update=":form2:perDeta" oncomplete="loadPanel();"/>
<p:overlayPanel widgetVar="carOP" my="right bottom" showEffect="fade" hideEffect="fade"
dismissable="true" hideEvent="onmouseout"
dynamic="true"
>
<p:outputPanel id="perDeta">
<ui:include src="perDialog.xhtml" />
</p:outputPanel>
</p:overlayPanel>
javascript code, send param to remoteCommand
<h:outputScript id="waypointScript" target="body">
var idcom = 0;
function loadPersonDetalles(idC, idPer) {
showPersonDetail([{name:'x', value:idPer}, {name:'y', value:20}]);
idcom = idC;
}
function loadPanel() {
PF('carOP').show(idcom);
}
</h:outputScript>
backingbean
public void showPersonDetail() {
try {
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
this.idPerSeledtToDialog = Integer.valueOf(params.get("x"));
} catch (Exception e) {
JsfUtil.addErrorMessage(e, "Error: filterListener() " + e.getMessage());
}
}
I need to print a treeTable's content. The problem is that not all columns are displayed/printed. The treeTable have 4 columns and only 2 are printed (truncating)
How to print the complete treeTable's content? Is possible to customize page layout (portrait/landscape)?
<p:commandButton value="Print"
type="button"
icon="fa fa-print">
<p:printer target="treeTable" />
</p:commandButton>
<p:treeTable id="treeTable"
value="#{myMB.root}"
var="obj"
resizableColumns="true"
style="width:100%">
<p:column headerText="Column Label 1" style="width:40%">
<h:outputText value="#{obj.label1}" />
</p:column>
<p:column headerText="Column Label 2" style="width:20%">
<h:outputText value="#{obj.label2}" />
</p:column>
<p:column headerText="Column Label 3" style="width:20%;text-align: center;">
<h:outputText style="float: center;" value="#{obj.label3}" />
</p:column>
<p:column headerText="Column Label 4" style="width:20%">
<h:outputText style="float: left;" value="U$" rendered="#{not empty obj.label4}" />
<h:outputText style="float: right;" value=" #{obj.label4}" rendered="#{not empty obj.label4}" />
</p:column>
Primefaces 5.3 and Wildfly 10
[]'s
so I am using the printer from Primefaces, but it can not find the id of the datatable im trying to print. Anyone know why? I have removed some code for clarity. I also got the printer working on a different site but its not working here
<p:outputPanel id="topPanel" style=" display:block; height: 24%; float: top">
<h:form>
<p:growl id="messages" showDetail="true" />
<p:toolbar style="width: 100%">
<f:facet name="right">
<div style="float: right">
<p:commandButton actionListener="#{s.save}" value="Bearbeiten">
<f:param name="Bearbeiten" value="10" />
</p:commandButton>
<p:commandButton value="Drucken" type="button" icon="ui-icon-print">
<p:printer target="datatable"/>
</p:commandButton>
</div>
</f:facet>
</p:toolbar>
</h:form>
</p:outputPanel>
<p:outputPanel id="datatable" style="height: 50%">
<ui:insert name="datatable" />
<p:dataTable var="item" value="" paginator="true" rows="10" selection="" id="Datatable">
<p:column style="width:16px;text-align:center"/>
<p:column headerText="ID">
<h:outputText value="" />
</p:column>
<p:column headerText="Nachname">
<h:outputText value="" />
</p:column>
<p:column headerText="Vorname">
<h:outputText value="" />
</p:column>
</p:dataTable>
</p:outputPanel>
Below is my code. Here the CommandButton action is not working and always moving the first
tab.
<h:head>
<title>Alert Input</title>
</h:head>
<h:body>
<h1 style="margin: auto;text-align: center">Fraud Alert Admin Page</h1>
<p:separator style="height:5px;background-color:black;"/>
<p:tabView id="tabs">
<p:tab id="alertInput" title="Enter Alert">
<h:form>
<p:growl id="submitMessage" showDetail="true" sticky="true"/>
<p:panel id="alertPanel">
<p:panelGrid columns="2" style="margin-bottom:10px">
<p:outputLabel for="sevLevel" value="Sev:" />
<p:selectOneMenu id="sevLevel" required="true" value="#{alertInputBean.alertSev}">
<f:selectItem itemLabel="Informational" itemValue="1"/>
<f:selectItem itemLabel="Warning" itemValue="2"/>
<f:selectItem itemLabel="Urgent" itemValue="3"/>
<f:selectItem itemLabel="Severe" itemValue="4"/>
</p:selectOneMenu>
<p:outputLabel for="alertName" value="Alert Name:"/>
<p:inputText id="alertName" required="true" label="Alert Name" value="#{alertInputBean.alertName}"/>
<p:outputLabel for="alertDescription" value="Alert Description:"/>
<p:inputText id="alertDescription" required="true" label="Description" value="#{alertInputBean.alertDesc}"/>
</p:panelGrid>
<p:toolbar>
<f:facet name="left">
<p:commandButton value="submit" actionListener="#{alertInputBean.submitAlert()}"
update="submitMessage" ajax="false">
</p:commandButton>
</f:facet>
<f:facet name="right">
<h:commandButton value="Reset">
<p:ajax update="alertPanel" resetValues="true"/>
</h:commandButton>
</f:facet>
</p:toolbar>
</p:panel>
</h:form>
</p:tab>
<p:tab id="alertExisting" title="Current Alerts">
<h:form id="form">
<p:dataTable id="allAlerts" var="alerts"
value="#{alertInputBean.retrieveAllAlerts()}"
emptyMessage="No alerts found with the given criteria."
selection="#{alertInputBean.selectedAlerts}"
rowKey="#{alerts.alertName}" scrollable="true" scrollHeight="250">
<f:facet name="header">
Current Alerts
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="Alert Severity">
<h:outputText value="#{alerts.sev}"/>
</p:column>
<p:column headerText="Alert Name">
<h:outputText value="#{alerts.alertName}"/>
</p:column>
<p:column headerText="Alert Description">
<h:outputText value="#{alerts.descrption}"/>
</p:column>
<p:column headerText="Creation Date">
<h:outputText value="#{alerts.createDate}"/>
</p:column>
<p:column headerText="Modify Date">
<h:outputText value="#{alerts.modifyDate}"/>
</p:column>
<p:column headerText="Enabled">
<h:outputText value="#{alerts.enabled}"/>
</p:column>
<f:facet name="footer">
<p:commandButton process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Update Selected" widgetVar="multiAlertDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
<p:outputPanel id="multiAlertUpdate" style="text-align: center">
<ui:repeat value="#{alertInputBean.selectedAlerts}" var="sAlerts">
<p:outputLabel value="#{sAlerts.sev}-#{sAlerts.alertName}" style="display: block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
</h:form>
</p:tab>
</p:tabView>
</h:body>
Below is the XHTML
I have the above code. The problem is whenever I click on the commandbutton I am redirected to the first tab. Intended onClick is not at all working.
First Command Button
It happens because you have defined the ajax attribute as false, and you are trying to call a method with actionListener which uses an ajax call.
Set ajax=true or just delete it (the default is true), and your page may work
If you don't want ajax behavior, use action instead of actionListener
Last Command Button
If the problem is in the last command button (please be more clear in the next time), you just have to define type=button, so it will work as a simple button.
<p:commandButton type="button" process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>