Wednesday, January 23, 2013

DataTable -Multiple checkbox selection with ajax

Problem

You need to select few rows and then hit button to continue with logic. (using checkbox)
Button should be disabled if no entry is selected. (Ajax events)
When you press button you get popup window (dialog) that displays selected entries.

Solution


<h:form id="detailsForm">
<p:dialog id="detailsDlg" widgetVar="details" modal="true" resizable="false" width="900">

  <p:dataTable id="recordsTable" value="#{activeBackingBean.recordsDataModel}"
var="rec" selection="#{activeBackingBean.selectedRecords}"
  scrollable="#{activeBackingBean.recordsDataModel.rowCount gt 7 ? true : false}"
scrollHeight="200" scrollWidth="750"
  resizableColumns="false" >

<p:column selectionMode="multiple" width="35"/>

<p:ajax update="viewSelectedRecButton" event="toggleSelect
listener="#{activeBackingBean.recordsRowSelected}"/>
<p:ajax update="viewSelectedRecButton" event="rowSelectCheckbox"
listener="#{activeBackingBean.recordsRowSelected}"/>
<p:ajax update="viewSelectedRecButton" event="rowUnselectCheckbox"
listener="#{activeBackingBean.recordsRowSelected}"/>

<p:column headerText="Broj" width="200">
    #{rec.number}
    </p:column>

  <p:column headerText="Registracija" width="420">
    #{rec.registration.formatted}
    </p:column>

    <f:facet name="footer">
        <p:commandButton id="viewSelectedRecButton" value="SomeAction"
icon="ui-icon-search"
                               disabled="#{empty activeBackingBean.selectedRecords}"
               update=":detailsForm:displayMultiRec"
                              oncomplete="multiRecDialog.show();"/>
       </f:facet>  
        </p:dataTable>
    </p:dialog>


   <p:dialog id="multiDialog" header="Odabrani zapisnici" widgetVar="multiRecDialog"
          height="300" showEffect="fade" hideEffect="explode">
       <p:dataList id="displayMultiRec"
            value="#{activeBackingBean.selectedRecords}" var="selectedRecord">
        Broj: #{selectedRecord.number}, Rega: #{selectedRecord.registration.formatted}
      </p:dataList>
   </p:dialog>


Listener on ajax event is optional.

BackingBean:

private TowRecord[] selectedRecords;
private RecordsDataModel recordsDataModel;
public void recordsRowSelected(AjaxBehaviorEvent e)

public class RecordsDataModel extends ListDataModel<TowRecord> implements SelectableDataModel<TowRecord>

ajax events:
toggleSelect - toogle/untoggle all

References

http://www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf
http://stackoverflow.com/questions/12677924/primefaces-datatable-ajax-not-updating-any-component-except-itself