CODEWITHSUNDEEP
jsfrichfaces
nudaStck
nudaStck

Reputation: 341

How to use JSF's h:selectBooleanCheckbox with h:dataTable to get selected checkboxes without submitting the page content?

In my application, I have a h:datatable which contains vehicles data and h:selectBooleanCheckBox in each of its row. I want know the selected checkbox in the datatable datatable's row in the backing bean without applying any submit button. The idea of doing this is; when any user clicks the check boxes in one application page, s/he could easily see the selected rows in other pages aswell beacause the datatable in every page contains many vehicles. Therefore, users could be able to see the selected vehicles in any page and do the related operation.

The following shows part of my JSF page.

<rich:dataTable id="vehicleTable" var="vhcl" value="#{mainPage.vehicleList}"
binding="#{mainPage.vehicleTable}" > 
<rich:column id="col_sel" width="10px"
<h:selectBooleanCheckbox title="#{general.showOnMap}" onclick="showOnMap(this)"   id="selectedCheckBox" />
</rich:column>
<rich:column id="trackId" label="#{general.vehicleName}" >
    <f:facet name="header">
     <h:outputText value="#{general.vehicleName}" id="state_name" />
    </f:facet>
<h:outputText value="#{vhcl.vehicle.mtsTrackId}" id="vehicleId" title="#{general.vehicleId}" style="font-size:10px; color:blue;" />
    <br/>
<h:outputText value="#{vhcl.vehicle.vehiclePlate}" id="vehiclePlate" title="#{general.licencePlate}" style="font-size:10px; color:blue"/>
</rich:column>
<rich:column  id="type_col" label="#{general.vehicleType}" >
<f:facet name="header">
    <h:outputText value="#{general.vehichleType}" id="vehichleTypeLabel" />
</f:facet>
<h:graphicImage value="#{vhcl.typeImage}" height="40" width="40" align="left"/>
<h:panelGrid columns="1" align="right">
    <h:graphicImage id="statusImage" value="#{vhcl.statusImage}" title="#{vhcl.status}" height="15" width="15" />
    <h:graphicImage id="motorStatusImage" value="#{vhcl.motorStatusImage}" title="#{vhcl.motorStatus}" height="15" width="15" />
</h:panelGrid>
</rich:column>
<rich:column id="msg_col" label="#{general.lastMessageDate}" >
<f:facet name="header">
    <h:outputText value="#{general.lastMessageDate}" id="lastMsgDateLabel" />
</f:facet>
<h:outputText value="#{vhcl.messageDate}" id="lastMsgDate" /> 
<br />
<h:outputText value="Hız: " />
<h:outputText value="#{vhcl.instantSpeed}" id="lastSpeed" style="color:blue; font-weight:bold" />
<h:outputText value="km/s" />
</rich:column>
<rich:column id="addr_col" label="#{general.address}" >
<f:facet name="header">
    <h:outputText value="#{general.address}" id="addressLabel"/>
</f:facet>
<h:outputText value="#{vhcl.address}" id="addr" />
<br />
<h:outputText value="#{vhcl.location}" id="location" style="color:blue;" />
</rich:column>

Upvotes: 3

Views: 18555

Answers (1)

prageeth
prageeth

Reputation: 7395

In your Vehicle class create a Boolean field and add getter and setter methods for it like this.

private Boolean selected;

public Boolean getSelected() {
  return selected;
}

public void setSelected(Boolean selected) {
  this.selected = selected;
}

Then bind your checkBox to that property and add a <a4j:support> tag to the checkBox as below.

<h:selectBooleanCheckbox onclick="showOnMap(this)" value="#{vhcl.selected}">
  <a4j:support event="onchange" ajaxSingle="true"/>
</h:selectBooleanCheckbox

Now when you check or uncheck the checkBox the value is submitted to the bean. Then any time you can find whether the vehicle is selected like this.

if(vehicle.selected != null && vehicle.selected) {
  //vehicle is selected
}

Note: Your table should be inside a form.

Upvotes: 2

Related Questions