Missing styling for p:column filterOptions?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Dsleeper
Posts: 119
Joined: 29 Jul 2010, 13:33
Location: Bergen, Norway
Contact:

20 May 2019, 07:51

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
Image

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?
Primefaces, Mojarra, Tomcat

http://www.dsleeper.net
https://www.mylog.no

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 May 2019, 08:31

Please use p:* components instead of h:*

Dsleeper
Posts: 119
Joined: 29 Jul 2010, 13:33
Location: Bergen, Norway
Contact:

20 May 2019, 09:03

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>
Primefaces, Mojarra, Tomcat

http://www.dsleeper.net
https://www.mylog.no

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 May 2019, 09:28

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

Dsleeper
Posts: 119
Joined: 29 Jul 2010, 13:33
Location: Bergen, Norway
Contact:

20 May 2019, 09:50

Ok. Thank you for clearing that up! I will implement the JS function clearFilter instead :-)
Primefaces, Mojarra, Tomcat

http://www.dsleeper.net
https://www.mylog.no

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

21 May 2019, 14:57

Thanks a lot for the update!

Best Regards,

Post Reply

Return to “Roma - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest