Javascript widget method "uncheckAll" do nothing !

[schlebe]

I have developped a DataTable with filters (SelectCheckboxMenu) on some columns.

In header title, I have added a CLEAR button to reset all filters in only one click like in Excel

To reset all filters, the onClick() event calls a ClearFilters() Javascript client that is

Code: Select all

function clearAllFilters()
    {
    var oTable = PF('WidgetUserTable');
                
    oTable.clearFilters();
                                
    oTable.filter();

    updateFilterTable(); // using <p:remoteCommand>
    }

The JavaScript ClearFilters() function clears selected values of <p:SelectCheckboxMenu> but don't clear visual SelectCheckboxMenu.inputs !!!

Before is use "value" attribute of SelectCheckBoxMenu, the previous code works correctly.

When I start to use "value" attribute, the program stops to clear correclty the SelectCheckBoxMenu used for filtering.

To solve this issue, I decide to uncheck all CheckBox manually with this code

Code: Select all

function clearAllFilters()
    {
    var oTable = PF('WidgetUserTable');
                
    oTable.clearFilters();
                                
    PF('RegulationFilter').uncheckAll();
    PF('TireClassNameFilter').uncheckAll();
    PF('PerformanceFilter').uncheckAll();
                
    oTable.filter();

    updateFilterTable();
    }

But uncheckAll() Javascript function seems to not working !

Next, I decide to replace uncheckAll() function by a custom function

The workaround that I found, would be to clear MANUALLY the checked items in SelectCheckBoxMenu like this.

Code: Select all

function uncheckAllInputs(sName)
    {
    var oWidget = PF(sName);
    for(var i in oWidget.inputs)
        {
        oWidget.inputs[i].checked = false;
        }   
    }
                
function clearAllFilters()
    {
    var oTable = PF('WidgetUserTable');
                
    oTable.clearFilters();
                                
    uncheckAllInputs('UserLocationFilter');
    uncheckAllInputs('TireClassNameFilter');
    uncheckAllInputs('PerformanceFilter');
                
    oTable.filter();

    updateFilterTable();
    }

This solution (2 workarounds) work for me on PrimeFaces 6.0 and 6.0.13.

For me, there are 2 issues

1. the oTable.clearFilters() function make half of work since selected values seem deleted but not visual values !

2. the uncheckAll() function do nothing !

Is there 2 bugs ?

For information, the <p:DataTable> code is

Code: Select all

<p:dataTable
    id="alignmentTable"
    widgetVar="AlignmentTable"
    var="row"
    value="#{viewController.alignments}"
    filteredValue="#{viewController.filteredAlignments}"
    rowKey="#{row.getId()}"
    resizableColumns="true"
    resizeMode="expand"
    scrollable="true"
    selection="#{viewController.selectedAlignment}"
    >
                
    <p:ajax event="filter" listener="#{viewController.filterListener}"/>

    <f:facet name="header">
            List of ALIGNMENTs
        
        <p:commandButton 
            id="toggler" 
            type="button" 
            value="Columns" 
            title="Select columns to show or hide" 
            style="float:left" 
            icon="ui-icon-calculator"
            />
       
        <h:outputText
            id="TableHeader"
            value="#{viewController.getNrRowsFound()} rows" 
            style="width:160px; float:left; font-size:16px"
            />
        
        <p:commandButton 
            id="clearFilter" 
            value="Clear" 
            title="Clear all column's filters" 
            style="float:left"
            oncomplete="clearAllFilters()"
            update="alignmentTable"
            rendered="#{viewController.isClearButtonVisible()}" 
            >

            <p:resetInput target="alignmentTable" />
        </p:commandButton>

        <p:columnToggler datasource="alignmentTable" trigger="toggler"/>
    </f:facet>

    <p:column  
        headerText="Regulation"
        styleClass="filtered-column #{viewController.getRegulationFilterStyle()}"
        style="width:24ch;"
        sortBy="#{row.regulationName}"
        filterBy="#{row.regulationName}"
        filterMatchMode="in"
        >

        <f:facet name="filter">
            <p:selectCheckboxMenu 
                widgetVar="RegulationFilter" 
                id="RegulationFilter" 
                label="REGULATION-NAME" 
                onchange="PF('AlignmentTable').filter()" 
                onHide="updateFilter(this)" 
                panelStyle="width:250px" 
                scrollHeight="150"
                value="#{viewController.selectedRegulationNameFilterList}"
                >
                <f:selectItems value="#{viewController.getFilterRegulationNameList()}"/>
            </p:selectCheckboxMenu>
        </f:facet>
        <h:outputText value="#{row.regulationName}"/>
    </p:column>

... some others columns ...

    </p:dataTable>

[kukeltje]

Sounds like you investigated good enough. Please file two issues.

[f6750699]

Te following code works well to clear all filters:

JSF:

Code: Select all

<p:datatable [...] >

<f:facet name="{Exporters}">
<p:commandButton value="Clean all filters" onclick="PF('myDatatableWidgetVar').clearFilters()" actionListener="#{myController.clearAllFilters}" update="myDatatbleID" style="float: left">
<p:resetInput target="myDatatbleID" />
</p:commandButton>
</f:facet>
[...]
</p:dataTable>

Bean:

Code: Select all

    public void clearAllFilters() {
        DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("MyFormID:myDatatbleID");

        if (!dataTable.getFilters().isEmpty()) {
            dataTable.reset();

            RequestContext requestContext = RequestContext.getCurrentInstance();
            requestContext.update("MyFormID:myDatatbleID");
        }
    }

Regards,