Okay. So I'm trying to implement a global filter using commandLinks. The idea is to have an alphabet of commandLinks, which a user can then use instead of typing a letter.
So far, I've got filtering working on the column (will add the filterStyle none once the commandLinks are working).
Using chromes debug tool (ctrl-shift+i), and clicking on the command link, i can see the datatable refresh the list. However, it doesn't filter anything.
I've been using primefaces showcase, and this stack overflow post to base my code on, which is below:
<p:dataTable id="availableSpecies" var="species" value="#{bbWizardBean.speciesPaletteList}"
emptyMessage="Add First Species" dynamic="true"
width="120"
widgetVar="speciesPaletteVar"
scrollHeight="250" scrollRows="20" scrollable="true"
styleClass="width-fix-spcPal-ie" style="width:150px; margin-left: auto; margin-right: auto;"
filteredValue="bbWizardBean.speciesPaletteListFilter">
<f:facet name="header">
<h:outputText value="Species Palette" />
<p:commandLink id="globalFilter" value="A" onclick="$('speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
</f:facet>
<p:column filterBy="#{species.speciesName}"
headerText="Species" style="font-size:13px;" id="speciesColumn">
<h:outputText id="dragIcon" value="#{species.speciesNameSmall}" style="font-size:11px; background-color:silver; cursor:move;"/>
<h:outputText id="dragIconTooltip" value="..." title="Full Name: #{species.speciesName}" rendered="#{species.speciesNameLength > 10}"/>
<p:tooltip for="dragIconTooltip" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
I've removed the rest of the table to make the codebase smaller. I think I'm screwing up the value I should set, but I'm not quite sure how. Any help would be appreciated! First post, so any suggestions to clean up the question is appreciate ;)
Okay, so for some reason (like i thought), the setting of the val for the filter wasn't working right. You need to add two \'s before the : for some reason. If anyone knows, that would be awesome, but the correct code is:
<p:commandLink id="globalFilter" value="A" onclick="$('#positiveRegulationForm\\:availableSpecies\\:speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
Where
positiveRegulationForm is the top form
availableSpecies is the DataTable name
speciesColumn_filter is the filter for the column speciesColumn
Really curious as to why you need the two forward slashes
Related
In developing a webpage, I'm adjusting a Primeface table with a search field at the top. The search field is supposed to work searching for the content of almost all columns in accordance to what the user types. The following is an image of the table now:
In order for the top field to work as intended, it seems there is a need to activate each desired column's search system (better understanding can be seen in Primeface's own show case page). Those fields, though, are visually undesired and so have been hidden in the .css file with the code
.filter_box{
width: 0px;
height: 0px;
opacity: 0 !important;
}
As a result, the search field isn't showing anymore, but the space where it lies continues leading to a design problem (see image above: the red square at the left points out the space where the hidden space field is and the arrow at the right points out the desired design).
As a newbie in web developing, my question is: how can I use the search system, not show it and not leave such design flaws behind? Is it possible to use my search field at the top fully without using Primeface's search system? (I tried simply erasing that part in the column's configuration, but it didn't work since the search field at the top stop showing the results)
As complement, here is my code now:
<ui:composition template="/logged_template.xhtml">
<ui:define name="content">
<h:form id="hidden_misc">
<h:inputHidden value="#{equipMiscBean.setList(usuariosBeanCrt.usuario.nivelAcesso, usuariosBeanCrt.usuario.empresas)}" />
</h:form>
<h:form id="misc">
<p:panel styleClass="tabela_view" visible="#{dash_menu.get_menu_access(usuariosBeanCrt.usuario,'4')}" >
<p:dataTable
id="equip_table"
value="#{equipMiscBean.list_equip}"
widgetVar="itensTable"
var="item"
emptyMessage="Itens não encontrados"
filteredValue="#{equipMiscBean.list_equip_filtered}" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Busca: " />
<p:inputText id="globalFilter"
onkeyup="PF('itensTable').filter()"
style="min-width: 200px"
placeholder="Entre com a palavra chave"/>
</p:outputPanel>
</f:facet>
<!--Column Equipamento-->
<p:column
headerText="Equipamento"
filterBy="#{item.nome}"
filterMatchMode="contains"
filterable="true" >
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
class="filter_box"
/>
</f:facet>
<h:outputText value="#{item.nome}"/>
</p:column>
...
<!--Column Details-->
<p:column
headerText="Detalhes"
style="width: 80px; text-align: center;" >
<h:outputFormat class="ui-button" value="#{item.linkTable}" escape="false" />
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
I managed to solve the problem. This was done by adding rendered="false" to the search field facet's specification.
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
rendered="false"
/>
</f:facet>
With that done, the .css change with filter_box is no longer required and the search system works correctly.
my problem is really strange ( to me at least ).
I have a dialog written in Primefaces.
From the beginning I had the problem that the fields have not been shown, I had to mark them so that I could read the content.
Then I wrote a css styleclass: color black in order to have it shown. This really worked ( for IE and Chrome ). Afterwards, I had to enlarge the columns from 2 to 4 because the dialog became unreadable. Now, the same thing happens again, I cannot read all the fields, here is a screenshot. Maybe, someone knows what I am missing here? Thank you very much.
Here is the code:
<h:form id="form">
<p:dialog header="Transaction Detail" widgetVar="transactionDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="transactionDetail" style="text-align:left;">
<p:panelGrid columns="4" rendered="#{not empty transactionBacking.selectedTransaction}" columnClasses="label,value">
<h:outputText styleClass="outputText" value="Transaction Id" />
<h:outputText value="#{transactionBacking.selectedTransaction.tableTransactionId}"/>
<h:outputText styleClass="outputText" value="Customer - customerId" />
<h:outputText value="#{transactionBacking.selectedTransaction.customer.customerId}"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
I did a workaround. I wrote
style="color: black"
instead of
styleclass="outputText"
I think there are some problems with our CSS´ but I have to investigate that much more.
I faced a problem with primefaces and tooltip on a single cell column.I was not able to use it so I searched the web and I found many answer like this one. the first answer did not solved the problem, infact that did nothing at all and the second one gave me error at runtime, telling me that it cannot find the righ object in the page.
So,how can i use a tooltip on a single cell of a table for each row?
I'm using primefaces 5.1, jsf 2.2, java 1.6.
despite many answers that suggest you to use primefaces extensions, the only thing you have to do to see your tooltip is to use primefaces itself like this:
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
where idField is the id from which you want to see the tooltip appear and row.property is the value that you want to show into it.
the thing is now simple to make. here it is an example with the datatable:
<p:dataTable var="row" value="#{....}" styleClass="myTable">
<p:column headerText="Header 2">
<h:outputText value="#{row.value2}" id="idField" />
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
</p:column>
</p:dataTable>
I hope this will help.
Best Regards
Yes its possible. See..
<p:column>
<f:facet name="header">
<h:outputText
id="header"
value="Header"
/>
<p:tooltip
for="header"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for header -->
</p:tooltip>
</f:facet>
<h:outputText
id="col"
value="#{object.valueA}"
/>
<p:tooltip
for="col"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for cell -->
</p:tooltip>
</p:column>
In my scenario, I have all my data in cells inside h:outputText elements.
In that case, you can then use the title attribute.
<p:column>
<h:outputText value="#{row.data}" title="#{row.data}"/>
</p:column>
I'm new to primefaces, so I probably did a newbie mistake, but I simply can't google find my answer.
I'm trying to make a hidden panel show after I click on the checkbox, but it doesn't show.
My html looks as follows:
<br></br> Choose one <br></br><br></br>
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’visible’);" >
</p:selectBooleanCheckbox>
<h:outputText value=" click " />
</h:panelGrid>
<p:panel id="testid" header="TESTHDR" style="display:none" >
<h:panelGrid columns="2" cellpadding="10">
<p:selectBooleanCheckbox value="#{selectBooleanView.mTest}">
</p:selectBooleanCheckbox>
<h:outputText value=" test " />
</h:panelGrid>
</p:panel>
The problem is that my testid panel doesn't show after I click on the checkbox.
I'm probably doing the checkbox action listener wrong, but I honestly can't see the problem myself.
change display visible to display block like this because display visible does not exist in css.
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’block’);" >
I think thats it if youre code works fine.
Prime faces mangles IDs similar to ASP.NET. Both ensure that the ID is unique across the page so you get something like id="base_container_child_container_your_control_id"
You should find the way to "unmangle" it. Again in .NET you have control.ClientID which you can get from the server. Not sure about PF equivalent.
Anyhow, the solution would be to add name attribute and use
$('input[name=your-id]') // matches exactly 'your-id'
$('input[name^=your-id]') // matches those that begin with 'your-id' if you have group of them
OR use like selector
id*='value'
im using Primefaces 3.5 to create a dataTable with filters.
<h:form id="table">
<div class="showRuleStyle">
<p:dataTable id="RuleTable" var="e" value="#{ruleListBean.rules}" filteredValue="#{ruleListBean.filteredRules}" styleClass="ruleTable" paginator="true" paginatorPosition="bottom" rows="15" emptyMessage="Keine Einträge gefunden.">
<p:column id="companyColumn" headerText="Name" filterBy="#{e.name}" filterOptions="#{ruleListBean.filterNameOptions}" >
<h:outputText value="#{e.name}"></h:outputText>
</p:column>
...
<p:column>
<f:facet name="header"></f:facet>
<h:commandButton id="DeleteRuleButton" value="Löschen" styleClass="buttondefault" action="#{ruleListBean.removeRule(e)}" update=":table"></h:commandButton>
</p:column>
</p:dataTable>
</div>
</h:form>
Now, i get the table as intended and can choose an filter which updates the table. But now, if i try to choose a different filter or select the empty filter, nothing happens. If I click the button, it works again, which i think is because of the update of the form.
I tried to add
<p:ajax event="filter" update=":table">
and other events, but it won't work.
Any suggestions?
Greets
Alex
What is the scope of the ruleListBean? I've tried your code and it worked as expected (without the p:ajax).
My ruleListBean is in view scope.
It is suggested to use a scope longer than request like viewscope to
keep the filteredValue so that filtered list is still accessible after
filtering. (PrimeFaces User’s Guide pg. 135)
NOTE: Change h:commandButton to p:commandButton so that you can use the update feature.