Page 1 of 1
Missing styling for p:column filterOptions?
Posted: 20 May 2019, 07:51
by Dsleeper
This image shows a dataTable with one p:column using the filterOptions setting directly (see red marking). The other columns use <f:facet name="filter"> for filtering
As you can see the filterOptions column does not have the same styling applied as the others. Is this something that should be fixed in the template/theme itself or is there a simple workaround available?
Re: Missing styling for p:column filterOptions?
Posted: 20 May 2019, 08:31
by mert.sincan
Please use p:* components instead of h:*
Re: Missing styling for p:column filterOptions?
Posted: 20 May 2019, 09:03
by Dsleeper
I am using p:column. The reasoning for using filterOptions instead of via f:facet is because i cannot get js:clearFilters() to work on f:facet defined filters
Example code below. The first defined column does not apply correct theme/template styling whereas the second column definition does. Is this expected behaviour?
Code: Select all
<p:column headerText="Toveis" sortBy="#{aint.twoWay}" filterBy="#{aint.twoWay}" width="80"
filterOptions="#{selectItemFeeder.yesNoBooleanItems}" filterStyleClass="custom-filter">
<ins class="fa fa-check-square-o green no-text-decoration" jsf:rendered="#{aint.twoWay}" />
</p:column>
<p:column headerText="Type" filterBy="#{aint.integrationType.name}" sortBy="#{aint.integrationType.name}">
<h:outputText value="#{aint.integrationType.name}" />
<f:facet name="filter">
<p:selectOneMenu onchange="PF('dataTableWidget').filter()" styleClass="custom-filter" effect="none">
<f:selectItem itemLabel="Velg.." itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{integrationTypesList.integrationTypes}" var="it" itemLabel="#{it.name}"
itemValue="#{it.name}" />
</p:selectOneMenu>
</f:facet>
</p:column>
Re: Missing styling for p:column filterOptions?
Posted: 20 May 2019, 09:28
by mert.sincan
The reasoning for using filterOptions instead of via f:facet is because i cannot get js:clearFilters() to work on f:facet defined filters
clearFilters() clear the built-in filters which are either input or select elements. For custom filters since we can't know what type of component is used, you have to do it manually in your javascript function that first calls clearFilters();
Code: Select all
function clearFilters() {
PF('dtw').clearFilters();
//calls to clear individual elements
}
Exp;
Code: Select all
//JS
function clearFilters() {
var oneMenu = PF('MyOneMenu'),
table = PF('carsTable');
// clear table
if(table) {
table.clearFilters();
}
//clear selectonemenu
if (oneMenu) {
oneMenu.selectValue('');
}
}
// Xhtml
<h:form id="myform">
<p:dataTable widgetVar="carsTable" ...>
<p:column ..>
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable').filter()" filter="true" widgetVar="MyOneMenu">
...
</p:selectOneMenu>
</f:facet>
...
</p:column>
...
</p:dataTable>
<p:commandButton value="Clear" oncomplete="clearFilters()"/>
</h:form>
Example code below. The first defined column does not apply correct theme/template styling whereas the second column definition does. Is this expected behaviour?
- Yes, DataTable renders native html select tag not p:selectOneMenu with filterOptions and we don't style it. Please use f:facet and p:selectOneMenu
Re: Missing styling for p:column filterOptions?
Posted: 20 May 2019, 09:50
by Dsleeper
Ok. Thank you for clearing that up! I will implement the JS function clearFilter instead
Re: Missing styling for p:column filterOptions?
Posted: 21 May 2019, 14:57
by mert.sincan
Thanks a lot for the update!
Best Regards,