first name and last name is more than 20 characters the table is going out side.
I am using the filterstyle how to overcome from this problem
please help me....
<p:dataTable var="societymember" id="updateMember" selectionMode="single"
value="#{addPresidentform.tableDataList}" rowIndexVar="row" widgetVar="searchMember"
rowKey="#{societymember.firstName}" paginator="true" rows="20" rowsPerPageTemplate="20,50,100"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink} {RowsPerPageDropdown}" style="width:920">
<!-- selection="#{addPresidentform.tableData}" -->
<f:facet name="header" >
<p:spacer width="20" />
<div style="float: right;margin-top: -22px">
<h:outputText value="#{societyLabels.searchAllFields}" />
<p:inputText id="globalFilter" onkeyup="searchMember.filter();"/>
</div>
</f:facet>
<p:column headerText="#{societyLabels.SerialNo}" width="5">
<h:outputText value="#{(row + 1)}" />
</p:column>
<p:column id="firstName" headerText="#{societyLabels.Firstname}" filterBy="firstName" filterMatchMode="contains" filterStyle="width: 40px">
<h:outputText value="#{societymember.firstName}" />
</p:column>
<p:column headerText="#{societyLabels.Lastname}" filterBy="lastName" filterMatchMode="contains" filterStyle="width: 40px">
<h:outputText value="#{societymember.lastName}" style=""/>
</p:column>
<p:column id="mobileNo" headerText="#{societyLabels.mobileNo}" filterBy="mobileNo" filterStyle="width: 50px" filterMatchMode="contains" >
<h:outputText value="#{societymember.mobileNo}" />
</p:column>
<p:column headerText="#{societyLabels.unitblock}" filterBy="block" filterMatchMode="contains" filterStyle="width: 20px">
<h:outputText value="#{societymember.block}" />
</p:column>
<p:column headerText="#{societyLabels.floorNumber}" filterBy="floor" filterMatchMode="contains" filterStyle="width:20px">
<h:outputText value="#{societymember.floor}" />
</p:column>
<p:column headerText="#{societyLabels.unitname}" filterBy="units" filterMatchMode="contains" filterStyle="width: 20px">
<h:outputText value="#{societymember.units}" />
</p:column>
</p:dataTable>
<h:outputText>
<b:truncate length="10"/>
</h:outputText>
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
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.ListDriverTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form id="driverForm">
<h:panelGrid id="messagePanel" >
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGrid>
<h:panelGrid >
<p:dataTable value="#{driverController.items}" lazy="true" selectionMode="single" paginator="true" rows="10" paginatorPosition="bottom" var="item" id="itemTable" rowKey="#{item.id}" styleClass="ui-datatable-hor-scroll">
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_surname}"/>
</f:facet>
<h:outputText value="#{item.surname}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_names}"/>
</f:facet>
<h:outputText value="#{item.names}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_idNumber}"/>
</f:facet>
<h:outputText value="#{item.idNumber}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_driverCode}"/>
</f:facet>
<h:outputText value="#{item.driverCode}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_active}"/>
</f:facet>
<h:outputText value="#{item.active}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_type}"/>
</f:facet>
<h:outputText value="#{item.type}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_cellNumber}"/>
</f:facet>
<h:outputText value="#{item.cellNumber}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_createdDate}"/>
</f:facet>
<h:outputText value="#{item.createdDate}">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
</h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDriverTitle_whs}"/>
</f:facet>
<h:outputText value="#{item.whs.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<p:commandButton action="#{driverController.prepareView}" value="#{bundle.ListDriverViewLink}" ajax="false" immediate="false">
<f:setPropertyActionListener target="#{driverController.selectedDriver}" value="#{item}"/>
</p:commandButton>
<h:outputText value=" "/>
<p:commandButton action="#{driverController.prepareEdit}" value="#{bundle.ListDriverEditLink}" ajax="false" immediate="false">
<f:setPropertyActionListener target="#{driverController.selectedDriver}" value="#{item}" />
</p:commandButton>
<h:outputText value=" "/>
<p:commandButton action="#{driverController.destroy}" value="Delete" ajax="false" immediate="false">
<f:setPropertyActionListener target="#{driverController.selectedDriver}" value="#{item}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:panelGrid>
<br />
<p:commandButton action="#{driverController.prepareCreate}" value="#{bundle.ListDriverCreateLink}" ajax="false"/>
<p:menuButton value="Download Documents">
<p:menuitem immediate="true" process="#none" ajax="false">
<h:commandLink target="_blank">
<img src="#{resource['images/excel-icon.png']}" style="border: none; width: 15px; height: 15px;"/>
<p:dataExporter type="xls" target="itemTable" fileName="DriversList" pageOnly="true"/>
<span>Current page</span>
</h:commandLink>
</p:menuitem>
<p:menuitem immediate="true" process="#none" ajax="false">
<h:commandLink target="_blank">
<img src="#{resource['images/excel-icon.png']}" style="border: none; width: 15px; height: 15px;"/>
<p:dataExporter type="xls" target="itemTable"fileName="DriversList" p/>
<span>All pages</span>
</h:commandLink>
</p:menuitem>
</p:menuButton>
</h:form>
</ui:define>
</ui:composition>
When I download an excel file, the buttons from the table are also downloaded. What can I do to exclude them.
If you need more explanation please feel free to ask me. I need the best solution. Thank you
You can exclude columns, which should not be exported by using:
<p:column exportable="false">
I need create a list of Phones in na and submit before.
In my firt try the object came empty and the list shows a list of null objets
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" immediate="true" value="adicionar" update=":messageGrowl listPhones"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
in my second try the object was filled but the Litt does update
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" partialSubmit="true" process="gridPhone, listPhones" value="adicionar" update=":messageGrowl"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
I have try sereval forms but dont work
:(
I had implement editable p:datatable. After I click on the edit button and change the value, the Edit and Cancel button is not working, and the row just keep open to edit. May I know any mistake I am facing?
The code is
<p:panel>
<p:messages id="tableMessages" autoUpdate="true" closable="true" />
<p:dataTable value="#{bean.dataList}" var="data"
id="table" editable="true">
<p:ajax event="rowEdit" listener="#{bean.onRowEdit}"/>
<p:ajax event="rowEditCancel" listener="#{bean.onRowCancel}"/>
<p:column>
<f:facet name="header">
<h:outputLabel value="ID" />
</f:facet>
<h:outputText value="#{data.id}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Name" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{data.name}" />
</f:facet>
<f:facet name="input">
<p:inputText id="editName" value="#{data.name}">
<f:validateLength minimum="3" maximum="30" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Gender" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{data.gender}" />
</f:facet>
<f:facet name="input">
<p:inputText id="editGender" value="#{data.gender}">
<f:validateLength minimum="3" maximum="30" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Edit" />
</f:facet>
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panel>
I would like to have something like this, a column and inside this column I can have one editor based on another configuration, but when I have tried this code p:column doesnt render the p:cellEditor.
<p:column headerText="Tipo">
<ui:fragment rendered="#{_field.isType('String')}">
<p:cellEditor>
<f:facet name="output"> <h:outputText value="#{_field.sValue}" rendered="#{_field.isType('String')}" /></f:facet>
<f:facet name="input"> <p:inputText value="#{_field.sValue}" style="width:100%" rendered="#{_field.isType('String')}" /></f:facet>
</p:cellEditor>
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Integer')}">
<p:cellEditor>
<f:facet name="output"> <h:outputText value="#{_field.iValue}" rendered="#{_field.isType('Integer')}" /> </f:facet>
<f:facet name="input"> <p:inputText value="#{_field.iValue}" rendered="#{_field.isType('Integer')}" style="width:100%" /></f:facet>
</p:cellEditor>
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Ativo')}">
<p:cellEditor>
<f:facet name="output"> <h:outputText value="#{_field.aValue.nome}" rendered="#{_field.isType('Ativo')}" /></f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{_field.aValue}" style="width:100%" rendered="#{_field.isType('Ativo')}">
<f:selectItems value="#{ativoBean.listaAtivos}" var="_asset" itemLabel="#{_asset.nome}" itemValue="#{_asset}" />
<f:converter converterId="ativoConverter" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</ui:fragment>
</p:column>
It works
<p:column headerText="Tipo">
<p:cellEditor>
<f:facet name="output">
<ui:fragment rendered="#{_field.isType('String')}">
<h:outputText value="#{_field.sValue}" rendered="#{_field.isType('String')}" />
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Integer')}">
<h:outputText value="#{_field.iValue}" rendered="#{_field.isType('Integer')}" />
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Ativo')}">
<h:outputText value="#{_field.aValue.nome}" rendered="#{_field.isType('Ativo')}" />
</ui:fragment>
</f:facet>
<f:facet name="input">
<ui:fragment rendered="#{_field.isType('String')}">
<p:inputText value="#{_field.sValue}" style="width:100%" rendered="#{_field.isType('String')}" />
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Integer')}">
<p:inputText value="#{_field.iValue}" rendered="#{_field.isType('Integer')}" style="width:100%" />
</ui:fragment>
<ui:fragment rendered="#{_field.isType('Ativo')}">
<p:selectOneMenu value="#{_field.aValue}" style="width:100%" rendered="#{_field.isType('Ativo')}">
<f:selectItems value="#{ativoBean.listaAtivos}" var="_asset" itemLabel="#{_asset.nome}" itemValue="#{_asset}" />
<f:converter converterId="ativoConverter" />
</p:selectOneMenu>
</ui:fragment>
</f:facet>
</p:cellEditor>