Menu
I'm using a PrimeFaces DataTable to display records (randomly generated in a sandbox application). I am using the check box selection version. The basic DataTable works perfectly, including the Delete and Cancel buttons (which functionality only really is available from the confirmation dialog). I am trying to add functionality to the DataTable so that when a check box is selected, other controls on the page are enabled or disabled based on the selection.
In other words, if no rows are selected (no check boxes are checked) certain buttons and/or menu items are disabled or not rendered. Selecting one or more rows by clicking the check box should enable or render the controls. I have tried using the built in JavaScript event handlers, but I cannot make this work.
Right now my page displays a DataTable 5 columns: a check box selection column, First Name, Last Name, Age. I made something like this work in another sandbox of mine using simple boolean check boxes and updating a boolean with the onclick event. Unfortunately, there doesn't seem to be anything similar in this DataTable - or if there is I don't know how to implement it.
My index page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./newTemplate.xhtml">
<ui:define name="content">
<h:form>
<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10"
selection="#{tableBean.selectedNames}">
<f:facet name="header">
Customer List
</f:facet>
<p:column selectionMode="multiple" />
<p:column headerText="Cust ID">
<h:outputText value="#{data.id}" />
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{data.firstName}" />
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{data.lastName}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{data.age}" />
</p:column>
<f:facet name="footer">
<p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg"
>
<h:outputText value="You are about to permanently delete records." /><br /><br />
<h:outputText value="Are you sure you want to continue?" /><br /><br/>
<h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Code from my backing bean which may be relevant:
public void deleteNames()
{
for(Data person : selectedNames)
{
data.remove(person);
}
}
public void cancelDelete()
{
for(Data name : selectedNames)
selectedNames = null;
}
public void onRowSelect(SelectEvent event)
{
if(selectedNames == null || selectedNames.length < 1)
setDisable(true);
else
setDisable(false);
}
public boolean isDisable() {
if(selectedNames == null || selectedNames.length < 1)
disable = true;
else
disable = false;
return disable;
}
public void setDisable(boolean disable) {
this.disable = disable;
}
878
There is a workaround indeed, at least work for me.
PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) {
...
...
//save state
this.writeSelections();
// added to add instant row selection
this.fireRowSelectEvent(rowId);
// end
}
<p:datatable widgetVar="wv1" id='mydatatable' ....>
...
<p:datatable/>
<script type="text/javascript">
if(!wv1_main.cfg.onRowSelectUpdate){
wv1.cfg.onRowSelectUpdate="";
}else{
wv1.cfg.onRowSelectUpdate+=" ";
}
wv1.cfg.onRowSelectUpdate+="UPDATE_IDS";
</script>
Replace 'UPDATE_IDS' with your panel ids seperated by space such as "panel1 panel2";
<h:header/>
...
<script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/>
<h:header/>
you may highligh selected rows with some more modification
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
