DataTable clearFilter() not working properly

Question

I have a complicate JSF that contain dataTable with filter in each one of the columns. In order to make sure that the generate button will fetch all the data first I need to clear all the filters when the user press the button.

I try to do use onclick but then I couldn’t see the blockUI I also try on complete (ajax) but again it was not working properly with all the other items (blockUI ,message). I decided to try to clear the filters via server side but only dataTable.reset() is working.

I have no more ideas how to clean the filters ???

Is this API working ?

Appreciate your help

Thanks

<h:panelGrid columns="1" style="width: 100%">
    <p:panel id="vt-panel">
        <h:panelGrid columns="5" cellpadding="2" >  
            <h:outputText value="Start Date"  />
            <p:calendar id="vt-start" value="#{vtRepBean.startDate}" binding="#{startDateComponent}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" maxdate="#{vtRepBean.endDate}">
                <p:ajax event="dateSelect" listener="#{vtRepBean.handleStartDateSelect}" update=":mainForm:vt-end"/>
            </p:calendar>
            <h:outputText value="End Date"  />
            <p:calendar id="vt-end" value="#{vtRepBean.endDate}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" mindate="#{vtRepBean.startDate}">
                <p:ajax event="dateSelect" listener="#{vtRepBean.handleEndDateSelect}" update=":mainForm:vt-start"/>
            </p:calendar>
            <p:commandButton
                id="genVtBtn"
                value="Generate"
                actionListener="#{vtRepBean.handleVTGenerateButton}"
                update=":mainForm:vt-panel,:mainForm:vt-panel-table">
            </p:commandButton>
        </h:panelGrid>
    </p:panel>
</h:panelGrid> 
<p:growl id="vt_message" showDetail="true" autoUpdate="true"/>
<h:panelGroup id="vt-panel-table">
    <p:dataTable id="vtDataTable"
                 widgetVar="vtWidget"
                 var="reportObject"
                 value="#{vtRepBean.reportObjectsList}"
                 rendered="#{vtRepBean.renderVTReport}"
                 filteredValue="#{vtRepBean.filteredVTList}"
                 paginator="true"
                 paginatorPosition="bottom"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="50,100,200"
                 rows="50"
                 style="width: 100%"> 
        <p:columnGroup type="header"> 
            <p:row>  
                <p:column colspan="5" headerText="VT request"/> 
                <p:column colspan="1" headerText="Dis" /> 
            </p:row>  
            <p:row>  
                <p:column headerText="CREATE DATE" sortBy="#{reportObject.log.createDate}" filterBy="#{reportObject.log.createDate}" filterMatchMode="contains"/>  
                <p:column headerText="IP" sortBy="#{reportObject.log.ip}" filterBy="#{reportObject.log.ip}" filterMatchMode="contains"/>    
            </p:row>
        </p:columnGroup>
        <p:column >  
            <h:outputText value="#{reportObject.log.createDate}"/>  
        </p:column>
        <p:column >  
            <h:outputText value="#{reportObject.log.ip}"/>  
        </p:column>    
    </p:dataTable>
    <p:commandLink rendered="#{vtRepBean.renderVTReport}" ajax="false" onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)">  
        <p:graphicImage value="resources/images/excel.png" title="excel" style="border-color: white"/>  
        <p:dataExporter id="xlsReport"
                        type="xls" 
                        target="vtDataTable"
                        fileName="VTReport"
                        postProcessor="#{vtRepBean.postProcessXLS}"/>
    </p:commandLink>
</h:panelGroup>
<p:blockUI widgetVar="blockVTPanel" trigger="genvtBtn" block="vt-panel">
    <div class="disable-scroll">
        <p:graphicImage value="resources/images/ajax-loader.gif"/> 
    </div>
</p:blockUI>

     DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:vtDecomDataTable");
        if (!dataTable.getFilters().isEmpty()) {
            logger.info("dataTable.getFilters().isEmpty() :" + dataTable.getFilters().isEmpty());

            dataTable.getFilters().clear();// not working
            dataTable.getFilteredValue().clear();// not working
            dataTable.setFilteredValue(null);// not working
            dataTable.setFilters(null);// not working
            dataTable.setFilterMetadata(null);// not working 

            dataTable.reset();// working 

            RequestContext requestContext = RequestContext.getCurrentInstance();
            requestContext.update("mainForm:vtDecomDataTable");

        }

Answer 1

To clear all the inputs of the filters you can do it by javascript:

<p:commandButton onclick="PF('vtWidget').clearFilters()" />

vtWidget is the widgetVar of the datatable.

Basically clearFilters() will clear the fields for you and call filter(), and the filter function would update your datatable, which in turns will empty the filtered list.

Note: This would work only if the filters were inputText. If you have custom components then you should implement your own clear based on the components that you have.

Sometimes if you have custom components, you need to empty the filtered list manually, as you did in the comments!

Answer 2

This is how i solved my problem.

 RequestContext requestContext = RequestContext.getCurrentInstance();
 requestContext.execute("PF('widget_orderDataTable').clearFilters()");

Hope its help.

Answer 3

For clearing custom filters you can use primefaces resetInput, along with clearFilters() discussed in other answers, and a custom actionListener method. See code snippets below:

<p:dataTable id="dataTable" widgetVar="dataTable"
    value="#{bean.listOfObjects}" var="object">

<p:commandButton value="Clear All Filters"
    onclick="PF('dataTable').clearFilters()" 
    actionListener="#{controller.clearAllFilters}"
    update="dataTable">
    <p:resetInput target="dataTable" />
</p:commandButton>

Controller.java

public void clearAllFilters() {

    DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("form:dataTable");
    if (!dataTable.getFilters().isEmpty()) {
        dataTable.reset();

        RequestContext requestContext = RequestContext.getCurrentInstance();
        requestContext.update("form:dataTable");
    }
}

I hope this helps anyone looking to clear custom filters.