i have a realy strange behavior if i place components inside a datatable header.
Code for the Table
<p:dataTable id="groupTable" var="group" value="#{profile.user.groups}"
widgetVar="groupTable" rows="10" paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,20,40,80"
emptyMessage="Keine Einträge mit den gewünschten Kriterien gefunden"
filteredValue="#{groupView.filteredGroups}" sortMode="multiple"
resizableColumns="true" liveResize="true">
<f:facet name="header">
<h:outputText value="Zugeordnete Gruppen" />
<p:outputPanel style="float:left;">
<p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;" placeholder="Suche"/>
</p:outputPanel>
</f:facet>
<p:column headerText="Gruppenname" filterBy="#{group.name}"
sortBy="#{group.name}" filterMatchMode="contains"
filterStyle="display:none" style="width:150px">
<h:outputText value="#{group.name}"/>
</p:column>
<p:column headerText="Beschreibung" filterBy="#{group.beschreibung}"
sortBy="#{group.beschreibung}" filterMatchMode="contains"
filterStyle="display:none">
<h:outputText value="#{group.beschreibung}"/>
</p:column>
</p:dataTable>
you can find the generated HTML here jsfiddle
On the Page itself it looks like this:
So what is the problem with the code? why does the serach box destroy the table layout?
Okay i found it. Maybe it will help someday another facing the same Problem.
The Searchbox is to big in line with the Text. If i change the inputtext size and set the outputpanel inline it looks like it was intended.
<f:facet name="header">
<h:outputText value="Zugeordnete Gruppen" />
<p:outputPanel style="display:inline">
<p:inputText id="globalFilter" onkeyup="PF('groupTable').filter()" style="width:150px;height:10px;float:left" placeholder="Suche"/>
</p:outputPanel>
</f:facet>
Related
I am using primeface6.0, i have a datatable with data of 50 records and have paginator along with filter option, i am filtering data which does not exist in table and onclear boolean column is setting to false, below is the code.
<p:dataTable id="inventorytbl" value="#{inventorybean.inventoryList}"
var="inventory" rows="15" paginator="true"
paginatorPosition="bottom" pageLinks="5"
paginatorAlwaysVisible="false" widgetVar="inventoryWidget"
rowKey="#{inventory.code}"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<f:facet name="header">
<p:outputPanel>
<p:outputPanel>
<p:inputText id="globalFilter"
onkeyup="PF('inventoryWidget').filter()"
onkeypress="if (event.keyCode == 13) {return false; }"
style="width:150px;float: right;margin-left: 5px;"
placeholder=" Enter keyword" />
</p:outputPanel>
</p:outputPanel>
</f:facet>
<p:column headerText="Material Name" style="width:23%"
sortBy="#{inventory.materialName}"
filterBy="#{inventory.materialName}" filterMatchMode="contains"
filterStyle="display:none;visibility:hidden;">
<div title="#{inventory.materialName}">
#{inventory.materialName}</div>
</p:column>
// onfilter clearing button inside column getting disable(default to false)
<p:column style="width: 10%;text-align: -webkit-center;"
headerText="Action" filterBy="#{inventory.activeFlag}"
filterMatchMode="contains"
filterStyle="display:none;visibility:hidden;">
<p:commandButton id="musterupdatelnk"
action="edit"
disabled="#{not inventory.activeFlag}"
icon="fa fa-pencil-square-o"/>
</p:column>
I'm not sure if the built-in filter clear feature works properly, but I've ran into similar issue and have decided to create my own custom 'clear' button and placed it inside a column header.
<p:column style="width: 16px;" exportable="false">
<f:facet name="header">
<p:commandLink id="clearFilterLink" onclick="PF('WidgetVar').clearFilters();" styleClass="clear-filter-icon" />
<p:tooltip for="clearFilterLink" value="Clear Filters" trackMouse="true" position="right"/>
</f:facet>
<p:rowToggler />
</p:column>
This is just for your reference, but I think you can do something similar. Maybe create a button somewhere on the page that clears the filter on click?
I've been trying to make use of primefaces lazy loading datatable. Without the lazy loading, the method delete(trans) gets called but not same with the lazy. Please, can someone tell me why the delete(trans) is never called when clicked. I've been on it all day (I tried with primefaces 4.x and 5.x)
<h:form>
<p:dataTable value="#{transactionView.transactions}" var="trans"
paginator="true" rows="10"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" lazy="true">
<p:column headerText="#{messages.trans_date}" width="100">
<h:outputText value="#{trans.transDate}">
<f:convertDateTime pattern="#{messages.date_pattern2}"/>
</h:outputText>
</p:column>
<p:column headerText="#{messages.description}">
<h:outputText value="#{trans.description}"/>
</p:column>
<p:column>
<p:commandLink value="X" style="color: red" update="#form" ajax="true"
action="#{transactionView.delete(trans)}"/>
</p:column>
</p:dataTable>
</h:form>
I added a global filter to the primefaces datatable. When I hit enter, the filter text is not being sent to the server for query. My code is as follows :
<h:form id="searchResultsForm">
<p:dataTable value="#{searchController.resultItems}"
var="item" editable="false"
id="searchResultsTable" lazy="true"
tableStyleClass="viewedHistoryTable"
emptyMessage="No items"
widgetVar="searchResultsTableVar"
currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"
rowKey="#{item.abbr}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search:" />
<p:inputText id="globalFilter" onkeyup="if (event.keyCode === 13){PF('searchResultsTableVar').filter();}" style="width:150px" placeholder="Filter results"/>
</p:outputPanel>
</f:facet>
<p:column rendered="true">
<h:outputText value="#{item.title}" />
<br />
<h:outputText value="#{item.abbr}" styleClass="searchResultsAbbr" />
</p:column>
</p:dataTable>
</h:form>
If I remove the if condition to check the event keycode of Enter, the filter string is sent to the server on every key press. Not sure why the client is sending a empty string on enter. Any ideas?
I wanted to share my working code :
<h:form id="searchResultsForm">
<p:dataTable value="#{searchController.resultItems}"
var="item" editable="false"
id="searchResultsTable" lazy="true"
tableStyleClass="viewedHistoryTable"
emptyMessage="No items"
widgetVar="searchResultsTableVar"
currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"
rowKey="#{item.abbr}" selectionMode="single" selection="#{searchController.currItem}">
<f:facet name="header">
<h:panelGroup>
<p:outputPanel style="padding-bottom: 4px;">
<p:inputText id="globalFilter" onchange="PF('searchResultsTableVar').filter();" style="width:60%;" placeholder="Filter results"/>
<p:commandButton id="Search" value="Search" process="#this" update="#this" style="font-size: 0.8em;"/>
</p:outputPanel>
</h:panelGroup>
</f:facet>
<p:column rendered="true">
......
</p:column>
</p:dataTable>
</h:form>
You could just use a jquery attachment so remove the 'onkeyup' altogether.
$(document).ready(function() {
$('#globalFilter').keypress(function(event) {
if ((event.keyCode || event.which) == 13) {
PF('searchResultsTableVar').filter();
}
});
});
Tested here: http://jsfiddle.net/Zcfga/3/
is that I have uploaded my DataTable with data from BD, but what I need is to put the row number of the loaded data in my Grid.
<p:dataTable id="dataTable" var="rol" value="#{mantRolMB.roles}"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowKey="#{item}" >
<p:column>
<f:facet name="header">
<h:outputText value="N°" />
</f:facet>
<h:outputText value="#{item}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Nombre Corto" />
</f:facet>
<h:outputText value="#{rol.nbNomCorto}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Nombre Largo" />
</f:facet>
<h:outputText value="#{rol.nbNomLargo}" />
</p:column>
</p:dataTable>
Please help to load a item number.
You can define rowIndexVar="rowIndex" and then use it like this: <h:outputText value="#{rowIndex}" />
I'm using PrimeFaces 3.5, with a datatable that i need use a FilterBy component.
In show case, it works ok: http://www.primefaces.org/showcase/ui/datatableFiltering.jsf
well, when i do my first filter, its work and it show me result, but when i do a second filter, it stop working.
See my xHTML:
<p:dataTable id="users"
var="user"
value="#{userMB.users}"
rowKey="#{user.id}"
selection="#{userMB.userSelected}"
selectionMode="single"
rows="10"
paginator="true"
filteredValue="#{userMB.filteredUser}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
>
<p:column headerText="Id" >
#{user.id}
</p:column>
<p:column headerText="Login" filterBy="#{user.login}">
#{user.login}
</p:column>
</p:dataTable>
Observations: userMB its my managed bean, #SessionScoped
users it's a List
filteredUser it's a List
it's all... thank a attention :)
I am new here too, but this example worked for me.
I see some problems in your example.
First if you put var="user" then rowKey="#{userMB.id}" must be rowKey="#{user.id}"
Same here:
As you see I removed filterValue="#{usuario.login}" as I don't used this.
In the end this should look like this:
<p:dataTable id="users"
var="user"
value="#{userMB.users}"
rowKey="#{user.id}"
selection="#{userMB.userSelected}"
selectionMode="single"
rows="10"
paginator="true"
filteredValue="#{userMB.filteredUser}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
>
<p:column headerText="Id" >
#{user.id}
</p:column>
<p:column headerText="Login" sortBy="#{user.login}" filterBy="#{user.login}">
#{user.login}
</p:column>
</p:dataTable>
Maybe its not problem, but I used #ViewScoped.
Hint: you can be interested in filterMatchMode="contains"
I hope I helped you.
this is a working PF3.5 datatable dont forget to wrap it inside an
<p:dataTable id="surveyTable" var="survey" value="#{surveyBean.surveys}" widgetVar="surveysTable"
emptyMessage="Keine Umfragen zu diesem Suchbegriff vorhanden" filteredValue="#{surveyBean.filteredSurveys}"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<f:facet name="header">
Liste der Umfragen
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="surveysTable.filter()" style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="idColumn" headerText="ID" filterBy="{survey.id}" filterMatchMode="contains">
<h:outputText value="#{survey.id}" />
</p:column>
<p:column id="titleColumn" filterBy="#{survey.title}" headerText="Bezeichnung" filterMatchMode="contains">
<h:outputText value="#{survey.title}" />
</p:column>
<p:column id="activeColumn" headerText="Aktiv" filterBy="#{survey.active}" filterOptions="#{surveyBean.surveyOptions}"
filterMatchMode="exact">
<h:outputText value="#{survey.active}" />
</p:column>
<p:column id="toggleColumn">
<p:rowToggler />
</p:column>
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"
styleClass=" ui-widget-content grid">
<f:facet name="header">
Details der Umfrage
</f:facet>
<h:outputText value="Bezeichnung:" />
<h:outputText id="model" value="#{survey.title}" />
<h:outputText value="Status:" />
<h:outputText id="year" value="#{survey.active}" />
<h:outputText value="ID:" />
<h:outputText value="#{survey.id}"/>
</h:panelGrid>
</p:rowExpansion>
</p:dataTable>