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?
Missing styling for p:column filterOptions?
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please use p:* components instead of h:*
Github Profile: https://github.com/mertsincan
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?
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>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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();The reasoning for using filterOptions instead of via f:facet is because i cannot get js:clearFilters() to work on f:facet defined filters
Code: Select all
function clearFilters() {
PF('dtw').clearFilters();
//calls to clear individual elements
}
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>
- Yes, DataTable renders native html select tag not p:selectOneMenu with filterOptions and we don't style it. Please use f:facet and p:selectOneMenuExample code below. The first defined column does not apply correct theme/template styling whereas the second column definition does. Is this expected behaviour?
Github Profile: https://github.com/mertsincan
Ok. Thank you for clearing that up! I will implement the JS function clearFilter instead
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the update!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests