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>
}
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();
}
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();
}
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>