CODEWITHSUNDEEP
primefaces
Amit Singh
Amit Singh

Reputation: 125

Primefaces: Hide/Show exact filter in datatable

I am creating a dataTable with filters where the filters can be displayed/hidden using a selectBooleanButton. I am able to hide the text filters, but the select box for 'exact' filter does not hide. Code is given below. I would appreciate any help.

<p:dataTable id="orgs" var="id" widgetVar="idTable"
value="#{orgList.ids}" rows="10"
rowKey="#{id.idPk}"
paginator="true" paginatorPosition="top" 
selectionMode="single" 
selection="#{orgList.selectedOrg}"
filteredValue="#{orgList.filteredValues}"
>

<f:facet name="header">
    <p:toolbar id="orgListToolbar">
        <p:toolbarGroup align="right">
            <p:selectBooleanButton value="#{orgList.showFilter}" onIcon="myfilter" offIcon="ui-icon-minusthick" onLabel="F" offLabel="F">
                <p:ajax update="orgs" oncomplete="idTable.clearFilters()"/>
            </p:selectBooleanButton>
        </p:toolbarGroup>
    </p:toolbar>
</f:facet>


<p:column sortBy="#{id.id}" headerText="Id" filterBy="#{id.id}" filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}">
    <h:outputText value="#{id.id}" />
</p:column>
<p:column sortBy="#{id.idCls.clsName}" headerText="Id Type"             
        filterBy="#{id.idCls.clsName}" filterMatchMode="exact" filterOptions="#{commonLists.selectItemIdClses}" 
        filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}" >
    <h:outputText value="#{id.idCls.clsName}" />
</p:column>

Upvotes: 1

Views: 9238

Answers (3)

chris dany
chris dany

Reputation: 450

The simplest solution is define own style and override the value with !important.

        <style type="text/css">
            .ui-column-filter{
                display:none !important;
            }
        </style>

Upvotes: 0

fayis kottakkal
fayis kottakkal

Reputation: 11

to hide filter from column header in jsf datatable include

filterStyle="display : none"

it will hide the filter column

Upvotes: 1

Daniel
Daniel

Reputation: 37061

That's because Primefaces overrides your filterStyle

You can do the following :

In your custom css file add the following (id is your table id)

#id .ui-column-filter{
 display:none;
}

make sure you include your css in the end... (You can load the css in the body) like this

<h:body>
    <h:outputStylesheet library="css" name="myCssFile.css" target="head" />

Note that display: none; is enough , no need for the visibility: hidden; at all

In order to hide / show the filters you can use jQuery .hide() / .show() functions with the proper selectos

For example :

$("#form\\:dataTable th select").hide();//.show

$("#form\\:dataTable th input").hide();//.show

Check it in DataTable - Filtering (in console of your browser developer tools)

Upvotes: 1

Related Questions