To uncheck all checkboxes of primefaces datatable on click of command button - jsf-2

Question

I have a editable primefaces datatable with checkboxes as one of the column.Is there any way to uncheck all checked checkboxes on click of the command button.
My JSF page code snippet.
<h:form id="form">
<h:selectOneMenu id="workspaceOptions"
value="#{tableBean.selectedItem}" class="selectMenu">
<f:selectItem id="item1" itemLabel="Select" itemValue="#{null}" />
<f:selectItem id="item2" itemLabel="Assignments"
itemValue="assignment" />
<f:selectItem id="item3" itemLabel="Preview" itemValue="2" />
<f:selectItem id="item4" itemLabel="Print" itemValue="3" />
<f:selectItem id="item5" itemLabel="Refresh" itemValue="4" />
<f:selectItem id="item6" itemLabel="Clear checkmarks" itemValue="5" />
</h:selectOneMenu>
<h:commandButton value="GO" class="commandButton"
action="#{tableBean.submit}" />
<br />
<br />
<br />
<p:dataTable id="multiCars" var="car"
value="#{tableBean.mediumCarsModel}"
selection="#{tableBean.selectedCars}" editable="true" editMode="cell">
<f:facet name="header">
Checkbox Based Selection
</f:facet>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}"
update=":form:messages" />
<p:column headerText="Model" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.model}"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column selectionMode="multiple" style="width:2%;align:middle">
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
</p:column>
<p:column headerText="Manufacturer" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.manufacturer}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.manufacturer}" style="width:96%"
label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.color}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.color}" style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View"
icon="ui-icon-search" action="#{tableBean.getSelection}" />
</f:facet>
</p:dataTable>
</h:form>
I am ok with handling of this functionality at either client side or server side.

Answer 1

If you want to use a separate button, then you can call the Javascript method provided in the PrimeFaces documentation.
unselectAllRows() - Unselects all rows.
You would do this by providing your DataTable a widgetVar:
<p:dataTable id="multiCars" widgetVar="multiCars" ... >
then calling it from a commandButton of type "button" (for client-side processing):
<p:commandButton type="button" value="Deselect All"
onclick="multiCars.unselectAllRows();" />
That said, why don't you just use a select all/deselect all option provided by the framework? If you remove the header facet of your selectionmode="multiple" column, then it will display a checkbox allowing you to select or deselect all.
So instead of
<p:column selectionMode="multiple" style="width:2%;align:middle">
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
</p:column>
Use this (I removed the align:middle CSS attribute because it doesn't do anything):
<p:column selectionMode="multiple" style="width:2%" />